Codul de mai sus este exact același lucru pe care l-am folosit pe prima pagină. $ counter este folosit pentru a adăuga o clasă de ultimul la fiecare alt element (pentru a păstra elementele în linie).
În cazul în care un $ previzualizare a fost utilizat un câmp particular, îl afișăm - și îl procesăm prin scriptul TimThumb PHP pentru a redimensiona imaginea.

Am închis Buclele cu endwhile, ieșiți butoanele de paginare cu next_posts_link () și previous_posts_link (), și a inclus subsolul.

Salvați și previzualizați pagina de portofoliu. Acum este completă și nu necesită stil suplimentar deoarece noi reluăm utilizarea stilurilor din pagina de pornire. Ar trebui să arate ceva asemănător imaginii de mai jos, odată ce ați adăugat câteva alte elemente la categoria Portofoliu:

---

Portofoliu unic

Acesta este aspectul utilizat pentru a afișa mai multe detalii pentru fiecare element de portofoliu atunci când se face clic pe acesta (pe pagina sa "unică"); așa cum se arată mai jos:

Amintiți-vă că în Partea 3, am folosit un cod în single.php pentru a direcționa orice solicitare de articole în categoria "Portofoliu" la single-portfolio.php fişier.
Mai jos este o schiță a fiecărei secțiuni pentru pagină:

Interior single-portfolio.php, începeți cu următoarele:

 ID, "previzualizare", adevărat); $ previewfull = get_post_meta ($ post-> ID, 'preview-full', true); $ date = get_post_meta ($ post-> ID, 'data', true); $ client = get_post_meta ($ post-> ID, 'client', true); $ link = get_post_meta ($ post-> ID, 'link', adevărat); ?>

Antetul a fost inclus și este inițiat un loop normal WordPress. În interiorul bucla recuperăm previzualizare, previzualizate completă, Data, client și legătură câmpuri personalizate pentru postare. O reamintire rapidă a ceea ce este pentru fiecare câmp personalizat (din partea 2):

• previzualizare (Adresa URL a unei imagini cu dimensiunea de 930 pixeli a lucrării dvs.)
• previzualizate completă (versiune mai mare a lucrării, se va afișa într-o casetă lightbox)
• Data (data finalizării lucrării)
• client (pentru care a lucrat)
• legătură (la o versiune live a lucrării dvs.)

Apoi vom include titlul folosind titlul(), și dacă a $ previzualizare imaginea din câmpurile personalizate există, imaginea este analizată prin intermediul scriptului TimThumb pentru a se asigura că are o lățime de 930 de pixeli și se transmite pe pagină - înfășurat într-un link către $ previewfull imagine dacă există:

 
 
  
 „>  
  
Sub imaginea este datele meta pentru elementul (conținând Data, client și legătură câmpuri):
 
 dacă ($ date || $ client || $ link) echo '
„; dacă ($ date) echo "
data de $
"; dacă ($ client) echo"
$ client
"; dacă ($ link) echo"
Viziteaza site-ul
"; echo '
„; 
 
Pe prima linie am verificat dacă cel puțin unul dintre cele trei câmpuri conține nimic - utilizarea lui  ||  înseamnă "SAU".
În interiorul său, fiecare câmp este verificat individual și este trimis dacă conține ceva.
 
In cele din urma, continutul() este folosit pentru a scoate conținutul principal, bucla este închisă și subsolul inclus:
 
 continutul(); ?> 
 

Previzualizați tema, totul ar trebui să arate bine - cu excepția imaginii de previzualizare, unde mai trebuie să încorporăm caseta Lightbox.

Cutia Lightbox

FancyBox jQuery Lightbox va fi folosit pentru a afișa o previzualizare mai mare a imaginii portofoliului:

Descărcați fișierele și aliniați-le /cutie atragatoare/ dosar în / Inc / temă.
Creați, de asemenea, un fișier nou în / Inc / numit animate.js.

Interior header.php adăugați următoarele între și :

În primul rând, fișierul CSS al FancyBox (/inc/fancybox/fancy.css) este inclus. Cea mai recentă bibliotecă jQuery (v1.3.1) este inclusă în Google Code, urmată de fișierul javascript al FancyBox și /inc/animate.js fişier.

Biblioteca jQuery este încărcată de la Google Code pentru a reduce timpul de încărcare, deoarece vizitatorul ar fi putut să viziteze deja un site folosind și biblioteca găzduită pe serverele Google, astfel încât fișierul va fi stocat în cache. Este o mică diferență, dar puteți salva oricând biblioteca jQuery în dvs. / Inc / și trimiteți-l acolo, dacă preferați.

În cele din urmă, trebuie pur și simplu să le spunem FancyBox care legături ar trebui să se aplice. Adăugați următoarele la /inc/animate.js:

 ('hideOnContentClick': adevărat, 'overlayShow': true););

Dacă nu sunteți familiarizați cu jQuery, am făcut referire la cutie atragatoare() funcționează pe orice obiecte de la #fancyopen a (link-uri în interiorul div cu un ID de fancyopen). De asemenea, am trecut prin câteva opțiuni: hideOnContentClick închide imaginea când este apăsat, și overlayShow "întunecă" fundalul atunci când caseta lightbox este activă.
Pentru mai mulți parametri FancyBox, consultați secțiunea "Cum se utilizează" aici.

Bacsis: Doriți să aflați mai multe despre jQuery? Vezi versiunea fantezistă a lui Jeffrey "jQuery for Absolute Beginners" pe blogul ThemeForest.

Reîmprospătați portofoliul dvs. și încercați să scoateți caseta de lumină.

---

Șablonul implicit al paginii

Am creat șabloanele de pagină de acasă și de portofoliu, dar nu am creat încă un șablon "implicit" care să fie utilizat pentru alte pagini (de exemplu Despre sau Contactați-ne).

Adăugați aceste câteva linii la sfârșitul codului existent în page.php:

O buclă de bază WordPress care transmite titlul și conținutul. Simplu.

---

rezumat

Verificați-vă mâine când vom crea aspectul comentariilor noastre (și vom profita de noile funcții de comentarii ale "WordPress 2.7") (partea a 5-a din seria noastră).