Es wird immer häufiger, dass Blogs bestimmte Beiträge oben auf der Seite anzeigen. In diesem Tutorial zeigen wir Ihnen, wie Sie dies in WordPress implementieren können. Wir verwenden das Standarddesign Kubrik als Basisdesign, es sollte jedoch mit einigen Modifikationen an die meisten Designs angepasst werden können. Es gibt sehr wenig Code und das Aufstellen von Beiträgen ist einfach.

Wofür wir suchen

Wir werden das Kubrik-Design, das in WordPress bereits enthalten ist, so anpassen, dass Beiträge oben auf der Seite angezeigt werden können. Dieses Tutorial wurde nur mit WordPress 2.5.x getestet, sollte jedoch auch mit der 2.3.x-Serie funktionieren. Wir gehen davon aus, dass Sie 2.5.x oder höher verwenden. Am Ende des Tutorials haben Sie ungefähr Folgendes:

Schritt 1 - Standardbild erstellen

Bevor wir etwas tun, gehen Sie zum Themes-Ordner Ihrer WordPress-Installation (wp-content / themes /) und sichern Sie den "default" -Ordner. Dies ist das Kubrik-Thema, das wir bearbeiten werden. Die Sicherung ist für den Fall, dass Sie das ursprüngliche, nicht geänderte Design wiederherstellen möchten.

Zuerst erstellen wir ein Standardbild, falls kein gekennzeichnetes Beitragsbild angegeben wird. Lassen Sie es uns für dieses Tutorial süß und einfach halten. Öffnen Sie Ihren bevorzugten Bildeditor und erstellen Sie ein 233x130px-Rechteck mit abgerundeten Ecken mit einem Radius von 10px. Ich habe den Hintergrund mit einem weißen bis grauen Radialverlauf versehen und etwas Text darauf gesetzt. Das ist was ich habe:

Speichern Sie das Bild als "no-featured-image.jpg" im Ordner "images", der sich im Ordner "default" befindet.

Schritt 2 - Fügen Sie den PHP-Code hinzu

Nun zum Code. Öffnen Sie die Datei "header.php" im Ordner "default". Am Ende der Datei sehen Sie einen div-Block und ein hr-Tag wie folgt:

 
 
/ ">
 
 
 
 

Fügen Sie zwischen dem End-Div-Tag und der Stunde folgenden Code ein:

 
 ICH WÜRDE); $ image = $ custom_image [0]? $ custom_image [0]: get_bloginfo ("template_directory"). "/ images / no-featured-image.jpg"; printf ('
', get_permalink ($ post-> ID), $ post-> post_title, $ image, $ post-> post_title); ?> 
 
 

Dieser Code gibt drei Bilder in einer ungeordneten Liste aus. Jedes Bild ist ein Link zu einem vorgestellten Beitrag. Wir werden darüber sprechen, wie der Code konfiguriert wird, nachdem wir das CSS hinzugefügt haben.

Schritt 3 - Style mit CSS

Als Nächstes müssen wir einige CSS-Stile hinzufügen. Öffnen Sie die Datei "style.css" und fügen Sie den folgenden Code am Ende der Datei ein. Alles, was Sie tun, ist, die Listenelemente nach links zu verschieben und sie gleichmäßig zu platzieren.

/ * Featured Post Carousel * / #featured padding: 10px 10px 0 20px;  #carousel list-style: none; Marge: 0; Polsterung: 0;  #carousel li float: left; Polsterung: 0; Rand rechts: 10px; 

Schritt 4 - Den Code verstehen

Schauen wir uns an, was der hinzugefügte Code macht. Im Container div (id = "featured") haben wir eine ungeordnete Liste und PHP-Code, um Listenelemente zu generieren.

$ featured_posts = get_posts ('numberposts = 3 & category =1');

Die erste Zeile, die oben angezeigt wird, ruft die Post-Informationen mit der Funktion get_posts () ab und weist die Post-Daten der Variablen $ featured_posts zu. Die Funktion get_posts () schließt einen einzelnen Parameter in Form einer Abfragezeichenfolge aus, ähnlich wie Sie am Ende einer URL angezeigt werden (ohne das anfängliche Fragezeichen). Der erste Parameter ist "numberposts", den wir für dieses Tutorial auf 3 gesetzt haben. Dieser Parameter legt fest, wie viele Beiträge gezeigt werden. Der zweite Parameter ist "category", den wir auf 1 gesetzt haben. Der Wert des Parameters "category" sollte die ID der Kategorie sein, die Sie für Ihre gekennzeichneten Beiträge verwenden. Sie finden die ID einer Kategorie, indem Sie auf die Kategorieverwaltungsseite gehen und den Mauszeiger über einen Kategorietitel bewegen. In der Statusleiste wird ein Link angezeigt. Die letzte Zahl ist die Kategorie-ID.

Die nächste Zeile ist eine foreach-Schleife, die die mit der Funktion get_posts () abgerufenen Posts durchläuft. Die erste Zeile in der foreach-Schleife ruft die URL des Bildes mit der Funktion get_post_custom_values ​​() ab und speichert die URL in der Variablen $ custom_image. Der erste Parameter gibt den Schlüssel des von uns verwendeten benutzerdefinierten Werts "featured_image" an. Der zweite Parameter gibt an, von welchem ​​Beitrag wir den Wert erhalten.

$ custom_image = get_post_custom_values ​​('featured_image', $ post-> ID);

In der nächsten Zeile überprüfen wir kurz, ob tatsächlich ein Bild angegeben wurde. Wenn kein Bild angegeben wurde, weisen wir der $ image-Variablen die URL des Standardbilds zu. Wenn ein Bild angegeben wurde, verwenden wir dieses.

$ image = $ custom_image [0]? $ custom_image [0]: get_bloginfo ("template_directory"). "/ images / no-featured-image.jpg";

In der letzten Zeile geben wir tatsächlich die Listenelemente aus. Jedes Element ist ein Bild, das mit dem gekennzeichneten Beitrag verknüpft ist.

printf ('
', get_permalink ($ post-> ID), $ post-> post_title, $ image, $ post-> post_title);

Schritt 5 - Erstellen von hervorgehobenen Posts

Das ist es! Wenn Sie nun einen Beitrag veröffentlichen möchten, weisen Sie ihn der gekennzeichneten Kategorie zu und erstellen Sie einen benutzerdefinierten Wert mit dem Schlüssel "featured_image" und einem Wert der Bild-URL. Bilder sollten 233x130px sein.

Sehen Sie es in Aktion

Sie können das Thema in Aktion auf unserem NETTUTS WordPress Demo-Server anzeigen: