WordPress-Theme-Tutorial für Anfänger – Teil 6: Die Funktionen eines Themes.php
Heute werden wir lernen, wo und wie man Code außerhalb der Templates in unserem Theme hinzufügt. Wir tun dies, indem wir die functions.phpDatei des Themas hinzufügen. Dabei lernen wir auch, wie Sie Ihre Stylesheets und Skripte richtig hinzufügen.
Die functions.php-Datei eines Themes
Ein Design muss irgendwo Code platzieren, der nicht Teil der Vorlagen ist. Es gibt immer eine Menge Code, den alle Themes hinzufügen müssen, um die Funktionalität zu handhaben. Zum Beispiel das Aktivieren der Featured-Images-Funktion von WordPress (haben Sie bemerkt, dass es gefehlt hat?), Unterstützung für Menüs, Widgets, Hinzufügen von Stylesheets und Skripten (auf die richtige Weise) und mehr.
Diese Datei ist functions.php. WordPress lädt diese Datei automatisch und immer, wenn sie in deinem Theme vorhanden ist. Es wird immer sowohl im Admin als auch im Frontend geladen.
Hinzufügen einer functions.php-Datei zu unserem Design
Lassen Sie uns eine neue, leere Datei in unserem Root-Theme-Ordner erstellen und sie benennen functions.php.
Beginnen Sie in dieser Datei sofort mit einem öffnenden PHP-Tag (<?php) und fügen Sie das schließende Tag nicht ein. Die functions.phpDatei ist für PHP-Code gedacht, nicht für HTML. Ihr Design kann kaputt gehen (oder sich sogar seltsam verhalten), wenn Sie Zeichen oder Zeilenumbrüche außerhalb von PHP-Tags in dieser Datei haben. Sie können natürlich aus PHP-Tags ausbrechen, um HTML auszugeben, aber dies muss innerhalb von Funktionen oder Hooks erfolgen. Lassen Sie mich dies anhand eines Experiments erklären.
Lassen Sie uns diese Datei testen, um zu sehen, wie sie funktioniert. functions.phpSchreiben Sie ein Echo eines Dummy-Textes hinein :
Aktualisieren Sie Ihr Frontend. Der Dummy-Text erscheint. Wenn Sie jedoch den HTML-Quelltext untersuchen oder anzeigen, werden Sie feststellen, dass der Text vor dem Öffnen von angezeigt wird <html>. Das ergibt völlig ungültiges HTML!
Gehen Sie zu Ihrem Admin-Panel und klicken Sie auf Aktualisieren. Es macht dort auch dasselbe (es könnte hinter der Admin-Leiste versteckt sein, aber es ist dort im HTML).
Wie Sie sehen, wird jeder Code in Ihren functions.phpVorlagen vor allem anderen in unseren Vorlagen geladen. Daher muss in der Regel jede Ausgabe (HTML außerhalb von PHP-Tags oder echo) innerhalb von Funktionen liegen, die zur richtigen Zeit ausgeführt werden und normalerweise mit Aktionen oder Filtern verbunden sind.
Erinnern Sie sich daran, als wir in Teil 3 des WordPress-Theme-Tutorials für Anfänger von Hooks erfahren und diese hinzugefügt haben. Wir führen Code auf einem Hook aus, indem wir eine Funktion mit an den Hook anhängen add_action(). Lassen Sie uns etwas anderes ausprobieren; Lassen Sie uns eine Funktion mit einem Hook verknüpfen, den wir bereits in unseren Vorlagen definiert haben. wp_footer.
In functions.phpentfernen Sie das, echowas wir zu Testzwecken hinzugefügt haben, und schreiben Sie stattdessen:
Klicken Sie im Frontend auf Refresh und sehen Sie, dass die Zeichenfolge wp_footerdirekt vor dem Schließen genau an der von Ihnen definierten Stelle angezeigt wird </body>. Beachten Sie auch, dass dies in Admin nichts ausgibt. Dies liegt daran wp_footer, dass es sich um einen Hook handelt, der nur im Frontend ausgeführt wird.
Machen wir unsere ersten richtigen Operationen in functions.php!
Hinweis: In PHP ist es nicht möglich, zwei Funktionen mit genau demselben Namen zu haben. Dazu gehören Funktionsnamen in WordPress, Ihrem Theme und allen aktivierten Plugins! Befolgen Sie Best Practices und stellen Sie Ihren Funktionen Ihren Themen-Slug voran, wie im obigen Beispiel: „ wptutorial_<function_name>“. Dadurch wird verhindert, dass WordPress aufgrund identischer Funktionsnamen tödlich abstürzt.
Hinweis 2: Es spielt keine Rolle, in welcher Reihenfolge Sie Funktionen und Hooks in Ihre functions.php. Denken Sie daran, dass Hooks sowieso an bestimmten Kontrollpunkten ausgeführt werden, nicht in der Reihenfolge, in der sie sich befinden functions.php. Die einzige Ausnahme ist, wenn Sie andere Dateien einbinden oder Ihre eigenen Klassen initialisieren.
Der richtige Weg, Stile und Skripte hinzuzufügen, im Vergleich zum falschen Weg
Einige von euch erinnern sich vielleicht noch an Teil 3, wo wir den wp_headHook in unsere header.php. Nachdem wir dies getan hatten, konnte WordPress seine Stile und Skripte laden, einschließlich der Admin-Leiste. Sie denken vielleicht, dass wir, um unsere Stylesheets hinzuzufügen, eine Funktion erstellen müssen, die mit dem Stylesheet verbunden ist wp_headund die für das Stylesheet ausgibt <link>… Normalerweise hätten Sie Recht!
In WordPress gibt es jedoch einen speziellen Weg, um Skripte und Stile hinzuzufügen. Dies dient hauptsächlich dazu, die Ladereihenfolge zu verwalten und das Laden doppelter Bibliotheken zu vermeiden. Beispielsweise möchten Sie als Theme-Autor möglicherweise Javascripts hinzufügen, die von der jQueryBibliothek abhängig sind. Dann müssen Sie sicherstellen, dass jQueryIhre Dateien geladen werden. Aber WordPress und alle Plugins haben die gleiche Notwendigkeit, um sicherzustellen, dass jQuerysie auch vor ihren Skripten geladen werden. jQuerySie können die Bibliothek nicht mehrmals laden, da dies zu Problemen führt. WordPress hat also eine Möglichkeit zu verwalten, in welcher Reihenfolge Skripte und Stylesheets geladen werden.
Stylesheets hinzufügen (richtig)
Um Stile und Javascripts hinzuzufügen, verwenden wir einen Hook namens wp_enqueue_scripts. Ja, Sie verwenden diesen Haken trotz seines Namens auch für Stile. Das Hinzufügen von Skripten und Stilen wird als „Einreihen” bezeichnet – wie in eine Warteschlange stellen. Lassen Sie uns unser Stylesheet einreihen (hinzufügen), indem Sie die Funktion wp_enqueue_style in unserem verwenden functions.php:
Die wp_enqueue_styleFunktion benötigt mindestens zwei Parameter. Der erste ist ein eindeutiger Name (Handle oder „Slug-ID”) und der zweite der Speicherort der Datei. Das Handle muss eindeutig sein, da dies die Kennung ist, die WordPress verwendet, um festzustellen, ob es Duplikate gibt.
Um den Pfad zu Ihrem Thema zurückzugeben, stehen zahlreiche Funktionen zur Verfügung. Oben habe ich verwendet, get_stylesheet_directory_uri()was die URL zu Ihrem Themenordner zurückgibt, und dann habe ich den Rest des Pfads an unser Stylesheet angehängt.
PS: WordPress bietet eine separate Funktion zum Zurückgeben der vollständigen URL zu Ihrem Thema style.css: get_stylesheet_uri(). Ich habe die andere Funktion oben verwendet, da es nützlicher ist, sich damit vertraut zu machen. Sie werden es für alle anderen Dateien verwenden, die Sie in die Warteschlange einreihen müssen.
Die Funktion wp_enqueue_styleakzeptiert nützlichere Parameter wie Abhängigkeiten (welche anderen CSS-Dateien vorher geladen werden müssen) und Versionsnummer (nützlich für Caching-Zwecke).
Aktualisieren Sie Ihr Frontend und sehen Sie, dass Ihr Stylesheet im <head>Tag geladen ist!
Wenn Sie einer von denen sind, die darauf brennen, Ihr Thema beim Codieren schöner aussehen zu lassen, haben Sie hier die Chance. Ich ermutige Sie, mit der Definition Ihres HTML, Ihrer Klassen und Wrapper zu beginnen und Ihrer style.css. Im Laufe dieser Tutorial-Serie werden wir weitere Inhalte hinzufügen, die ein Styling erfordern.
Skripte hinzufügen (richtig)
Sehen wir uns an, wie wir unserem Theme Javascripts hinzufügen. Dies geschieht mit demselben Hook (so dass Sie alles in eine Funktion stecken können). Aber für Skripte verwenden wir eine etwas andere Funktion.
Um ein Skript einzureihen, verwenden Sie wp_enqueue_script(). Die Parameter sind die gleichen wie wp_enqueue_style(). Das erste ist das eindeutige Handle und das zweite der Pfad zum Skript. Drittens (optional) ist das Array der Abhängigkeiten. Als vierten (optionalen) Parameter legen Sie die Versionsnummer fest. Und schließlich fünftens (optional) definieren Sie, ob das Skript im <head>Tag oder am Ende geladen werden soll oder nicht </body>.
WordPress wird mit einer großen Auswahl an Bibliotheken geliefert, die bereits enthalten sind. Sie sind nicht immer alle geladen, aber verfügbar, wenn Sie sie brauchen. Wenn Sie ein gemeinsames Bibliotheksskript hinzufügen möchten, überprüfen Sie zuerst, ob WordPress es bereits hat. Beispiele sind jQuery, alle jQuery-UI-Module, Underscore und Backbone.
Wenn Sie eines der in WordPress enthaltenen Skripte als Abhängigkeit hinzufügen, müssen Sie dieses Skript nicht in die Warteschlange einreihen! Machen wir das in der Praxis.
Erstellen Sie einen Ordner assetsund darin einen Unterordner jsin unserem Themenordner und fügen Sie dann eine neue leere main.jsDatei hinzu. Angenommen, dieses Skript benötigt die jQueryBibliothek, also legen wir es als Abhängigkeit fest. Wir wissen, dass WordPress mit jQueryBundles geliefert wird und das Handle dafür ist jquery. Wir werden unser Skript wie folgt einreihen:
Wenn Sie das Frontend aktualisieren und Ihren Quellcode überprüfen, sollten Sie sehen, dass Ihr Skript main.jshinzugefügt wurde, aber auch diese jQueryBibliothek geladen wurde. Und jQuerywird vor Ihrer Datei geladen!
Sie haben jetzt gelernt, wie Sie Stile und Skripte hinzufügen. Um weitere Dateien hinzuzufügen, fügen Sie für jede neue Datei ein wp_enqueue_style()oder hinzu.wp_enqueue_script()