Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Theme Development

Entwickeln Sie Ihr erstes WordPress-Theme: Tag 2 von 3

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Developing Your First WordPress Theme.
Developing Your First WordPress Theme: Day 1 of 3
Developing Your First WordPress Theme: Day 3 of 3

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Themen sind ein großer Teil dessen, was WordPress so beliebt macht wie es ist, und in dieser dreiteiligen Serie werden wir Sie durch einen schrittweisen Prozess führen, der zu einem vollständigen, funktionierenden WordPress-Thema führt. In Teil zwei beschäftigen wir uns mit der Codierung des Großteils unseres Themas!


Zweiter Teil

Willkommen zum zweiten Teil dieser dreiteiligen Serie über die Entwicklung eines WordPress-Themas von Grund auf neu. Das letzte Mal haben wir uns angesehen, was ein "gutes Thema" ausmacht, sowie die allgemeinen Komponenten, die erforderlich sind, damit ein Thema funktioniert. Diese Woche werden wir direkt eintauchen und unser erstes Thema erstellen.


Unser Thema

Ich möchte betonen, dass Sie, wenn Sie ein eigenes Layout haben, mit dem Sie arbeiten können, es verwenden können. Wahrscheinlich lernen Sie durch Experimentieren mehr und erhalten ein Ergebnis, das auf Ihren Geschmack zugeschnitten ist. Wenn Sie kein Layout haben, mit dem Sie arbeiten können, bieten wir Ihnen ein einfaches persönliches Layout, mit dem Sie arbeiten können.

Dieses Layout habe ich vor einiger Zeit als eines von vielen unbenutzten Designs für einen persönlichen Blog eines Freundes erstellt. In der herunterladbaren Zip-Datei, die diesem Tutorial beiliegt, finden Sie zwei Ordner. bftheme und bffiles. Im Ordner bffiles befindet sich das Layout in seinem Zustand vor WordPress, der andere Ordner enthält das fertige Thema.

Öffnen Sie das Thema in einem Browser, um eine Vorstellung davon zu bekommen, was wir vorhaben. Es sollte ungefähr so aussehen:


Aufbrechen

Es wäre zwar möglich, ein Thema mit nur einer Datei zum Laufen zu bringen, aber es ist eine sehr schlechte Praxis und nichts, was Sie in freier Wildbahn sehen werden. Es ist gut, sich an die Standard-Dateistruktur zu halten, da dies das Ändern von Designs auf der ganzen Linie erleichtert und Sie die integrierten WordPress-Funktionen verwenden können, um Dateien einfach einzuschließen (z. B. get_header ()).

Lassen Sie uns zunächst unseren Arbeitsbereich vorbereiten. Erstellen Sie im Themenverzeichnis Ihrer WordPress-Installation einen neuen Ordner namens blindfaith. Erstellen Sie in diesem Ordner die folgenden Dateien:

  • index.php
  • single.php
  • page.php
  • comments.php
  • functions.php
  • header.php
  • footer.php
  • sidebar.php

Jetzt haben wir unsere Stylesheets und Bilder sowie ein Themenskelett, in das wir sofort einsteigen werden. Zuerst müssen wir unser Thema im WordPress-Dashboard anzeigen lassen. Dazu müssen wir unsere Datei style.css ändern.

WordPress sucht automatisch nach einer Datei namens style.css in einem Themenverzeichnis, um Informationen über das Thema zu extrahieren. Fügen Sie den folgenden Code oben in style.css ein:

Wenn wir jetzt WordPress überprüfen, sollte unser Thema im Teil "Themen ändern" des Dashboards angezeigt werden. Aktivieren Sie unser neues Thema und laden Sie die Startseite von WordPress. Nichts sehen? Gut. Sobald WordPress seine Magie vollbracht hat, um herauszufinden, welche Seite der Benutzer möchte, und die Ergebnisse vorbereitet hat, ruft es index.php aus unserem Themenverzeichnis auf - außer im Moment ist diese Datei leer.

Zunächst müssen wir unseren HTML-Code in seine vier jeweiligen Teile zerlegen. Kopfzeile, Text, Seitenleiste, Fußzeile. Wenn Sie die mit diesem Lernprogramm gelieferte index.html öffnen, sollte Folgendes angezeigt werden:

Wenn wir diesen HTML-Code momentan in einen Browser laden, sehen wir das Grundlayout. Wenn wir uns dieses Layout ansehen, müssen wir zunächst entscheiden, was der Header enthalten soll. Da wir den Titel, das Suchfeld und die Navigation oben auf jeder Seite haben möchten, werden wir dies in unsere Header-Datei einfügen.

Der Hauptinhaltsbereich ist variabel, dh es kann sich um index.php, page.php usw. handeln. Die Seitenleiste enthält den gesamten Inhalt außerhalb des Inhaltsfelds rechts neben dem Layout. Die Fußzeile ist lediglich die Copyright-Meldung. Unser Thema wird wie folgt zusammengestellt:

Kopieren Sie also den Code von index.html vom Doctype bis zur Inhaltsabteilung und fügen Sie ihn in unsere Header-Datei ein. Wir sollten jetzt eine header.php-Datei haben, die so aussieht:

Im Moment überspringen wir den Inhaltsbereich, da dies der größte und komplexeste Teil ist (der aus vielen verschiedenen Dateien besteht), und gehen direkt zur Fußzeile. Normalerweise steht eine Fußzeile in einem Layout an letzter Stelle. Da die Seitenleiste in unserem Code jedoch nach der Fußzeile steht, rufen wir die Seitenleiste einfach nach der Fußzeile auf. Daher sollte footer.php den folgenden Code enthalten;

Sie werden feststellen, dass wir oben unsere erste WordPress-Funktion verwenden. get_sidebar ();. Diese Funktion entspricht in etwa der Anforderung ("sidebar.php"). und da wir immer die Seitenleiste nach der Fußzeile benötigen, ist es sinnvoll, die Seitenleiste am Ende in der Fußzeilendatei aufzurufen.

Schließlich müssen wir die Seitenleiste einfügen. Da die Fußzeile vor der Seitenleiste steht, ist die Seitenleiste die letzte enthaltene Datei und sollte daher auch das Design schließen (durch Schließen der verbleibenden Tags; Wrapper, Body und HTML).

Öffnen Sie zunächst index.php und geben Sie Folgendes ein:

Wenn wir zu unserer Installation von WordPress navigieren, sollten wir so etwas bekommen

Im Moment scheint der Inhalt der Website (oder was wir bisher gemacht haben) geladen zu werden, die Stylesheets jedoch nicht. Dies liegt daran, dass in unserer Header-Datei die Aufrufe der Stylesheets jetzt einen Pfad verwenden, der nicht vorhanden ist. Sie befinden sich jetzt in/wp-content/theme/blindfaith /, aber es gibt eine einfachere Möglichkeit, diese überall dort einzufügen, wo sie benötigt wird - eine dynamischere.


Die Funktion bloginfo()

WordPress verfügt über eine integrierte Funktion namens bloginfo(), mit der Sie alle möglichen nützlichen lokalen Informationen abrufen können, z. Blogname, Beschreibung, Stylesheet-URL, Stylesheet-Verzeichnis und mehr. Weitere Informationen darüber, was wir mit bloginfo erhalten können, finden Sie auf dieser Seite im WordPress-Codex.

Öffnen wir unsere Header-Datei und ändern einige Dinge, um die dynamischen Informationen von WordPress anstelle der statischen Informationen im Thema zu verwenden. Unsere aktuelle Datei header.php sieht bis zum Tag nav-bar-tile so aus:

Lassen Sie uns zunächst die fehlenden Stylesheets beheben. Wir werden zwei Werte aus bloginfo verwenden. stylesheet_directory und stylesheet_url. Der URL-Wert ist ein direkter Link zu style.css, während das Verzeichnis das Verzeichnis listet, in dem sich style.css befindet. Es ist wichtig zu beachten, dass WordPress-Funktionen wie diese keinen abschließenden Schrägstrich an Werte anhängen.

Ersetzen Sie die Stylesheet-Zeilen durch die folgenden;

Unser Thema hat jetzt richtig verknüpfte Stylesheets. Als nächstes ändern wir, während wir uns in der Header-Datei befinden, den Blog-Titel, den Slogan und den Link.

Das <title >-Tag verfügt nicht nur über die bloginfo-Eigenschaft, die den Namen des Blogs darstellt. Sie können auch eine weitere Funktion hinzufügen. wp_title(). Diese Funktion gibt den Titel der Seite oder des Beitrags zurück, der gerade angezeigt wird, vorangestellt mit ». Um das »vor dem Seitennamen auszuschalten, ändern Sie einfach die Klammern von wp_title() in wp_title (“”, true).

Das wird etwas in der Art von produzieren;

Jetzt können wir einfach den Logo-/Titeltext, den Slogan und die URL mithilfe der folgenden Eigenschaften von bloginfo() ändern.

Unsere Seite sollte jetzt ungefähr so aussehen.

Jetzt schauen wir uns die Datei index.php an. Dies ist die Datei, die standardmäßig aufgerufen wird und in der Lage sein sollte, Listen mit Beiträgen für die Startseite, Kategorien, Archive und Suchergebnisse anzuzeigen - oder eine Fehlermeldung, falls keine vorhanden ist. Offensichtlich kann jede dieser verschiedenen Listen eine variable Anzahl von Posts enthalten. Wir können damit arbeiten, indem wir etwas in WordPress verwenden, das als "Die Schleife" bekannt ist.


Die Schleife

WordPress findet heraus, welche Beiträge angezeigt werden sollen, bevor die Indexdatei ausgeführt wird. Schließlich erstellen wir ein Thema, und das Thema kommt als letztes, da es lediglich eine Möglichkeit ist, die Ausgabe anzuzeigen. Mit einigen integrierten Funktionen können wir vermeiden, dass komplexe PHP-Schleifen mit ständigen Überprüfungen auf gültige Daten durchgeführt werden müssen. Dieser Aspekt der Entwicklung von WordPress-Designs erleichtert den Vorgang erheblich und verursacht weniger Kopfschmerzen.

Schauen wir uns zunächst unsere Poststruktur an.

Da wir wissen, wie die Struktur eines Posts aussieht und wir eine Kopie mit Dummy-Informationen haben, können wir die Dummy-Informationen durch einige Funktionen ersetzen, die tatsächliche Post-Werte zurückgeben. Es gibt verschiedene Informationen, die wir mit jedem Beitrag anzeigen können, wie z. B.

  • the_title
  • the_tags
  • the_ID
  • the_category
  • the_date
  • the_content
  • viele weitere (die Sie unter http://codex.wordpress.org/Template_Tags#Post_tags finden)

Wenn eine dieser Funktionen innerhalb der Schleife aufgerufen wird, zeigen sie die richtigen Informationen für den aktuellen Beitrag an, der durchlaufen wird.

Versuchen Sie über den obigen Link (oder nur die vor dem Link bereitgestellten Funktionen), den Dummy-Inhalt selbst durch die richtigen Ersetzungsfunktionen zu ersetzen, bevor Sie fortfahren.

Der richtige Code sollte so aussehen.

Es gibt einige Dinge, die Sie möglicherweise nicht konnten. Schauen wir sie uns an.

Erstens druckt WordPress beim Anzeigen von Kategorien gerne einen Standardstil mithilfe einer Liste. Um dies zu überschreiben, können wir unser eigenes Trennzeichen bereitstellen, das in unserem Fall einfach ein Komma und ein Leerzeichen ist.

Als nächstes können wir zum Anzeigen eines Bearbeitungslinks, gefolgt von der Anzahl der Kommentare in einem Beitrag, eine Funktion verwenden, die den Link erstellt und drei verschiedene Status für ausgibt. Keine Kommentare, Einzelkommentare und Mehrfachkommentare (wobei das Prozentzeichen der Platzhalter für die Anzahl der Kommentare ist).

Schließlich haben wir eine einfache if-Anweisung, um zu entscheiden, welche Art von Inhalt angezeigt werden soll. Wenn wir the_excerpt() verwenden, wird nur ein Auszug des Inhalts angezeigt. Wenn wir the_content() verwenden, wird der gesamte Inhalt angezeigt (oder bis ein <--more--> im Inhalt erscheint). Auf einer Such- oder Archivseite ist es nicht wichtig, den vollständigen Artikel anzuzeigen - gerade genug, um das Wesentliche zu ermitteln -, daher verwenden wir the_excerpt().

Damit dieser Code funktioniert, müssen wir ihn mit Posts versorgen, und dazu müssen wir ihn in die Schleife einfügen. Unsere index.php-Datei sollte derzeit so aussehen.

Fügen Sie diesen Code nach der Header-Funktion ein.

und dieser kurz vor der Fußzeilenfunktion;

Das Laden des WordPress-Blogs sollte jetzt ungefähr so aussehen.

Jetzt zeigt unser Thema eine Liste der WordPress-Beiträge an, je nachdem, wie viele angezeigt werden sollen (geändert unter den allgemeinen Einstellungen im Dashboard). Aber was ist, wenn es mehr Beiträge gibt? Was ist, wenn der Blog 6 Beiträge enthält, aber nur 5 anzeigt? Um dem entgegenzuwirken, müssen wir einfache nächste/vorherige oder neue/alte Links hinzufügen.

Natürlich macht es keinen Sinn, diese Links anzuzeigen, wenn es keine neueren oder älteren Beiträge gibt, zu denen man springen kann, da das irreführend ist. Daher verwenden wir nach der Schleife den folgenden Code.

Der next_posts_link() und der vorherige_posts_link() werden nur angezeigt, wenn sie benötigt werden, wobei der im ersten Parameter angegebene Text verwendet wird. Natürlich ist es möglich, die if-Anweisung zu entfernen und nur die folgenden zwei Zeilen zu verwenden.

Mit der obigen if-Anweisung haben wir jedoch die Möglichkeit, eine Nachricht anzuzeigen, wenn keine Seiten zum Überspringen vorhanden sind, was die Dinge für den Benutzer weniger verwirrend machen kann (was immer gut ist).

Unsere fertige index.php-Datei sollte folgendermaßen aussehen.


Einzelne Beiträge

Wir haben jetzt einen Arbeitsindex, aber jetzt brauchen wir eine Möglichkeit, einzelne Beiträge anzuzeigen. Aufgrund der Einfachheit unseres Designs sind unsere single.php-Datei und index.php nahezu identisch. Der Unterschied besteht darin, dass wir keine einzelnen/vorherigen Links in single.php benötigen, aber Kommentare benötigen. Der Code für single.php lautet wie folgt;

Wie Sie sehen können, hat sich nur am Ende der Datei viel geändert. Wir haben einfach den Code für die Links entfernt und eine neue Funktion namens comment_template () hinzugefügt. Die Parameter für diese Funktion sind einfach die zu ladende Datei (comment.php, wenn leer oder standardmäßig) und ob Kommentare nach Typ sortiert werden sollen (standardmäßig false).

Wie Sie wahrscheinlich erraten haben, ist die Datei, die Kommentare verarbeitet, comment.php - sie wird in einer separaten Datei gespeichert, sodass wir sie sowohl für single.php als auch für page.php verwenden können.


Seite

Die Datei zum Anzeigen einer Seite ist fast identisch mit der einzelnen Beitragsdatei, mit der Ausnahme, dass Informationen zum Zeitpunkt des Beitrags, zum Autor usw. entfernt werden. Das bedeutet, dass die Auslagerungsdatei so aussieht.


Navigation

Der letzte Teil, den wir heute hinzufügen werden, ist die Navigation nach oben (weil es so einfach ist)! Öffnen Sie header.php und ersetzen Sie die Nav-Bar-Tile-Abteilung durch diese;

Die Funktion wp_nav_menu spuckt eine Liste von Seiten aus, akzeptiert jedoch auch Argumente in Form eines Arrays. Die Argumente, die wir der Reihe nach geliefert haben, sind:

  • menu - Das gewünschte Menü
  • menu_class - Die zu verwendende CSS-Klasse
  • menu_id - Die UL-Element-ID
  • container - Gibt an, ob die Liste umbrochen werden soll oder nicht
  • theme_location - Die Position des Menüs innerhalb des Themas (für mehrere Menüs)
  • show_home - Gibt an, ob ein 'Home'-Link angezeigt werden soll

Das von uns verwendete CSS ist so codiert, dass es sich an die Art und Weise anpasst, wie WordPress eine Navigationsliste ausspuckt. Es ist wichtig zu berücksichtigen, wie eine Liste beim Codieren eines Designs von WordPress im Code ausgegeben wird.

Unsere WordPress-Installation sollte jetzt so aussehen.


Nächstes Mal...

Das nächste Mal werden wir eine funktionale Seitenleiste hinzufügen, die Widget-fähig ist, dynamische Beitragstypen, benutzerdefinierte Felder und die letzten Elemente des Themas zusammenfasst!

Wenn Sie sich in diesem Beitrag nicht sicher sind oder nur Fragen haben, können Sie unten einen Kommentar hinterlassen. Für diejenigen, die Fragen haben oder einfach nur mehr wissen möchten, ist der WordPress-Codex eine Goldmine an Informationen für alle Funktionen und so weiter, die WordPress verwendet.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.