Ovanstående kod är exakt samma som vi använde på framsidan. De $ räknare används för att lägga till en klass av sista till varandras föremål (för att hålla objekten inline).
Om en $ förhandsvisning anpassat fält användes, vi visar det - och bearbetar det via TimThumb PHP-skriptet för att ändra storlek på bilden.

Vi har stängt av Loop med EndWhile, mata ut pagineringsknapparna med next_posts_link () och previous_posts_link (), och inkluderade sidfoten.

Spara och förhandsgranska din portföljsida. Det är nu komplett och kräver ingen extra styling eftersom vi återanvändar stilar från hemsidan. Det ska se ungefär som bilden nedan när du har några andra objekt till kategorin Portfölj:

---

Single Portfolio Page

Det här är layouten som används för att visa mer information för varje portföljartikel när den klickas på (på sin enda sida). enligt nedanstående:

Kom ihåg att i del 3 använde vi någon kod i single.php att rikta alla förfrågningar om objekt i kategorin "Portfölj" till enkel portfolio.php fil.
Nedan följer en översikt av varje avsnitt för sidan:

Inuti enkel portfolio.php, börja med följande:

 ID, förhandsvisning, sant); $ 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, 'länk', true); ?>

Rubriken har inkluderats, och en normal WordPress Loop startas. Inuti slingan hämtar vi förhandsvisning, förhandsvisning full, datum, klient och länk anpassade fält för posten. En snabb påminnelse om vad varje anpassningsfält är för (från del 2):

• förhandsvisning (URL på en 930px breddsbild av ditt jobb)
• förhandsvisning full (större version av arbetet, kommer att visas i en lightbox)
• datum (det datum då arbetet slutfördes)
• klient (vem arbetet var för)
• länk (till en levande version av ditt arbete)

Nästa inkluderar vi titeln med titeln(), och om a $ förhandsvisning bild från de anpassade fälten existerar, bilden analyseras genom TimThumb-skriptet för att säkerställa att den är 930px bred och utdata till sidan - inslagen i en länk till $ previewfull bild om den existerar:

 
 
  
 ">  
  
Nedan är bilden metadata för föremålet (innehållande datum, klient och länk fält):
 
 om ($ date || $ client || $ länk) echo '
'; om ($ date) echo "
$ datum
"; om ($ klient) echo"
$ klient
"; om ($ länk) echo"
Besök sida
"; echo"
'; 
 
På första raden kontrollerade vi om minst en av de tre fälten innehåller något - användningen av  ||  betyder "ELLER".
Inuti är varje fält kontrollerat individuellt och utmatas om det innehåller något.
 
Till sist, innehållet() används för att mata ut huvudinnehållet, slingan är stängd och sidfoten ingår:
 
 innehållet(); ?> 
 

Förhandsgranska temat, allt ska se bra ut - förutom förhandsgranskningsbilden, där vi fortfarande behöver infoga ljuset.

Ljuset

FancyBox jQuery Lightbox kommer att användas för att visa en större förhandsvisning av portföljbilden:

Hämta filerna och släpp den /snygg låda/ mapp i / Inc / temmapp.
Skapa också en ny fil i / Inc / som heter animate.js.

Inuti header.php lägg till följande mellan och :

Först, FancyBox CSS-fil (/inc/fancybox/fancy.css) ingår. Det senaste jQuery-biblioteket (v1.3.1) ingår från Google Code, följt av FancyBox javascript-fil och /inc/animate.js fil.

Biblioteket jQuery laddas från Google Code för att minska belastningstiden, eftersom besökaren kanske redan har besökt en webbplats med hjälp av biblioteket som finns på Googles servrar, så filen blir cachad. Det är en liten skillnad, men du kan alltid spara jQuery-biblioteket i din / Inc / mapp och referera det därifrån om du föredrar det.

Slutligen behöver vi helt enkelt berätta för FancyBox vilka länkar den ska söka sig till. Lägg till följande till /inc/animate.js:

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

Om du inte är bekant med jQuery har vi refererat till snygg låda() funktion på några föremål på #fancyopen a (länkar inuti div med ett ID för fancyopen). Vi har också gått igenom ett par alternativ: hideOnContentClick stänger bilden när den klickas på och overlayShow "mörknar" bakgrunden när ljusboxen är aktiv.
För mer FancyBox-parametrar, se avsnittet "Användning" här.

Tips: Vill du lära dig mer om jQuery? Se Jeffreys fantastiska "jQuery for Absolute Beginners" -screenshot-serie på ThemeForest Blog.

Uppdatera din portfölj och försök ljusboxen.

---

Standard sidmall

Vi har skapat vår mall för hem och portfölj, men vi har ännu inte skapat en standardmall som kommer att användas för andra sidor (t.ex. Om eller Kontakta oss).

Lägg till dessa få rader till slutet av den befintliga koden i page.php:

En grundläggande WordPress-loop utmatar titeln och innehållet. Enkel.

---

Sammanfattning

Kolla tillbaka imorgon när vi ska skapa vårt kommentarer layout (och dra nytta av WordPress 2.7: s nya "threaded comments" -funktioner!) (Del 5 i vår serie.)