Le code ci-dessus est exactement le même que celui utilisé sur la page d'accueil. le compteur $ est utilisé pour ajouter une classe de dernier à tous les autres articles (pour garder les articles en ligne).
Si un aperçu $ custom-field a été utilisé, nous l'avons affiché - et traité via le script PHP TimThumb pour redimensionner l'image.

Nous avons bouclé la boucle avec en attendant, afficher les boutons de pagination avec next_posts_link () et previous_posts_link (), et inclus le pied de page.

Enregistrez et prévisualisez votre page de portefeuille. Il est maintenant complet et ne nécessite aucun style supplémentaire puisque nous réutilisons les styles de la page d'accueil. Cela devrait ressembler à l'image ci-dessous une fois que vous aurez ajouté quelques éléments à la catégorie Portfolio:

---

Portefeuille unique

C'est la mise en page utilisée pour afficher plus de détails pour chaque élément du portefeuille lorsque vous cliquez dessus (sur sa page 'unique'); comme indiqué ci-dessous:

Rappelez-vous que dans la partie 3, nous avons utilisé du code dans single.php de diriger toute demande d’articles de la catégorie 'Portefeuille' vers le single-portfolio.php fichier.
Vous trouverez ci-dessous un aperçu de chaque section de la page:

À l'intérieur single-portfolio.php, commencer par ce qui suit:

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

L'en-tête a été inclus et une boucle WordPress normale est lancée. À l'intérieur de la boucle, nous récupérons le Aperçu, aperçu complet, rendez-vous amoureux, client et lien champs personnalisés pour le post. Rappel rapide de l’utilisation de chaque champ personnalisé (extrait de la partie 2):

• Aperçu (URL d'une image de votre travail d'une largeur de 930px)
• aperçu complet (version plus grande de l'œuvre, s'affichera dans une lightbox)
• rendez-vous amoureux (la date d'achèvement des travaux)
• client (à qui le travail était destiné)
• lien (vers une version live de votre travail)

Ensuite, nous incluons le titre en utilisant le titre(), et si un aperçu $ L’image des champs personnalisés existe, elle est analysée par le script TimThumb pour s’assurer qu’elle a une largeur de 930px et sortie vers la page - entourée d’un lien vers le $ previewfull image si elle existe:

 
 
  
 ">  
  
Sous l’image se trouvent les métadonnées de l’élément (contenant le rendez-vous amoureux, client et lien des champs):
 
 if ($ date || $ client || $ link) echo '
'; if ($ date) echo "
$ date
"; if ($ client) echo"
$ client
"; if ($ link) echo"
Visitez le site
";  écho '
'; 
 
Sur la première ligne, nous avons vérifié si au moins un des trois champs contenait quoi que ce soit - l’utilisation de  ||  signifie 'OU'.
À l'intérieur de cela, chaque champ est vérifié individuellement et est affiché s'il contient quelque chose.
 
finalement, le contenu() est utilisé pour afficher le contenu principal, la boucle est fermée et le pied de page inclus:
 
 le contenu(); ?> 
 

Prévisualisez le thème, tout devrait bien paraître - à l'exception de l'aperçu de l'image, où nous devons encore incorporer la Lightbox.

La visionneuse

La FancyBox jQuery Lightbox sera utilisée pour afficher un aperçu plus grand de l'image du portefeuille:

Téléchargez les fichiers et déposez le / fancybox / dossier dans le / inc / dossier de thème.
Créez également un nouveau fichier dans / inc / nommé animate.js.

À l'intérieur header.php ajouter ce qui suit entre et :

Tout d’abord, le fichier CSS de FancyBox (/inc/fancybox/fancy.css) est inclus. La dernière bibliothèque jQuery (v1.3.1) est incluse dans Google Code, suivie du fichier javascript de FancyBox et de la /inc/animate.js fichier.

La bibliothèque jQuery est en cours de chargement à partir de Google Code afin de réduire les temps de chargement, car le visiteur a peut-être déjà visité un site utilisant également la bibliothèque hébergée sur les serveurs de Google. Le fichier sera donc mis en cache. C'est une petite différence, mais vous pouvez toujours sauvegarder la bibliothèque jQuery dans votre / inc / dossier et référence à partir de là si vous préférez.

Enfin, nous devons simplement indiquer à FancyBox à quels liens il doit s’appliquer. Ajouter ce qui suit à /inc/animate.js:

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

Si vous n'êtes pas familier avec jQuery, nous avons référencé le fancybox () fonctionner sur des objets à #fancyopen a (liens à l'intérieur de div avec un ID de fancyopen). Nous avons également traversé plusieurs options: hideOnContentClick ferme l'image quand on clique dessus, et superpositionShow 'assombrit' l'arrière-plan lorsque la lightbox est active.
Pour plus de paramètres FancyBox, voir la section 'Comment utiliser' ici.

Pointe: Vous voulez en savoir plus sur jQuery? Voir la fantastique série de screencast "jQuery for Absolute Beginners" de Jeffrey sur le blog ThemeForest.

Actualisez votre portfolio et essayez la boîte à lumière.

---

Modèle de page par défaut

Nous avons créé nos modèles de page d'accueil et de portfolio, mais nous n'avons pas encore créé de modèle "par défaut" qui sera utilisé pour d'autres pages (par exemple, À propos ou Contactez-nous)..

Ajoutez ces quelques lignes à la fin du code existant dans page.php:

Une boucle WordPress de base affichant le titre et le contenu. Simple.

---

Résumé

Revenez demain lorsque nous créerons la mise en page de nos commentaires (et tirerons parti des nouvelles fonctions de commentaires filetés de WordPress 2.7!) (Partie 5 de notre série.)