De bovenstaande code is exact dezelfde als die we gebruikten op de voorpagina. De $ teller wordt gebruikt om een ​​klasse van toe te voegen laatste naar een ander item (om de items inline te houden).
Als een $ voorvertoning custom-field werd gebruikt, we tonen het - en verwerken het via het TimThumb PHP-script om het formaat van de afbeelding te wijzigen.

We hebben de Loop afgesloten met endwhile, voer de paginaknoppen uit met next_posts_link () en previous_posts_link (), en voegde de voettekst toe.

Bewaar en bekijk uw portfoliopagina. Het is nu voltooid en vereist geen extra styling omdat we de stijlen van de startpagina opnieuw gebruiken. Het moet er ongeveer zo uitzien als de afbeelding hieronder als je een paar andere items hebt toegevoegd aan de categorie Portfolio:

---

Enkele Portfoliopagina

Dit is de lay-out die wordt gebruikt om meer details weer te geven voor elk portfolio-item wanneer erop wordt geklikt (op de 'enkele' pagina); zoals hieronder getoond:

Onthoud dat we in deel 3 wat code hebben gebruikt single.php om verzoeken voor items in de categorie 'Portfolio' naar de single-portfolio.php het dossier.
Hieronder volgt een overzicht van elke sectie voor de pagina:

Binnen single-portfolio.php, begin met het volgende:

 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); ?>

De header is opgenomen en een normale WordPress Loop is gestart. In de loop halen we de voorvertoning, Preview-full, datum, cliënt en link aangepaste velden voor de post. Een snelle herinnering aan wat elk aangepast veld is voor (uit deel 2):

• voorvertoning (URL van een afbeelding van 930 px breed van uw werk)
• Preview-full (grotere versie van het werk, wordt weergegeven in een lightbox)
• datum (de datum waarop het werk is voltooid)
• cliënt (voor wie het werk was)
• link (naar een live versie van je werk)

Vervolgens nemen we de titel op met de titel(), en als a $ voorvertoning afbeelding van de aangepaste velden bestaat, wordt de afbeelding geparseerd via het TimThumb-script om ervoor te zorgen dat de afbeelding 930 px breed is en naar de pagina wordt uitgevoerd - ingepakt in een koppeling naar de $ previewfull afbeelding als het bestaat:

 
 
  
 ">  
  
Onder de afbeelding zijn de metadata voor het item (met de datum, cliënt en link velden):
 
 if ($ date || $ client || $ link) echo '
'; if ($ date) echo "
$ date
"; if ($ client) echo"
$ client
"; if ($ link) echo"
Bezoek Site
"; echo '
'; 
 
Op de eerste regel hebben we gecontroleerd of ten minste een van de drie velden iets bevat - het gebruik van  ||  betekent 'OF'.
Daarbinnen wordt elk veld afzonderlijk gecontroleerd en wordt het uitgevoerd als het iets bevat.
 
Tenslotte, de inhoud() wordt gebruikt om de hoofdinhoud uit te voeren, de lus is gesloten en de voettekst is opgenomen:
 
 de inhoud(); ?> 
 

Bekijk een voorvertoning van het thema, alles ziet er goed uit, behalve de voorbeeldafbeelding, waar we nog steeds de Lightbox moeten integreren.

De lichtbak

De FancyBox jQuery Lightbox wordt gebruikt om een ​​grotere preview van de portfolio-afbeelding weer te geven:

Download de bestanden en laat de / Fancybox / map in de / Inc / themamap.
Maak ook een nieuw bestand in / Inc / genaamd animate.js.

Binnen header.php voeg het volgende toe tussen en :

Eerst het CSS-bestand van FancyBox (/inc/fancybox/fancy.css) inbegrepen. De nieuwste jQuery-bibliotheek (v1.3.1) is opgenomen in Google Code, gevolgd door het JavaScript-bestand van FancyBox en de /inc/animate.js het dossier.

De jQuery-bibliotheek wordt geladen met Google Code om de laadtijden te verminderen, omdat de bezoeker mogelijk al een site heeft bezocht die ook de bibliotheek gebruikt die wordt gehost op de servers van Google, en dus wordt het bestand in de cache opgeslagen. Het is een klein verschil, maar je kunt de jQuery-bibliotheek altijd in je opslaan / Inc / map en verwijs daarnaar als je dat liever hebt.

Ten slotte moeten we FancyBox eenvoudig vertellen op welke koppelingen het zich moet toepassen. Voeg het volgende toe aan /inc/animate.js:

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

Als u niet bekend bent met jQuery, hebben we verwezen naar de fancybox () functie op alle objecten op #fancyopen a (links binnen div's met een ID van fancyopen). We hebben ook een aantal opties doorlopen: hideOnContentClick sluit de afbeelding wanneer erop wordt geklikt, en overlayShow 'verdonkert' de achtergrond wanneer de lightbox actief is.
Zie voor meer FancyBox-parameters het gedeelte 'Hoe te gebruiken' hier.

Tip: Wilt u meer weten over jQuery? Zie Jeffrey's fantastische "jQuery for Absolute Beginners" screencast-serie op de ThemeForest Blog.

Vernieuw je portfolio en probeer de lightbox eruit.

---

Standaard paginasjabloon

We hebben onze sjablonen voor thuis- en portfoliapagina's gemaakt, maar we hebben nog geen 'standaard'-sjabloon gemaakt die voor andere pagina's wordt gebruikt (bijv. Over of Contact met ons opnemen).

Voeg deze paar regels toe aan het einde van de bestaande code in page.php:

Een eenvoudige WordPress-lus die de titel en inhoud uitvoert. Eenvoudig.

---

Samenvatting

Kom morgen terug wanneer we onze commentaarlay-out gaan maken (en gebruik maken van de nieuwe 'threaded comments'-functies van WordPress 2.7!) (Deel 5 van onze serie.)