WordPress Portfolio – WPESP Theme es un Tema “minimalista”, basado en la idea del portfolio creado por DAILYWP. El objetivo del Theme es que se pueda utilizar como punto de partida para crear portfolios, utilizando WordPress como CMS. En este pequeño tutorial se explican algunas de las pautas seguidas en el diseño, los Codex de WordPress usados, donde también se explican los Custom Write Panel credos para editar el contenido, y las adaptaciones realizadas al script Coda Slider Effect, creado por jQuery for Designers, para que se modifiquen según las necesidades de aquellos que utilicen el Theme.

Nota: Los trabajos añadidos al portfolio no son propios, está sacados de minimalsites.com.

En el diseño se han utilizado dos retículas (grids), una de 12 columnas (66px) y otra de 24 subcolumas (26px) con un glutter de 14px, siendo el ancho de 946px (BBC – Visual Language Guidelines v1.0.6).

Estos parámetros casaban perfectamente con las dimensiones de la proporción áurea que se quería incorporar al diseño. Para respetar la proporción áurea y para tener una mejor visualización del texto se utilizan dos líneas bases en algunas áreas del diseño, una de 14px y otra de 18px, no es lo más correcto pero es la opción que mejor se adecuaba a la idea.

Un poco sobre el estilo – CSS

Se ha dividido en cinco archivos, importándolos en style.css, según se muestra en este código.

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";
@import "style/css/coda.css";
/*@import "style/css/diagnostic.css"; Just use for developing tests */

Reset.css

Se ha utilizado el creado por Eric Meyers, en su versión v1.0 | 20080212.

Typography.css

Como se mencionaba al principio de este artículo la línea base utilizada para el texto es de 18px y el tamaño de la fuente por defecto es de 12px.

El body quedará de la siguiente manera:

body{font: 75%/1.5em Arial, Helvetica, sans-serif;}

James Whittaker ha creado una aplicación bajo Adobe Aire que resulta de ayuda a la hora de crear líneas base.

Colores utilizados:

Darker: #000, Dark: #333, Midel-light: #666, Light: #999, Lighter: #FFF.
Estos colores han sido utilizados tanto para las fuentes como para el diseño.

Layout.css

En este estilo, como indica su nombre, se encuentran las especificaciones del layout.

Coda.css

Los estilos del script coda-slider.js los localizamos en este estilo.

Diagnostic.css

Es una herramienta de diagnostico creada por Eric Meyers, podéis ver la demo aquí.

“El Codex de WordPress fue fundado para revitalizar los esfuerzos de documentación colaborativa de WordPress…”

Portfolio – WPESP Theme se vale de dicha documentación y de diversos tutoriales para adquirir su potencial. El código está comentado con links a los Codex de WordPress o a los tutoriales, como vemos en el siguiente ejemplo del archivo index.php.

if (is_category(work) or is_category(featured)):
// Category Work
// http://codex.wordpress.org/Conditional_Tags#A_Category_Page
include(TEMPLATEPATH . '/category-work.php');
elseif( in_category(3) ) :
// Post in Category Work(in our case ID 3) - View Case Study
// http://codex.wordpress.org/Conditional_Tags#A_Category_Page
// http://codex.wordpress.org/Template_Tags/in_category#Use_OUTSIDE_The_Loop
 include(TEMPLATEPATH . '/work.php');
endif

if(is_page(about)) :
// Page About | http://codex.wordpress.org/Conditional_Tags#A_PAGE_Page
include(TEMPLATEPATH . '/about.php');
elseif(is_page(contact-us)) :
// Page Contact
include(TEMPLATEPATH . '/contact.php');
endif

En el código anterior se muestran algunas de las páginas creadas para este theme las cuales se comentaran, junto con otras.

Index.php

Es el archivo “principal“, llama a distintos archivos según los parámetros establecidos.

Category-Work.php

Se activa cuando se llama a las categorías Featured y Work que son en las que deberán encontrarse los trabajos para aparecer en la Home. Todos los trabajos deberán utilizar la categoría Work incluido el trabajo destacado que será Featured. En la categoría Featured se debe marcar a Work como Category Parent.

Work.php

Corresponde a la página View Case Study de los trabajos, es decir, a la página de cada trabajo. Como se menciona en Category-Work.php los trabajos deberán utilizar la categoría Work. En Work.php llamamos a los posts que pertenecen a la categoría Work, en la Demo corresponde al ID = 3.

About.php

Corresponde a la página About. Cuando comentemos las funciones, explicaremos algunas características que comparte este archivo y Contact.php

Contact.php

Corresponde a la página Contact. WPESP Portfolio Theme utiliza el plugin cformsII para mostrar el formulario.

Deberás editar el archivo cform.php del plugin para mostrar el texto (Required) a continualicón de la etiqueta (label). Este proceso se deberá realizar cada vez que se actualice el plugin.

Proceso de edición de cform.php:

Busca el siguiente código, cortalo…

### adding "required" text if needed
if($field_emailcheck == 1)
$content .= '<span class="emailreqtxt">'.stripslashes($cformsSettings['form'.$no]['cforms'.$no.'_emailrequired']).'</span>';
else if($field_required == 1 &amp;&amp; !in_array($field_type,array('ccbox','luv','subscribe','checkbox')) )
$content .= '<span class="reqtxt">'.stripslashes($cformsSettings['form'.$no]['cforms'.$no.'_required']).'</span>';

… y pégalo a continuación de este otro.

### print label only for non "textonly" fields! Skip some others too, and handle them below indiv.
if( ! in_array($field_type,array('hidden','textonly','fieldsetstart','fieldsetend','ccbox','luv','subscribe','checkbox','checkboxgroup','send2author','radiobuttons')) )
$content .= $nttt . '<li'.$liID.$liERR.'>'.$insertErr.'<label' . $labelID . ' for="'.$input_id.'"'. $labelclass . '><span>' . stripslashes(($field_name)) . '</span></label>';

Home.php

Index.php aparece como “principal” en el apartado anterior, ya que Home.php es el archivo que configura la página principal o home.

“Cuando la página está siendo mostrada como la página principal, si una página de plantilla con el nombre home.php existe para su Tema activo, el plugin anulará la página establecida como página de plantilla y usará home.php en su lugar.”

Functions.php

Siguiendo los consejos del tutoiral How You Can Use WordPress Functions to Run a Smarter Blog se han alojado las funciones en distintos archivos y se han incluido en este archivo.

Portfolio_Panel.php

Se utiliza este archivo para no re-escribir el mismo código en los archivos Home.php y Category-Work.php.

La descripción que aparece en Portfolio_Panel.php se deberá escribir en el Excerpt del panel de administración del post del trabajo. El resto de los datos se añaden como en un post normal y utilizando el Custom Write Panel que se ha creado para WPESP Portfolio Theme que se verá más adelante.

<?php the_excerpt(); ?>

Como vemos en el comentario “// Featured Category (in our case id=5)” del siguiente código, debes editar el archivo para que corresponda con la categoría Featured de tu portfolio.

<?php if (in_category(5)):
// Featured Category (in our case id=5) ?>
<img class="new" src="< ?php echo get_option('home'); ?>/wp-content/uploads/new.png" width="66" height="28" alt="New!" />;
< ?php endif ?>

Se incluirá utilizando el código:

<?php portfolio_panel() ?>

Este archivo contiene el código correspondiente a la ficha de los trabajos, siendo el resultado del front-end el que se observa en la imagen de la derecha.

Portfolio_hCard.php

Al igual que Portfolio_Panel.php se utiliza para alojar un mismo código en distintos archivos. En este caso corresponde al hCard del #sidebar de About.php y Contact.php.

Se incluirá utilizando el código:

<?php portfolio_hcard() ?>

Portfolio_Custom-Write-Panel.php

Esta función es diferente a las anteriores, en este caso, es un plugin que afecta al administrador y se ha creado siguiendo la propuesta del tutorial Creating Custom Write Panels in WordPress. La función crea dos nuevos desplegables en los paneles del administrador, uno en el de posts y otro en el de pages.

Portfolio Post Settings:

Corresponde al primer caso anteriormente mencionado, en el se integran los distintos Custom Fields que se usan al crear el portfolio.

hCard Post Settings:

Corresponde al segundo caso, en el se integran los distintos Custom Fields que se usan al crear el hCard que aparecerá en las páginas About y Contact.

Como vemos en el comentario “// If is About (in our case id=5) or Contact (in our case id=89) page” del siguiente código, debes editar el archivo para que corresponda con las páginas de tu portfolio.

foreach($hcard_meta_boxes as $meta_box) {
if ($post->ID == 5 or $post->ID == 89) {
// If is About (in our case id=5) or Contact (in our case id=89) page
$meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true);

Consigue los Mejores Sliders en Ajax →

Modificaciones realizadas

En esta parte del código se ha añadido “width: 946px” para adaptar el estilo al theme.

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css(
'overflow': 'hidden'
,'width': '946px');

En la demo las imágenes de los botones se encuentran http://demo.wpesp.com/portfolio/wp-content/uploads/scroll_left.png, esta parte la deberás editar utilizando la dirección que hayas elegido para tus botones, por ejemplo, http://yoururl.com/wp-content/uploads/scroll_left.png.

// apply our left + right buttons
$scroll
.before('<img class="scrollButtons left" src="http://demo.wpesp.com/portfolio/wp-content/uploads/scroll_left.png" alt="Left button" />')
.after('<img class="scrollButtons right" src="http://demo.wpesp.com/portfolio/wp-content/uploads/scroll_right.png" alt="Right button" />');

Se ha eliminado esta parte del código original, ya que en nuestro theme no se utiliza esta navegación. En el ejemplo de jQuery for Designers corresponde a la navegación superior.

// handle nav selection
function selectNav() {
  $(this)
    .parents('ul:first')
      .find('a')
        .removeClass('selected')
      .end()
    .end()
    .addClass('selected');
}

$('#slider .navigation').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
  var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
  selectNav.call(el);
}

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1) });
} else {
  $('ul.navigation a:first').click();
}

También se han eliminado las siguientes líneas que corresponden al navegador anterior.

navigation: '.thumb a',
onAfter: trigger, // our final callback

Usted es libre de:

• Copiar, distribuir y comunicar públicamente la obra.
• Hacer obras derivadas.

Bajo las condiciones siguientes:

• Reconocimiento. Debe reconocer los créditos de la obra de la manera especificada por el autor o el licenciador (pero no de una manera que sugiera que tiene su apoyo o apoyan el uso que hace de su obra).
• Compartir bajo la misma licencia. Si transforma o modifica esta obra para crear una obra derivada, sólo puede distribuir la obra resultante bajo la misma licencia, una de similar o una de compatible.

• Al reutilizar o distribuir la obra, tiene que dejar bien claro los términos de la licencia de esta obra.
• Alguna de estas condiciones puede no aplicarse si se obtiene el permiso del titular de los derechos de autor
• Nada en esta licencia menoscaba o restringe los derechos morales del autor.

WPESP Portfolio Theme by WPESP is licensed under a Creative Commons Reconocimiento 3.0 España License.

1. Descarga los archivos del Theme.
2. Instala el Theme. Deberás subir la carpeta wpesp-portfolio en la raíz wp-content/themes de tu instalación de WordPress.
3. Ve al panel Design del Dashboard de tu WordPress y actívalo.
4. !Eso es todo!

¿Difícil? Mejor usa un Theme Premium.

Download: Note: There is a file embedded within this post, please visit this post to download the file.

Adaptado para WordPress 2.7 y testado en Firefox 3, Safari, IE6, IE7 e IE8 Beta.

Eliminar el link a WPESP del footer y/o ayudarnos con tu soporte donación de $10. Gracias.

¿Tienes alguna pregunta?

En este tutorial se ha dado alguna información básica sobre Portfolio – WPESP Theme. Si tienes cualquier duda, utiliza los comentarios de cada post para comentarla, serás contestado lo antes posible.

Update: WordPress Forums.