Il codice sopra è esattamente lo stesso che abbiamo usato in prima pagina. Il $ contatore è usato per aggiungere una classe di scorso a ogni altro oggetto (per mantenere gli elementi in linea).
Se una $ anteprima è stato usato il campo personalizzato, lo mostriamo e lo elaboriamo attraverso lo script PHP TimThumb per ridimensionare l'immagine.

Abbiamo chiuso il ciclo con ENDWHILE, visualizza i pulsanti di impaginazione con next_posts_link () e previous_posts_link (), e incluso il piè di pagina.

Salvare e visualizzare in anteprima la pagina del portfolio. Ora è completo e non richiede uno stile aggiuntivo poiché stiamo riutilizzando gli stili dalla homepage. Dovrebbe sembrare qualcosa di simile all'immagine qui sotto, dopo aver aggiunto alcuni altri elementi alla categoria Portfolio:

---

Pagina del portafoglio singolo

Questo è il layout utilizzato per visualizzare più dettagli per ciascun elemento del portfolio quando viene cliccato (sulla sua pagina 'singola'); come mostrato di seguito:

Ricorda che nella Parte 3 abbiamo usato del codice single.php indirizzare eventuali richieste di articoli nella categoria 'Portafoglio' al single-portfolio.php file.
Di seguito è riportato uno schema di ogni sezione per la pagina:

Dentro single-portfolio.php, inizia con il seguente:

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

L'intestazione è stata inclusa e viene avviato un normale ciclo WordPress. All'interno del ciclo recuperiamo il anteprima, Anteprima-pieno, Data, cliente e collegamento campi personalizzati per il post. Un rapido promemoria di ciò che ciascun campo personalizzato è (dalla Parte 2):

• anteprima (URL di un'immagine di larghezza 930px del tuo lavoro)
• Anteprima-pieno (versione più grande del lavoro, verrà visualizzata in una lightbox)
• Data (la data in cui il lavoro è stato completato)
• cliente (per chi era il lavoro)
• collegamento (a una versione live del tuo lavoro)

Successivamente includiamo il titolo usando il titolo(), e se a $ anteprima l'immagine dai campi personalizzati esiste, l'immagine viene analizzata tramite lo script TimThumb per garantire che sia di 930px in larghezza e in uscita alla pagina - racchiusa in un collegamento al $ previewfull immagine se esiste:

 
 
  
 ">  
  
Sotto l'immagine ci sono i metadati per l'oggetto (contenente il Data, cliente e collegamento campi):
 
 se ($ date || $ client || $ link) echo '
'; se ($ date) echo "
$ date
"; if ($ client) echo"
$ cliente
"; if ($ link) echo"
Visita il sito
";  eco '
'; 
 
Sulla prima riga abbiamo controllato se almeno uno dei tre campi contiene qualcosa - l'uso di  ||  significa "OR".
Al suo interno, ogni campo viene controllato singolarmente e emesso se contiene qualcosa.
 
Finalmente, il contenuto() viene utilizzato per generare il contenuto principale, il ciclo è chiuso e il piè di pagina incluso:
 
 il contenuto(); ?> 
 

Visualizza l'anteprima del tema, tutto dovrebbe apparire perfetto, tranne l'immagine di anteprima, in cui dobbiamo ancora incorporare il lightbox.

Il Lightbox

Il fancyBox jQuery Lightbox verrà utilizzato per visualizzare un'anteprima più ampia dell'immagine del portfolio:

Scarica i file e rilascia il / Fancybox / cartella nel / Inc / cartella dei temi.
Crea anche un nuovo file in / Inc / di nome animate.js.

Dentro header.php aggiungere il seguente tra e :

Innanzitutto, il file CSS di FancyBox (/inc/fancybox/fancy.css) è incluso. L'ultima libreria jQuery (v1.3.1) è inclusa da Google Code, seguita dal file javascript di FancyBox e dal /inc/animate.js file.

La libreria jQuery viene caricata da Google Code per ridurre i tempi di caricamento, poiché il visitatore potrebbe aver già visitato un sito utilizzando anche la libreria ospitata sui server di Google, pertanto il file verrà memorizzato nella cache. È una piccola differenza, ma puoi sempre salvare la libreria jQuery nella tua / Inc / cartella e fare riferimento da lì se preferisci.

Infine, abbiamo semplicemente bisogno di dire a FancyBox quali link dovrebbero applicarsi a. Aggiungi il seguente a /inc/animate.js:

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

Se non hai familiarità con jQuery, abbiamo fatto riferimento a fancybox () funzione su qualsiasi oggetto in #fancyopen a (link all'interno di div con un ID di fancyopen). Abbiamo anche passato un paio di opzioni: hideOnContentClick chiude l'immagine quando viene cliccato e overlayShow 'scurisce' lo sfondo quando la lightbox è attiva.
Per ulteriori parametri di FancyBox, consultare la sezione "Come usare" qui.

Mancia: Vuoi saperne di più su jQuery? Guarda la fantastica serie di screencast "jQuery for Absolute Beginners" di Jeffrey sul Blog di ThemeForest.

Aggiorna il tuo portfolio e prova la lightbox.

---

Modello di pagina predefinito

Abbiamo creato i nostri modelli di pagina casa e portfolio, ma non abbiamo ancora creato un modello 'predefinito' che verrà utilizzato per altre pagine (ad esempio Informazioni o Contattaci).

Aggiungi queste poche righe alla fine del codice esistente in page.php:

Un ciclo WordPress di base che genera titolo e contenuto. Semplice.

---

Sommario

Torna a trovarci domani quando creeremo il layout dei commenti (e sfrutteremo le nuove funzioni 'commenti ai thread' di WordPress 2.7!) (Parte 5 della nostra serie.)