Der obige Code entspricht genau dem, den wir auf der Startseite verwendet haben. Das $ counter wird verwendet, um eine Klasse von hinzuzufügen zuletzt zu jedem anderen Artikel (um die Artikel inline zu halten).
Wenn eine $ Vorschau custom-field wurde verwendet, wir zeigen es an und verarbeiten es über das TimThumb-PHP-Skript, um die Größe des Bildes zu ändern.

Wir haben die Schleife mit geschlossen Ende, Die Paginierungstasten mit ausgeben next_posts_link () und previous_posts_link (), und enthalten die Fußzeile.

Speichern Sie eine Vorschau Ihrer Portfolio-Seite. Es ist jetzt vollständig und erfordert kein zusätzliches Styling, da wir die Stile von der Homepage erneut verwenden. Es sollte ungefähr so ​​aussehen wie das Bild unten, sobald Sie einige weitere Elemente zur Portfolio-Kategorie hinzugefügt haben:

---

Einzelne Portfolio-Seite

Dies ist das Layout, das verwendet wird, um mehr Details für jedes Portfolioelement anzuzeigen, wenn Sie darauf klicken (auf seiner "einzigen" Seite). Wie nachfolgend dargestellt:

Denken Sie daran, dass wir in Teil 3 etwas Code in verwendet haben single.php alle Anfragen für Artikel der Kategorie "Portfolio" an die single-portfolio.php Datei.
Nachfolgend finden Sie eine Übersicht über jeden Abschnitt der Seite:

Innerhalb single-portfolio.php, Beginnen Sie mit dem Folgenden:

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

Der Header wurde eingefügt und eine normale WordPress-Schleife wird gestartet. Innerhalb der Schleife rufen wir die Vorschau, Vorschau-voll, Datum, Klient und Verknüpfung benutzerdefinierte Felder für die Post. Eine kurze Erinnerung daran, wozu jedes benutzerdefinierte Feld dient (aus Teil 2):

• Vorschau (URL eines 930px breiten Bildes Ihrer Arbeit)
• Vorschau-voll (größere Version der Arbeit, wird in einer Lightbox angezeigt)
• Datum (das Datum, an dem die Arbeit abgeschlossen wurde)
• Klient (für wen die Arbeit war)
• Verknüpfung (zu einer Live-Version Ihrer Arbeit)

Als nächstes fügen wir den Titel mit ein der Titel(), und wenn a $ Vorschau Ist ein Bild aus den benutzerdefinierten Feldern vorhanden, wird das Bild mit dem TimThumb-Skript analysiert, um sicherzustellen, dass es eine Breite von 930px hat und auf der Seite ausgegeben wird - in einen Link zum eingebettet $ previewfull Bild, falls vorhanden:

 
 
  
 ">  
  
Unter dem Bild befinden sich die Metadaten für das Element (das enthält Datum, Klient und Verknüpfung Felder):
 
 if ($ date || $ client || $ link) echo '
'; if ($ date) echo "
$ date
"; if ($ client) echo"
$ client
"; if ($ link) echo"
Besucherseite
"; Echo '
'; 
 
In der ersten Zeile haben wir geprüft, ob mindestens eines der drei Felder etwas enthält - die Verwendung von  ||  bedeutet "ODER".
Darin wird jedes Feld einzeln geprüft und ausgegeben, wenn es etwas enthält.
 
Endlich, der Inhalt() wird zur Ausgabe des Hauptinhalts verwendet, die Schleife wird geschlossen und die Fußzeile eingeschlossen:
 
 der Inhalt(); ?> 
 

Vorschau des Themas sollte alles gut aussehen - außer dem Vorschaubild, in dem die Lightbox noch integriert werden muss.

Die Lightbox

Die FancyBox jQuery-Lightbox wird verwendet, um eine größere Vorschau des Portfolio-Bildes anzuzeigen:

Laden Sie die Dateien herunter und legen Sie die Datei ab / fancybox / Ordner in die / inc / Themenordner.
Erstellen Sie auch eine neue Datei in / inc / genannt animate.js.

Innerhalb header.php füge folgendes zwischen hinzu und :

Zunächst die CSS-Datei von FancyBox (/inc/fancybox/fancy.css) ist enthalten. Die neueste jQuery-Bibliothek (v1.3.1) ist in Google Code enthalten, gefolgt von der Javascript-Datei von FancyBox und der /inc/animate.js Datei.

Die jQuery-Bibliothek wird aus Google Code geladen, um Ladezeiten zu verkürzen, da der Besucher möglicherweise bereits eine Website besucht hat, die auch die auf den Servern von Google gehostete Bibliothek verwendet, und die Datei daher zwischengespeichert wird. Es ist ein kleiner Unterschied, aber Sie können die jQuery-Bibliothek immer in Ihrem speichern / inc / Ordner und verweisen Sie von dort aus, wenn Sie möchten.

Zum Schluss müssen wir lediglich der FancyBox mitteilen, auf welche Links sie sich beziehen soll. Fügen Sie Folgendes zu hinzu /inc/animate.js:

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

Wenn Sie mit jQuery nicht vertraut sind, haben wir auf die Fancybox () Funktion auf beliebige Objekte bei #fancyopen a (Links in Divs mit einer ID von Fancyopen). Wir haben auch einige Optionen durchlaufen: hideOnContentClick schließt das Bild, wenn darauf geklickt wird, und overlayShow 'dunkelt' den Hintergrund aus, wenn die Lightbox aktiv ist.
Weitere FancyBox-Parameter finden Sie hier im Abschnitt "Verwendung".

Spitze: Möchten Sie mehr über jQuery erfahren? Sehen Sie sich Jeffreys fantastische "jQuery for Absolute Beginners" Screencast-Serie im ThemeForest Blog an.

Aktualisieren Sie Ihr Portfolio und probieren Sie die Lightbox aus.

---

Standardseitenvorlage

Wir haben unsere Seitenvorlagen für Zuhause und das Portfolio erstellt, aber noch keine Standardvorlage erstellt, die für andere Seiten verwendet wird (z. B. "Über" oder "Kontakt")..

Fügen Sie diese wenigen Zeilen am Ende des vorhandenen Codes in ein page.php:

Eine grundlegende WordPress-Schleife zur Ausgabe von Titel und Inhalt. Einfach.

---

Zusammenfassung

Schauen Sie sich morgen wieder um, wenn wir unser Layout für Kommentare erstellen (und die neuen 'Threaded-Kommentare'-Funktionen von WordPress 2.7 nutzen!) (Teil 5 unserer Serie).