Anatomie eines WordPress-Themes

Veröffentlicht: 2015-06-04

Dies ist ein Kapitel aus „Up and Running: A Practical Guide to WordPress Development“, einem Multimedia-Leitfaden zur WordPress-Entwicklung, der am 16. Juni erscheint. und Code-Walkthrough-Interviews mit 13 der weltbesten WordPress-Entwickler. Jetzt auf upandrunningwp.com für 20 % Rabatt vorbestellen!

Die zentralen Thesen:

  • Ein WordPress-Theme besteht aus einer Reihe konsistenter Teile. Zu den entscheidenden Teilen eines Nicht-Child-Themes gehören style.css , functions.php und verschiedene Arten von PHP-Vorlagendateien (wie etwa header.php , footer.php und index.php ).
  • Als Hauptquelle für das CSS-Styling des Themes bestimmt style.css das visuelle Erscheinungsbild des Themes. Ein Kommentarbereich oben in style.css ist auch dort, wo der Name des Themas, der Autor usw. registriert sind.
  • functions.php ist der Ort, an dem Sie Präsentationsfunktionen zu Ihrem Design hinzufügen. Über functions.php fügen Sie CSS-Stylesheets, JavaScript-Dateien, Navigationsmenüs, Widget-Bereiche und andere Funktionen hinzu.
  • Template-Dateien können informell unterteilt werden in: „immer verwendete“ Template-Dateien ( header.php und footer.php und, falls zutreffend, sidebar.php ); Dateien in der WordPress-Template-Hierarchie (wie index.php , single.php und page.php ); und „Vorlagenteile“ (unvollständige Snippets, die aus anderen Vorlagendateien gezogen wurden, um Wiederholungen zu reduzieren).
  • Themen können beliebig groß und komplex sein; aber das sind die Stücke, die dort am wichtigsten und vorhersehbarsten sind.

Dieses kurze Kapitel dreht sich um ein großes Diagramm. Warum warten? Hier ist es:

Anatomie eines WordPress-Themes

Keine Panik! Sie werden das bald genug verstehen. Im Rest dieses Kapitels erklären wir jeden Teil des Diagramms ausführlicher.

Was ist in einem Namen?

WordPress entscheidet anhand ihres Namens, wie Theme-Dateien behandelt werden.

Als erstes fällt auf, dass jede Datei im Diagramm einen besonderen Namen hat. functions.php , style.css , index.php – keine dieser Dateien wurde versehentlich benannt, und keiner ihrer Namen ist willkürlich.

WordPress entscheidet anhand ihres Namens, wie Theme-Dateien behandelt werden. Es hat eine spezielle Behandlung für functions.php , aber überhaupt keine für functionz.php . Wenn Sie also eine Reihe von Anweisungen als functions.php hochladen, interpretiert WordPress sie; aber wenn Sie dieselben Anweisungen wie functionz.php hochladen, wird WordPress diese Datei und ihre Anweisungen standardmäßig einfach vollständig ignorieren.

style.css

style.css ist die Hauptquelle für das visuelle Erscheinungsbild des Themes.

style.css ist die Hauptquelle des Themes für CSS-Stylings. Als solches ist es die Hauptquelle für das visuelle Erscheinungsbild des Themas – alles von der Wahl der Schriftarten und Farben bis hin zu der Frage, ob das Thema auf einem responsiven Raster funktioniert.

Wenn Sie also beispielsweise das folgende CSS in die style.css Ihres Themes eingeben:

p {
color: blue;
}

… dann wird alles, was sich in einem Absatz befindet, irgendwo auf Ihrer Website , während Ihr Design ausgeführt wird, blau. Wirklich cool, oder?

style.css ist der Ort, an dem Sie den Großteil Ihrer Arbeit erledigen, damit Ihre Designs so aussehen, wie Sie es möchten.

Diese Art der visuellen Kontrolle bedeutet, dass in style.css viel zu tun ist – dort werden Sie den Großteil Ihrer Arbeit erledigen, damit Ihre Designs so aussehen, wie Sie es möchten.

style.css ist auch, wie Sie Ihr Design registrieren

style.css auch einen Kommentarabschnitt in seiner Kopfzeile, in dem Designdaten – Name des Designs, Autor, übergeordnetes Design, falls vorhanden, usw. – registriert werden. Das sieht wie folgt aus:

/*
Theme Name: Pretend Theme
Author: WPShout
Author URI: http://wpshout.com/
Version: 0.1
Description: A very pretend theme for WordPress learners
[Other comment-block information goes here, too]
*/

WordPress liest diese Kommentare, um Informationen zu Ihrem Thema zu erhalten. Der kleine Kommentarblock oben – und nichts Ausgefalleneres oder Technischeres – bewirkt also, dass Ihr Design in der Liste der Designs Ihrer Website unter Aussehen > Designs im WordPress-Adminbereich erscheint:

ThemaAnatomie1

Sie können ein Beispiel für die echten Registrierungsdaten eines Themas in den Zeilen 1 bis 6 von style.css in dieser großen Grafik Anatomie eines WordPress-Themas sehen.

Funktionen.php

functions.php ist der Ort, an dem Sie Ihrem Design benutzerdefinierte Funktionen hinzufügen. Dies könnte eine Menge sein, einschließlich:

  • Hinzufügen von CSS-Stylesheets (einschließlich style.css selbst) und JavaScript-Dateien
  • Registrieren von Navigationsmenübereichen und Widgetbereichen
  • Definieren Sie, welche benutzerdefinierten Bildgrößen auf Ihrer Website verfügbar sein sollen
  • Filtern Ihres Seiteninhalts

functions.php „spricht“ mit dem Rest von WordPress hauptsächlich über WordPress-Hooks (auch Aktions- und Filter-Hooks genannt), die es ermöglichen, Funktionalität an genau den richtigen Stellen hinzuzufügen. Wir gehen tiefer in die Funktionsweise von functions.php in Core Concepts of WordPress Themes: 3. Adding Functionality with functions.php ein, und wir gehen viel mehr auf Hooks in WordPress Hooks (Actions and Filters): What They Do and How They Work ein.

PHP-Template-Dateien

Die Vorlagendateien einer WordPress-Site bestimmen das Markup der Site. Ohne sie gibt es buchstäblich nichts auf der Seite.

Der größte Teil der Dateien eines Themas sind seine PHP-Vorlagendateien. Wenn functions.php das Gehirn eines Themas ist und style.css seine Kleidung und Vorlagendateien sein eigentlicher Körper sind.

Vorlagendateien sind ,code>.php-Dateien, die eine Mischung aus HTML-Markup und PHP-Code enthalten. (Überprüfen Sie diese Grafik und Sie werden sehen, wie sie aussehen.)

Vorlagendateien erstellen Markup auf zwei Arten

Zusammen bestimmen diese Dateien das Markup der Website: das eigentliche HTML, das der Browser anzeigt, wenn er Ihre Website besucht. Das tun sie auf zwei Arten.

1. HTML

Erstens drucken Vorlagendateien HTML direkt an den Browser, genau wie eine normale .html -Datei. Alles, was nicht in <!--?php?--> ist, ist kein PHP: Es ist einfach nur HTML, das direkt auf die Seite kommt. Wenn also die header.php eines Themes ein bisschen HTML wie das folgende enthält: 

<body class="site-body">

Genau das wird ein Browser auf jeder WordPress-Webseite sehen, die header.php enthält, was alle sein sollten.

2. PHP

Vorlagendateien entfalten ihre wahre Wirkung mit PHP, das zu HTML kompiliert oder in HTML umgewandelt wird. Als einfaches Beispiel könnte unsere gleiche header.php -Datei stattdessen den folgenden Code enthalten: 

<body class="<?php echo 'site-body'; ?>">

Das hinzugefügte PHP wiederholt (druckt) einfach den String site-body direkt auf die Seite. Der Server hat also auf seiner Seite eine zusätzliche PHP-Verarbeitung durchgeführt, aber der Browser sieht immer noch denselben alten HTML-Code.

Wie Sie sich vorstellen können, sind die Vorlagendateien eines Themas absolut entscheidend: Ohne sie gibt es buchstäblich nichts auf der Seite.

„Immer verwendete“ Vorlagendateien

header.php und footer.php werden normalerweise überall in einem Design verwendet, da die meisten Websites eine konsistente Kopf- und Fußzeile auf verschiedenen Seiten wünschen.

Einige Vorlagendateien werden auf jeder Webseite einer Website verwendet. Die wichtigsten Beispiele sind header.php und footer.php .

Diese Dateien werden so oft verwendet, dass WordPress spezielle Funktionen hat, um sie in andere Vorlagendateien einzubinden: get_header() und get_footer() . Auf diese Weise aufgerufen, ohne Parameter, greifen diese Funktionen einfach header.php und footer.php und legen sie dort ab, wo die Funktion aufgerufen wurde.

Warum werden diese Dateien überall verwendet? Dies liegt daran, dass die meisten Websites eine konsistente Kopf- und Fußzeile auf verschiedenen Seiten wünschen. Wenn eine Seite das Logo Ihres Unternehmens und das primäre Navigationsmenü enthält, ist es eine gute Wette, dass Sie möchten, dass andere Seiten dasselbe tun. Das Gleiche gilt für Ihre Fußzeile am Ende der Seite.

Als Anmerkung, sidebar.php ist auch eine Art von Datei, da es oft der Fall ist, dass die meisten Arten von Webseiten auf einer Website eine einzige Seitenleiste teilen – vielleicht mit Ausnahme von Seiten in voller Breite, die der Anzeige des Seitentyps gewidmet sind Beiträge. sidebar.php hat auch eine eigene Funktion, get_sidebar() .

Dateien in der WordPress-Vorlagenhierarchie

Die eigentliche Aufregung findet in Dateien wie index.php , single.php und page.php . Diese Dateien bestimmen, welches Markup für verschiedene Arten von Post-Daten angezeigt wird.

Um es anders auszudrücken: WordPress weiß, welche Seite für welche Art von Post-Daten verwendet werden soll. Zum Beispiel:

  • Wenn die angeforderte Webseite einen Beitrag vom Typ Seite enthält (z. B. Ihre About-Seite), verwendet WordPress wahrscheinlich page.php , um diese Webseite zu erstellen.
  • Wenn es sich bei der angeforderten Webseite um einen einzelnen Beitrag vom Typ Post handelt (z. B. wenn Sie einen bestimmten Blog-Beitrag anzeigen), verwendet WordPress wahrscheinlich single.php , um ihn zu erstellen.
  • Wenn Sie sich alle Beiträge vom Typ Post ansehen, die Sie 2014 geschrieben haben, wird WordPress wahrscheinlich archive.php verwenden, um diese Webseite zu erstellen.

Das ist die Magie der WordPress-Template-Hierarchie , die wir ausführlich in Kernkonzepte von WordPress-Themes behandeln: 1. Die Template-Hierarchie.

Diese Vorlagendateien basieren auf der Schleife

Diese Template-Dateien „in der Template-Hierarchie“ haben alle etwas sehr Wichtiges gemeinsam: Sie sind um The Loop herum aufgebaut, eines der absoluten Kernprinzipien der WordPress-Entwicklung.

Wir gehen tief in The Loop in Kernkonzepte von WordPress-Themes ein: 2. Verarbeiten von Beiträgen mit The Loop. The Loop ist wirklich cool, also wenn Sie neu darin sind, halten Sie Ihre Socken fest, damit The Loop sie nicht wegbläst!

Vorlagenteile

Nehmen wir an, es gibt einen Abschnitt sowohl in index.php als page.php , der genau gleich ist. Sollten wir diesen Code in diesen beiden Dateien wiederholen?

Eigentlich ist DRY – „Don’t Repeat Yourself!“ – ein Schlachtruf für gute Programmierer. Wiederholung verursacht alle Arten von Problemen. Was ist, wenn Sie etwas am wiederholten Abschnitt ändern möchten? Jetzt müssen Sie es an zwei Stellen ändern. Was passiert, wenn Sie vergessen, es an einer Stelle zu ändern, oder einen Fehler in einer Datei machen, aber nicht in einer anderen? Jetzt ist Ihr Code nicht mehr synchron und Ihre Website ist fehlerhaft. (Nun: Was ist, wenn Sie denselben Code zwanzig Mal wiederholen? Sie müssen jede Änderung, die Sie vornehmen, zwanzig Mal wiederholen und hoffen, dass Sie „alle erfasst haben“.)

Vorlagenteile nehmen einen sich wahrscheinlich wiederholenden Teil einer Vorlagendatei und verschieben ihn in eine neue Datei. Auf diese Weise können sowohl index.php als page.php einfach auf denselben Vorlagenteil verweisen, anstatt ihn einzeln zweimal zu schreiben; und wenn Sie diesen Abschnitt ändern möchten, ändern Sie ihn nur einmal.

Jetzt kennen Sie Ihr Thema Anatomie

Dies sind die Dinge, die man über ein WordPress-Theme wirklich verstehen sollte. Sogar ein viel zu großes ThemeForest-Theme wird um dieses Kernskelett herum aufgebaut, also verstehen Sie, wie diese Teile ineinander greifen, und Sie werden viel Kraft haben, WordPress-Themes zu verstehen.

Nach Abschluss dieser Anatomiestunde tauchen die nächsten drei Kapitel in vier der entscheidenden Programmierprinzipien ein, die erklären, wie ein Thema seine Arbeit erledigt:

  1. Die WordPress-Template-Hierarchie
  2. Die Schleife
  3. Funktionen.php
  4. WordPress-Hooks

Weiter!