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 && !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);Se ha seguido el tutorial Coda Slider Effect realizado por jQuery for Designers para de trabajos. Realizando algunos pequeños cambios al archivo coda-slider.js creado por jQuery for Designers para adaptarlo a las necesidades del theme.
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
Top