Das erste WordPress-Theme entwickeln Tag 3 von 3

Themes sind ein großer Teil dessen, was WordPress so beliebt macht, wie es ist. In dieser dreiteiligen Serie werden wir Sie Schritt für Schritt durch den Prozess führen, der zu einem vollständig funktionierenden WordPress-Theme führt. In Teil drei werden wir das Kommentarsystem implementieren, Sidebar-Widgets hinzufügen und alles zusammenfassen!

Auf der Suche nach einemkostenloses WordPress-Themeum schnell anzufangen? Wir haben einige tolle für Sie zur Auswahl!


Teil drei

Willkommen zum abschließenden Teil dieser dreiteiligen Serie zur Entwicklung eines WordPress-Themes von Grund auf. Letztes Mal haben wir die Grundstruktur eines Themas erstellt. In dieser Woche fügen wir die fehlenden Teile hinzu und beenden unser erstes Thema.

  • Das erste WordPress-Theme entwickeln: Tag 1 von 3
  • Das erste WordPress-Theme entwickeln: Tag 2 von 3
  • Das erste WordPress-Theme entwickeln: Tag 3 von 3

Unser Thema bisher

Letztes Mal haben wir unser Standard-HTML / CSS-Design in ein funktionierendes WordPress-Design umgewandelt, das im Dashboard ausgewählt werden kann. Das Thema hat eine Frontseite, kann einzelne Beiträge / Seiten und die Navigation anzeigen. Das erste, was wir uns ansehen werden, ist die Seitenleiste und wie Widgets in sie integriert werden.


Sidebar-Widgets

Bevor wir beginnen, erstellen wir ein einfaches Text-Widget in WordPress, damit wir leicht sehen können, wann die Widgets funktionieren. Dazu wechseln wir zu Widgets unter der Dropdown-Liste Aussehen im Dashboard.

Wie Sie sehen, hat WordPress festgestellt, dass in unserem Design keine Bereiche für die Anzeige von Widgets eingerichtet sind. Damit WordPress die Verwendung von Widgets zulässt, müssen wir einige Bereiche in unserem Design registrieren, in denen Widgets angezeigt werden können. Die zwei häufigsten sind die Seitenleiste oder die Fußzeile.

Natürlich sind Widgets nicht auf diese beiden Standorte beschränkt, sie können überall hingehen - sie können sogar aufgelöst werden. Es ist üblich, einen Ort mit dem Namen "Sidebar Top" und einen weiteren als "Sidebar Bottom" zu erstellen. Zwischen diesen beiden Standorten können Websites Anzeigen anzeigen oder haben andere Gestaltungsmöglichkeiten im Design. Natürlich können Anzeigen auch Widgets sein, aber einige Designs haben unterschiedliche Möglichkeiten, mit Dingen umzugehen.

In unserem Thema haben wir einfach einen Bereich - die Sidebar. Dazu müssen wir unsere derzeit leere Datei "functions.php" öffnen. Fügen Sie in dieser Datei den folgenden Code ein.

 'sidebar', 'before_widget' => '
',' after_widget '=>'
',' before_title '=>'',' after_title '=>'
',)); ?>

Wenn wir nun zum Dashboard zurückkehren und zu Widgets unter Appearance wechseln, sollte die Seite ein bisschen mehr aussehen (obwohl wir das Text-Widget ohne das Widget jetzt hinzufügen werden).

WordPress weiß jetzt, dass unsere Seitenleiste vorhanden ist, und wir können Widgets aus dem Bereich "Verfügbare Widgets" in unsere Seitenleiste ziehen. Ziehen Sie zunächst über ein einfaches Text-Widget. Setzen Sie den Titel auf "Unser erstes Widget". und den Text zu allem, was Sie möchten. Stellen Sie sicher, dass Sie die Automatisierung von Absätzen aktivieren.

Wenn dies erledigt ist, müssen wir nun unserem Theme etwas Code hinzufügen, um wissen zu lassen, wo sich diese spezielle Widgetposition befindet. Öffnen Sie daher sidebar.php. Da der Inhalt der Seitenleiste jetzt automatisch generiert wird, können Sie den Code in dieser Datei durch Folgendes ersetzen:

 

Wenn dieser Code vorhanden ist, sollten wir beim Besuch der Startseite unseres Themas Folgendes tun (wenn Ihre Absätze nicht formatiert sind, vergewissern Sie sich, dass Sie die Option für automatische Absätze unter dem Fenster zum Bearbeiten des Text-Widgets aktiviert haben).

Toll, wir haben jetzt eine funktionierende Widget-Sidebar! Es ist leicht, diese Funktion an anderer Stelle mit demselben Konzept zu wiederholen. Benennen Sie den Widget-Ready-Bereich, legen Sie die Styling-Optionen in functions.php fest und fügen Sie ihn in den Widget-Anzeigecode ein.


Bemerkungen

Der letzte Fluss, den wir durchqueren müssen, bevor unser Thema fertiggestellt ist, ist ein Kommentar. Kommentare können einen Blog schreiben oder brechen, es ist zwingend notwendig, dass Kommentare in unserem Thema implementiert werden und der Standardbenutzeroberfläche entsprechen, an die wir so gewöhnt sind.

Kommentare funktionieren ähnlich wie das Anzeigen von Beiträgen usw. - mithilfe einer Schleife. Die Schleife durchläuft jeden Kommentar für eine bestimmte Seite, einen Beitrag (oder eine ID) und ermöglicht es uns, ihn nach Belieben auszugeben. Kommentare werden größtenteils über das Dashboard konfiguriert. Dies bedeutet, dass die Entwickler weniger Entscheidungen treffen müssen und die Nutzer mehr haben - ein Ziel, von dem wir denken, dass wir uns bei der Themenentwicklung anstreben sollten.

Zur schnellen Wiederholung haben wir letzte Woche, als wir unsere einzelnen Post- und Seitendateien implementiert haben, die folgende Zeile nach dem Inhalt hinzugefügt.

Diese Funktion lädt die Kommentardatei. Der erste Parameter, den wir leer gelassen haben, ist der Name der Datei. Wenn das Feld leer gelassen wird, lädt die Funktion standardmäßig die Datei comments.php, die wir verwenden. Der zweite Parameter gibt an, ob wir die Kommentare nach Typ trennen möchten, was wir tun.

Wir möchten hier drei Dinge tun.

  • Einen Titel mit der Anzahl der Kommentare anzeigen (falls vorhanden).
  • Blättern Sie durch und zeigen Sie alle Kommentare an.
  • Falls zulässig, ein Formular anzeigen, um einen Kommentar hinzuzufügen.

Der Titel

Also vor allem der Titel. So wie wir die Anzahl der Kommentare in index.php angezeigt haben, möchten wir einen dynamischen Titel haben, der sich entsprechend der Anzahl der Kommentare ändert. Für keine Kommentare, die wir einfach anzeigen, gibt es keine Kommentare (oder wir könnten eine "Sei der Erste" -Meldung hinzufügen). Bei einem Kommentar oder mehr wird der Zähler angezeigt (das Ende wird entfernt, wenn nur ein Kommentar vorhanden ist).

 

// Kommentarschleife geht hier

Keine Kommentare

Um es aufzubrechen, verwenden wir die Funktion have_comments (), um zu überprüfen, ob Kommentare angezeigt werden. Wenn ja, zeigen wir an, wie viele Zahlen Sie mit einer einfachen PHP-Zahlenformatierung verwenden. Wenn dies nicht der Fall ist, zeigen wir einfach einen Titel an, der dies besagt, und wir werden nicht versuchen, die Kommentarschleife auszuführen, da wir wissen, dass keine Kommentare vorhanden sind.

Wenn wir jetzt einen Beitrag mit einem Kommentar besuchen, sollte es so aussehen.

Die Kommentarschleife

Unsere Kommentarschleife sieht so aus;

 
"> comment_author_email, $ size = '40'); ?>
"> auf

Kommentar_Inhalt; ?>

Fügen Sie den obigen Code in die Datei comments.php ein und ersetzen Sie die zuvor kommentierte Zeile. Ein großer Teil des Codes besteht lediglich aus Design-Markup. Lassen Sie uns es also zusammenfassen, so sieht der Code ohne HTML aus.

  comment_author_email, $ size = '40'); ?>  Kommentar_Inhalt; ?> 

Wie bei den meisten Dingen in WordPress machen die einfachen Benennungskonventionen die Dinge selbsterklärend. Zunächst bauen wir die Kommentarschleife mit einer einfachen foreach-Anweisung auf. Von da an verwenden wir eine Reihe eingebauter Methoden und Funktionen, um jede Information anzuzeigen.

Die Funktion comment_ID () gibt die eindeutige Identifikationsnummer für den Kommentar zurück. Wenn wir unseren HTML-Code eingerichtet haben, fügen wir diese ID in einen Anker (# comment- [id]) ein, sodass Sie springen und zu bestimmten Kommentaren verlinken können.

Als nächstes verwenden wir get_avatar (). Dies ist eine relativ neue Funktion (seit WordPress 2.5.0 implementiert), die den sehr beliebten Gravatar-Dienst nutzt. Die zwei Parameter, die wir übergeben müssen, sind die E-Mail-Adresse des Benutzers, um zu bestimmen, welcher Gravatar abgerufen werden soll, und die Größe. Wir übergeben 40, was bedeutet, dass das zurückgegebene Bild 40 x 40 Pixel ist.

Als nächstes verwenden wir zwei Informationen über den Autor, die URL des Autors (dies kann auf der persönlichen Website des Autors oder auf ein im Dashboard anpassbares Profil) und den Namen des Autors erfolgen. Diese beiden Informationen werden von comment_author_url () bzw. comment_author () bereitgestellt. Als Nächstes verwenden wir comment_date (), das einen Parameter zur Anpassung der Anzeige des Datums benötigt. Andernfalls wird das im Dashboard festgelegte Standard-Datumsformat verwendet.

Schließlich wird der Kommentarinhalt selbst mit $ comment-> comment_content angezeigt..

Die Form

Jetzt, da wir einen Titel haben und die Kommentare angezeigt werden, müssen wir nur noch den Benutzern erlauben, eigene Kommentare hinzuzufügen. Dies ist meistens nur ein Styling, solange WordPress die korrekten Informationen im $ _POST-Format bereitstellt und sich um die Validierung und so weiter kümmert. Der Code für unser Formular lautet wie folgt:

 

Kommentarfunktion ist geschlossen.

Hinterlasse einen Kommentar





Wir verwenden eine einfache if-Anweisung, um zu überprüfen, ob für diese bestimmte Seite oder diesen Beitrag Kommentare zulässig sind. Wenn nicht, wird eine Meldung mit der entsprechenden Angabe angezeigt.

Kommentare müssen mit der POST-Methode an die Datei wp-comments-post.php übermittelt werden. Die Werte, die eingegeben werden müssen, um einen erfolgreichen Kommentar abzugeben, sind:

  • comment_post_ID - die ID des Beitrags / der Seite
  • Autor - der Name des Autors
  • Email - die E-Mail des Autors
  • Kommentar - der Kommentar Inhalt

Natürlich wird auch URL akzeptiert, ist aber optional. Wenn ein Benutzer das Feld leer lässt, gibt WordPress keinen Fehler aus. Es empfiehlt sich, den Benutzer darüber zu informieren, dass die URL optional ist.

Das Ergebnis

Wenn wir nun einen Beitrag mit einem Kommentar besuchen (mit aktivierten Kommentaren), werden wir dies sehen.

Toll, wir haben jetzt ein Arbeitsthema mit einem funktionierenden Kommentarsystem! Es gibt viele weitere Optionen, die Sie mit Kommentaren erkunden können, z. B. das Hinzufügen einer Schaltfläche zum Bearbeiten / Löschen für den Administrator oder verschachtelte Kommentare. Obwohl über den Umfang dieser Serie hinaus, sind Funktionen wie diese definitiv einen Blick wert und erhöhen den Wert eines Themas erheblich.


Die WordPress-Fußzeile

Eine letzte Änderung, um unser Thema zu vervollständigen, muss in sidebar.php ausgeführt werden, da hier das Thema geschlossen wird. Vor dem finalen body-Tag müssen wir die wp_footer () -Methode wie folgt hinzufügen.

 

Dies ist ein WordPress-Hook, mit dem Plugins alle erforderlichen Elemente ausgeben können, bevor das Design geschlossen wird. Ein Beispiel dafür ist das Google Analytics-Plugin, das sein Javascript am Ende des HTML-Codes hinzufügen muss.


Job erledigt!

Diese Serie war eine Einführung in die Themenentwicklung und zeigt Ihnen, wie ein Thema zusammenpasst und welche Ressourcen benötigt werden. Hoffentlich haben Sie etwas zum Mitnehmen gefunden, auch wenn Sie zuvor an Themen gearbeitet haben.

Obwohl es nicht schwierig ist, können WordPress-Themes von einem einfachen persönlichen Layout, das wir hier erstellt haben, bis hin zu komplexen Magazinthemen mit mehreren benutzerdefinierten Plug-Ins und Optionsseiten reichen.

Vielen Dank für das Lesen und alle Fragen / Kommentare oder Anfragen für ähnliche Tutorials können in den Kommentaren unten gelassen werden!