Verstehen der Dateihierarchie eines WordPress-Themes

Veröffentlicht: 2018-11-07

Vor ein paar Wochen haben wir über die verschiedenen Arten von Themen gesprochen, die wir in WordPress finden können. Dort haben wir alles über WordPress- Themen gelernt: Was sind grundlegende Themen, Premium-Themen und Mehrzweckthemen; wie man jedes Theme mit Child-Themes anpasst; Was sind Enkelthemen? und auch, wie man ein Design mit Starter-Designs und Framework-Designs erstellt.

Da mich einige von Ihnen kontaktiert haben, um weitere Informationen zum Erstellen eines WordPress -Themes zu erhalten, dachte ich, es wäre interessant, über die Dateihierarchie eines WordPress -Themes zu sprechen. In diesem Beitrag lernen Sie die Grundlagen, um zu verstehen, wie ein WordPress -Theme aussieht, und verfügen hoffentlich über alle Tools, die Sie zum Erstellen Ihres ersten Themas benötigen.

Bevor wir anfangen…

Jeder kann ein Haus auf Papier zeichnen, aber wir sind nicht alle Architekten. Wenn wir Glück haben, können wir vielleicht einen IKEA Kleiderschrank zusammenbauen. Aber das ist es. Warum erwähne ich das? Denn das Erstellen von WordPress- Themes ist nicht anders! Es ist sehr schwierig und es braucht Zeit und Erfahrung, etwas Schönes und Benutzerfreundliches zu machen.

In diesem Beitrag werde ich Ihnen also „alles“ beibringen, was Sie wissen müssen, um ein WordPress -Theme mit zwei Besonderheiten zu erstellen:

  1. Wir werden absolut alles ignorieren, was mit dem Design des Themas selbst zu tun hat, und uns nur auf den technischen Teil konzentrieren.
  2. Wir werden nicht bei Null anfangen. Stattdessen verwenden wir das Starterthema Underscores. Warum? Weil es keinen Sinn macht, ein Thema von Grund auf neu zu beginnen, wenn wir ein Qualitätsgerüst haben, das uns einen Teil der geleisteten Arbeit gibt. Und außerdem, wenn Sie das tun möchten, gibt Ihnen die WordPress-Dokumentation selbst die Informationen, die Sie benötigen.

Underscores, ein fantastisches Starter-Theme von Automattic

Underscores ist ein Starter-Thema, dessen einziges Ziel es ist, das Basisskelett bereitzustellen, auf dem man sein eigenes Thema entwickeln kann, das gut dokumentierte HTML-Vorlagen und einige zusätzliche Hacks bietet. Damit können wir die Erstellung eines neuen Themes enorm beschleunigen, da ein Großteil der Aufgaben, die wir erledigen müssen, um ein Theme auf den Weg zu bringen, bereits vorhanden sind.

Vorherige Schritte

Jedes Thema muss einen eindeutigen Namen haben. Vor allem, weil alle Themes, die du in WordPress installierst, im wp- content /themes/ in ihrem eigenen Ordner landen (etwas wie wp- content /themes/twenty-seventeen/ , wp- wp- content /temes/nelio /, wp- content /themes/your-theme/ usw.) und daher sind unterschiedliche Namen erforderlich, um Kollisionen zu vermeiden. Das erste, was Sie also tun müssen, ist, den Namen Ihres Themas zu bestimmen und es einzurichten.

Wenn Sie zur Seite „Unterstriche“ gehen, sehen Sie ein Textfeld mit dem Namen „ Designname “ neben einer Schaltfläche „ Generieren “. Geben Sie einfach den Namen des gewünschten Themas ein (ich habe zum Beispiel Nelio Software verwendet), klicken Sie auf die Schaltfläche, und eine .zip -Datei wird mit Ihren Einstellungen heruntergeladen, einschließlich Präfixen für die von Ihnen definierten Funktionen, damit sie eindeutig sind ( Anstatt beispielsweise eine Funktion namens setup zu haben, die mit derselben Funktion eines anderen Themas in Konflikt geraten kann, heißt unsere nelio_software_setup ).

So, jetzt, da Sie Ihr Starter-Theme fertig haben … installieren Sie es auf WordPress , aktivieren Sie es und machen Sie sich an die Arbeit!

Primärdatei

Wenn Sie das Verzeichnis Ihres Themas öffnen und einen Blick hineinwerfen, werden Sie feststellen, dass sich darin mehrere Dateien und Verzeichnisse befinden. Ich weiß, es mag viel erscheinen, aber glauben Sie mir, es ist einfacher als es scheint.

Die erste Datei, die wir kommentieren werden, ist style.css . Wie sein Name und Typ andeuten, enthält es die Stile unseres Themas. Aber es ist auch die Datei, die einige relevante Metainformationen zu unserem Thema enthält (daher ist es die erste Datei, die wir uns ansehen müssen):

Wie Sie sehen können, beginnt diese Datei mit einem ziemlich langen Kommentar, der einem speziellen Format zu folgen scheint. Tatsächlich folgt es einem speziellen Format. Von den Zeilen 2 bis 11 sehen wir eine Reihe von Attribut-Wert -Paaren, in denen verschiedene Eigenschaften des Themas definiert sind: sein Name, seine URL, sein Autor, eine Beschreibung … Standardmäßig sind diese Felder mit Unterstrichen gefüllt, aber Sie können dies tun ändere sie nach Belieben.

Wenn Sie sich fragen, wozu diese Informationen gut sind…. Nun, es ist dasjenige, das auf Ihrem WordPress -Dashboard im Abschnitt Aussehen » Themen angezeigt wird:

Metainformationen zum Thema Underscores
Metainformationen des Themas Underscores sind alle in der WordPress-Beschreibung enthalten.

Funktionsdatei

Designs können auch eine Funktionsdatei mit dem Namen functions.php definieren. Normalerweise definieren wir in dieser Datei die typischen Hooks, die zum Einreihen von Stylesheets und Skripten in die Warteschlange benötigt werden, sowie alle zusätzlichen Hilfsfunktionen, die wir möglicherweise benötigen. Im Grunde verhält es sich wie ein Plugin : Wenn das Theme aktiv ist, wird die Datei automatisch geladen und alles, was darin definiert ist, wird verfügbar.

Wenn Sie einen Blick auf die Datei functions.php werfen, die Underscores für Sie erstellt hat, werden Sie feststellen, dass bereits eine Menge Dinge vorhanden sind. Schauen wir uns einige Beispiele dafür an, was es beinhaltet:

  1. nelio_software_setup . Dies ist eine Funktion, die direkt aufgerufen wird, nachdem das Design über den Hook after_setup_theme in WordPress geladen wurde. Darin definiert das Theme mehrere Eigenschaften unseres Themes, wie zum Beispiel die Unterstützung von Beitragsbildern in Blogbeiträgen, ein Navigationsmenü, die Internationalisierungsdomäne usw. Das Interessanteste an dieser Funktion ist meiner Meinung nach, dass sie es ist innerhalb eines bedingten Blocks definiert: Auf diese Weise kann jemand, wenn er ein untergeordnetes Thema erstellt, um unseres anzupassen, diese Funktion möglicherweise neu definieren, um es an seine eigenen Bedürfnisse anzupassen.
  2. nelio_software_widgets_init . Unterstriche zeigen uns auch, wie wir Seitenleisten registrieren können, die Orte sind, an denen man Widgets hinzufügen kann. Wie Sie sehen können, ist es so einfach wie das Aufrufen der Funktion register_sidebar während der Ausführung der Aktion widgets_init .
  3. nelio_software_scripts . Dies ist eine der wichtigsten Funktionen des Themas, da es für das Einreihen der Skripte und Stile verantwortlich ist, die für unser Thema erforderlich sind.

Nichts Besonderes, oder?

Ein interessanter Punkt, der besondere Erwähnung verdient, sind die require -Anweisungen, die am Ende dieser Datei erscheinen. Grundsätzlich laden diese Anweisungen einige Dateien aus dem Unterverzeichnis inc/ , wie z. B. inc/custom-header.php oder inc/customizer.php , und sie dienen als einfaches Beispiel dafür, wie wir unseren Code organisieren und ihn sauber und ordentlich halten.

Offensichtlich zwingt uns niemand, absolut alle Funktionen und Anpassungen, die wir wollen, in functions.php zu packen. Wenn wir möchten, können wir unsere in kleineren Dateien für spezifischere Zwecke organisieren und sie dann nach Bedarf anfordern, wobei wir bedenken, dass der Einstiegspunkt diese Datei ist.

Vorlagen

Okay, bisher haben wir die Grundlagen eines Themes gesehen: wie man seine Metadaten in style.css und wie man es konfiguriert und alle Hilfsfunktionen definiert, die wir in functions.php brauchen könnten. Aber wir sollen ein Thema erstellen, also … Wo definieren wir HTML-Vorlagen? Wie lassen wir die Dinge so oder so aussehen?

Die Antwort auf diese Frage finden Sie in den anderen Dateien, die im Root-Verzeichnis unseres Themes liegen. Schauen Sie einfach genauer hin und Sie werden sehen, dass die meisten Dateien so benannt sind, dass Sie leicht erraten können, was sie tun:

  1. index.php ist die Standardvorlage und wird zum Rendern von Inhalten aus WordPress verwendet, es sei denn, es gibt eine spezifischere Vorlage für diese Inhalte .
  2. comments.php ist die Vorlage, die den Kommentarbereich in unseren Blogbeiträgen darstellt.
  3. single.php ist die Vorlage, die wir verwenden, um einen Blog-Beitrag zu rendern, und daher überschreibt sie index.php für Blog-Beiträge.
  4. page.php ist ähnlich wie single.php , aber in diesem Fall bezieht es sich auf Seiten.
  5. und so weiter und so fort.

Nichts kompliziertes, oder? Wenn Sie neugierig auf alle Vorlagen sind, die Sie erstellen können, und ihre Namen, empfehle ich Ihnen, sich die Codex-Seite anzusehen, auf der erklärt wird, wie man ein Design erstellt, sowie die Seite, auf der die Vorlagenhierarchie in WordPress erklärt wird.

Was ist in einer Vorlage in einem WordPress -Theme enthalten? Nun, sie haben im Grunde das, was Sie erwarten würden: HTML zum Definieren des Layouts gemischt mit etwas PHP-Code zum Abrufen der eigentlichen Daten, die wir rendern möchten. Wenn wir uns beispielsweise die Datei single.php (die zum Rendern von Blogbeiträgen verwendet wird), sehen wir Folgendes:

Mal sehen, was in jeder Zeile passiert:

  1. Das erste, was wir in Zeile 10 sehen, ist ein Aufruf der Funktion get_header . Dies lädt im Grunde eine Vorlage mit einigen gängigen HTML-Tags wie html , head , title , body … sowie alle anderen gemeinsamen Teile unserer Website, wie eine Kopfzeile oder ein Navigationsmenü. Wir reden später darüber.
  2. Ebenso sehen wir in Zeile 37 einen Aufruf von get_footer , der, wie Sie sich vorstellen können, dem entgegengesetzten Zweck dient. Das heißt, es schließt alle Tags, die wir in der Kopfzeile geöffnet haben, und fügt einige Fußzeileninformationen hinzu.
  3. Die Zeilen 13 bis 33 machen die ganze Magie. Einerseits sehen wir, dass der Inhalt von zwei Tags ( div und main ) mit einigen speziellen Klassen und IDs umgeben wird, und dann haben wir etwas PHP, um den eigentlichen Inhalt zu laden.
  4. Zeile 17 lädt die WordPress -Schleife.
  5. Zeile 20 lädt die Vorlage in template-parts/content.php , die den erforderlichen HTML-Code zum Rendern eines Beitrags enthält (dh den Titel, das vorgestellte Bild, den Inhalt usw.).
  6. Zeile 22 fügt einige Navigationslinks hinzu.
  7. Zeile 25 lädt die Kommentare, die dieser Beitrag möglicherweise hat, über die Funktion comments_template , aber natürlich nur, wenn Kommentare aktiviert sind.
  8. Schließlich fügt Zeile 36 die Seitenleiste hinzu, die wir in functions.php definiert haben.

Kopf-und Fußzeile

Im Root unseres Themes finden wir auch die Dateien header.php und footer.php . Wie ich Ihnen bereits gesagt habe, werden sie zum „Öffnen“ und „Schließen“ der resultierenden HTML-Seite verwendet, die wir an die Browser unserer Besucher senden.

Dies ist die Überschrift:

und das ist die Fußzeile:

Auch hier gibt es nichts Besonderes. Nur etwas HTML-Code und ein paar PHP-Aufrufe. Aber wie auch immer, lassen Sie uns kurz die relevantesten Punkte jeder Datei besprechen:

  1. Alle in footer.php header.php .
  2. Einer der wichtigsten Aspekte in header.php ist der Aufruf von wp_head in Zeile 20. Dieser Aufruf muss erfolgen, wenn wir möchten, dass Plugins und das Design selbst ihre eigenen Stile und Skripte in die Seite einreihen können.
  3. Der Rest des Codes in header.php definiert den Teil unserer Website, der allen Seiten gemeinsam ist, wie zum Beispiel das Überschriftenbild oder das Navigationsmenü.
  4. footer.php ähnelt dem Header, aber in diesem Fall lädt es gemeinsamen Code, der am Ende aller unserer Seiten erscheint.
  5. Genau wie bei header.php ruft die Datei footer.php eine spezielle Funktion namens wp_footer . Es ist sehr wichtig, diese Funktion in unserem Theme zu haben, sonst könnten die Plugins und das Theme selbst keine eigenen Skripte am Ende der Seite hinzufügen.

Gute Praktiken

Lassen Sie uns abschließend über einige bewährte Verfahren sprechen, die Sie befolgen müssen, wenn Sie ein perfektes Thema erstellen möchten.

  1. Enqueue-Stile und -Skripte. Keine der in Underscores enthaltenen Vorlagen fügt dem HTML-Code ein Skript oder einen Stil hinzu. Stattdessen verlassen sie sich auf die Funktionen wp_enqueue_script und wp_enqueue_style . Diesem Ansatz sollten Sie auch folgen.
  2. Themen Einstellungen. Selbst wenn wir ein einfaches Design erstellen, möchten wir wahrscheinlich einige Anpassungseigenschaften hinzufügen, die der Benutzer optimieren können sollte. Wenn Sie das tun möchten, erfinden Sie das Rad nicht neu und implementieren Sie Ihren eigenen Einstellungsbildschirm, sondern verwenden Sie die API des Customizers.
  3. Entkommen und desinfizieren. Das ist Webdesign 101. Es ist sehr, sehr wichtig, dass alle Daten, die Sie auf dem Bildschirm drucken, ordnungsgemäß geschützt sind und dass alle Daten, die Sie vom Benutzer sammeln, ordnungsgemäß bereinigt werden. Wenn Sie nicht wissen, wovon ich spreche, lesen Sie die WordPress-Dokumentation zu diesem Thema.
  4. Internationalisierung. Wenn Sie möchten, dass Ihr Thema von jedem verwendet wird, müssen Sie sicherstellen, dass es übersetzt werden kann. Gewöhnen Sie sich also an die Internationalisierungsfunktionen von WordPress und nutzen Sie diese von Anfang an. Wenn Sie dies tun, ist Ihr Thema im Handumdrehen übersetzbar!
  5. Theme-Check. Es gibt ein spezielles Plugin namens Theme Check, das die Qualität Ihres Themes überprüft. Verwenden Sie es beim Entwickeln eines Designs und stellen Sie sicher, dass alle Tests, die es durchführt, bestanden werden. Dies ist das Plugin , das das Theme Review Team in WordPress verwendet, also … warum sollten Sie es nicht auch verwenden wollen?

Einpacken

WordPress-Themes folgen einer ziemlich logischen und benutzerfreundlichen Struktur. Da es sich um PHP-Code handelt, können Sie den Code nach Belieben organisieren, obwohl es eine Reihe von Dateien gibt, von denen WordPress erwartet, dass sie vorhanden sind, damit alles funktioniert. Ich hoffe, dass der heutige Beitrag Ihnen geholfen hat, diese Struktur ein wenig besser zu verstehen und vor allem die Nützlichkeit eines Starter-Themes wie Underscores zu schätzen, um Ihr erstes Thema zu erstellen.

Vorgestelltes Bild von Joe LIU auf Unsplash.