El código anterior es exactamente el mismo que usamos en la página principal. los $ contador se utiliza para agregar una clase de último a cualquier otro elemento (para mantener los artículos en línea).
Si un $ vista previa se usó el campo personalizado, lo mostramos y lo procesamos a través del script TimThumb de PHP para cambiar el tamaño de la imagen.

Hemos cerrado el Loop con al final, salir los botones de paginación con next_posts_link () y previous_posts_link (), e incluía el pie de página.

Guarde y obtenga una vista previa de la página de su cartera. Ahora está completo y no requiere un estilo adicional ya que estamos reutilizando los estilos de la página de inicio. Debería verse como la imagen de abajo una vez que haya agregado algunos otros artículos a la categoría de Portafolio:

---

Página de cartera única

Este es el diseño utilizado para mostrar más detalles de cada elemento de la cartera cuando se hace clic en (en su página 'única'); Como se muestra abajo:

Recuerda que en la Parte 3, usamos algún código en single.php para dirigir cualquier solicitud de artículos en la categoría 'Cartera' al single-portfolio.php expediente.
A continuación se muestra un resumen de cada sección de la página:

Dentro single-portfolio.php, Comience con lo siguiente:

 ID, 'vista previa', verdadero); $ previewfull = get_post_meta ($ post-> ID, 'preview-full', verdadero); $ date = get_post_meta ($ post-> ID, 'date', true); $ client = get_post_meta ($ post-> ID, 'client', true); $ link = get_post_meta ($ post-> ID, 'link', true); ?>

Se ha incluido el encabezado y se inicia un bucle normal de WordPress. Dentro del bucle recuperamos el avance, vista previa completa, fecha, cliente y enlazar campos personalizados para la publicación. Un recordatorio rápido de para qué es cada campo personalizado (de la Parte 2):

• avance (URL de una imagen de ancho de 930px de su trabajo)
• vista previa completa (versión más grande del trabajo, se mostrará en una caja de luz)
• fecha (la fecha en que se completó el trabajo)
• cliente (para quién era el trabajo)
• enlazar (a una versión en vivo de tu trabajo)

A continuación incluimos el título usando el título(), y si un $ vista previa La imagen de los campos personalizados existe, la imagen se analiza a través de la secuencia de comandos TimThumb para garantizar que tenga un ancho de 930 px y se envíe a la página, que se envuelve en un enlace a la $ previewfull imagen si existe:

 
 
  
 ">  
  
Debajo de la imagen se encuentran los metadatos del artículo (que contiene el fecha, cliente y enlazar campos):
 
 if ($ date || $ client || $ link) echo '
'; if ($ date) echo "
$ fecha
"; if ($ cliente) echo"
$ cliente
"; if ($ link) echo"
Visitar sitio
";  eco '
'; 
 
En la primera línea verificamos si al menos uno de los tres campos contiene algo: el uso de  ||  significa 'o'.
Dentro de eso, cada campo se comprueba individualmente y se imprime si contiene algo.
 
Finalmente, el contenido() se utiliza para generar el contenido principal, el bucle se cierra y el pie de página se incluye:
 
 el contenido(); ?> 
 

Previsualice el tema, todo debería verse bien, excepto la imagen de previsualización, donde todavía necesitamos incorporar la Lightbox..

La caja de luz

El FancyBox jQuery Lightbox se utilizará para mostrar una vista previa más grande de la imagen de cartera:

Descarga los archivos, y suelta el /caja lujosa/ carpeta en la /Cía/ carpeta de temas.
También crea un nuevo archivo en /Cía/ llamado animate.js.

Dentro header.php agrega lo siguiente entre y :

Primero, el archivo CSS de FancyBox (/inc/fancybox/fancy.css) está incluido. La última biblioteca de jQuery (v1.3.1) se incluye desde Google Code, seguida del archivo javascript de FancyBox y el /inc/animate.js expediente.

La biblioteca jQuery se está cargando desde Google Code para reducir los tiempos de carga, ya que es posible que el visitante ya haya visitado un sitio que también utiliza la biblioteca alojada en los servidores de Google, por lo que el archivo se almacenará en caché. Es una pequeña diferencia, pero siempre puede guardar la biblioteca jQuery en su /Cía/ Carpeta y referencia desde allí si lo prefiere..

Finalmente, simplemente necesitamos decirle a FancyBox a qué enlaces se debe aplicar. Agregue lo siguiente a /inc/animate.js:

 $ (document) .ready (function () $ ("# fancyopen a"). fancybox ('hideOnContentClick': true, 'overlayShow': true););

Si no está familiarizado con jQuery, hemos mencionado la caja lujosa() funcionar sobre cualquier objeto en #fancyopen a (enlaces dentro de div's con un ID de fancyopen). También hemos pasado por un par de opciones: hideOnContentClick cierra la imagen cuando se pulsa, y superponer mostrar 'oscurece' el fondo cuando la caja de luz está activa.
Para más parámetros de FancyBox, vea la sección 'Cómo usar' aquí.

Propina: ¿Quieres aprender más sobre jQuery? Vea la fantástica serie de screencast "jQuery for Absolute Beginners" de Jeffrey en el blog ThemeForest.

Actualice su cartera y pruebe la caja de luz.

---

Plantilla de página predeterminada

Hemos creado nuestras plantillas de página de inicio y cartera, pero aún no hemos creado una plantilla "predeterminada" que se utilizará para otras páginas (por ejemplo, Acerca de o Contáctenos).

Agregue estas pocas líneas al final del código existente en page.php:

Un bucle básico de WordPress que genera el título y el contenido. Sencillo.

---

Resumen

Vuelve a consultar mañana cuando crearemos el diseño de nuestros comentarios (¡y aprovecharemos las nuevas funciones de 'comentarios enlazados' de WordPress 2.7! (Parte 5 de nuestra serie.)