Neue Theme URL und Theme Pfad Funktionen in WordPress 4.7

Mit WordPress 4.7 hat der Core vier neue Funktionen für die Rückgabe von Theme URL bzw. Theme Pfad erhalten, welche die alten Funktionen ergänzen und teilweise ersetzen. In diesem Beitrag stelle ich die neuen Möglichkeiten vor.

Zum besseren Verständnis empfehle ich meinen Beitrag von letzter Woche zu lesen, in dem ich die bisherigen URL und Dateipfad Funktionen für Theme Entwickler vorgestellt habe.

Das Problem der altbekannten Funktionen ist, dass je nach Funktion entweder URL/Pfad des Parent Themes oder des Child Themes zurückgegeben wurde. Damit war es nicht möglich, Dateien in einem Child Theme zu überschreiben, wie es beispielsweise bei Template Dateien und get_template_part() möglich ist.

Aus diesem Grund wurden mit WordPress 4.7 neue Funktionen eingeführt.

get_theme_file_uri

Mit der neuen Funktion get_theme_file_uri() wird ähnlich wie bei get_template_directory_uri und get_stylesheet_directory_uri die URL zum Theme Ordner zurückgegeben. Der typische Anwendungsfall im WordPress Theme ist deshalb das Einbinden von CSS und JavaScript.

Das Neue an der Funktion ist, dass mit Verwendung von get_theme_file_uri überprüft wird, ob die Datei im Child Theme existiert. Falls nicht, wird als Fallback auf die Datei im Parent Theme zurückgegriffen.

Dazu wird der relative Pfad zur Datei im Theme Ordner als Parameter übergeben, und nicht wie bisher als String angehängt. Als Rückgabe erhalten wir eine URL direkt zur Datei, weshalb die Funktion auch ihren Namen hat (file statt directory).

wp_enqueue_script( 'custom-script', get_theme_file_uri( 'js/custom-script.js' ) );

Als Erstes wird versucht, die Datei custom-script.js aus dem Child Theme einzubinden. Falls diese im Child Theme nicht existiert, wird automatisch auf die Datei im Parent Theme zurückgegriffen.

Damit ist es für Theme Entwickler nun möglich, JavaScript und CSS Dateien überschreibbar zu machen, indem diese mit der neuen Funktion get_theme_file_uri anstatt wie früher mit get_template_directory_uri() eingebunden werden.

Nutzer des Themes können die CSS / JS Dateien einfach vom Parent Theme ins Child Theme kopieren und dort Änderungen machen, um die Originaldatei zu überschreiben – genauso wie es seit Langem für Template Dateien funktioniert.

get_theme_file_path

Analog zur neuen Funktion für die Theme Datei URL gibt es auch eine Funktion für die Rückgabe des Theme Dateipfads: get_theme_file_path()

Diese funktioniert auf die gleiche Weise. Die Datei wird als Parameter übergeben, und je nach Existenz der Datei wird der Pfad zum Child oder Parent Theme zurückgegeben.

Grundsätzlich kann die Funktion daher zum Laden von PHP Dateien verwendet werden, um diese in einem Child Theme überrschreibbar zu machen.

require get_theme_file_path( '/inc/customizer.php' );

Davon rate ich aber ab.

Zum Laden von Template Dateien sollten immer die existierenden und speziellen Funktionen wie get_template_part() eingesetzt werden.

Und Funktionsdateien wie template-tags.php oder customizer.php sollten meiner Meinung nach überhaupt nicht mit einem Child Theme überschrieben werden können. Jegliche Aktualisierung der Dateien im Parent Theme würden dadurch verloren gehen, was schließlich zu Problemen führen kann. Zum Beispiel wenn durch ein Update des Parent Themes Funktionen hinzugefügt oder verändert werden.

Anstatt ganze Dateien mit vielen Funktionen komplett zu überschreiben, sollten deshalb besser die einzelnen Funktionen im Child Theme durch entsprechende Hooks und Filter modifiziert werden.

Die Funktion ist aber nicht nutzlos. Ein möglicher Anwendungsfall wird bereits im Ankündigungsbeitrag gezeigt:

wp_enqueue_script(
    'custom-script',
    get_theme_file_uri( 'js/custom-script.js' ),
    array(),
    filemtime( get_theme_file_path( 'js/custom-script.js' ) )
);

Dabei wird mithilfe von filemtime die Versionsnummer für die JavaScript Datei automatisch anhand des letzten Bearbeitungsdatums dynamisch generiert. Hierbei wird der absolute Pfad zur Datei benötigt, welche uns get_theme_file_path liefert.

Funktionen für den Parent Theme Ordner

Ergänzend zu diesen beiden neuen Funktionen wurden mit get_parent_theme_file_uri() und get_parent_theme_file_path() auch zwei Funktionen zur Rückgabe von Theme Datei URL bzw. Theme Dateipfad für Dateien des Parent Theme Ordners eingeführt.

Diese sind als Ersatz für get_template_directory und get_template_directory_uri vorgesehen. Technisch bieten sie keine Neuerungen und erfüllen den gleichen Zweck.

Eingesetzt werden sie aber wie die get_theme_file_* Funktionen, d.h. die Datei wird als Parameter übergeben. Als Rückgabe erfolgt nicht der Parent Theme Ordner, sondern die URL/Pfad direkt zur Datei.

get_parent_theme_file_path

Eignet sich zum Laden von Funktionsdateien im Parent Theme.

Die folgende Zeile mit der alten Implementierung

require get_template_directory() . '/inc/customizer.php';

entspricht der Zeile

require get_parent_theme_file_path( '/inc/customizer.php' );

unter Verwendung der neuen Funktion.

get_parent_theme_file_uri

Um CSS oder JavaScript des Parent Themes einzubinden, ohne ein Überschreiben der Dateien zu erlauben, kann statt get_template_directory_uri nun auch die neue Funktion verwendet werden:

wp_enqueue_script( 'customize-controls', get_parent_theme_file_uri( '/js/customize-controls.js' ) );

Fazit

Ich mag die neuen Funktionen.

Die Namen beschreiben die Funktionen viel verständlicher, was insbesondere den verwirrenden Unterschied zwischen stylesheet und template directory verbessern sollte. Die Implementierung mit Funktion und Parameter finde ich auch lesbarer als die bisherige Verknüpfung von Funktion und Dateinamen als Text String.

TwentySeventeen setzt schon vollständig auf die neuen Funktionen. Da die Default Themes üblicherweise den Maßstab und Best Practices in der Theme Entwicklung setzen, werden wir vermutlich die neuen Funktionen in Zukunft öfter sehen.

Der größte Nachteil im Moment ist, dass diese erst mit WordPress 4.7 zur Verfügung stehen. Mit ein Grund dafür, dass TwentySeventeen nicht mit früheren WordPress Versionen funktioniert. Falls das Theme auch noch mit WordPress 4.6 und früher laufen soll, müssen weiterhin die alten Funktionen genutzt werden.

6 Kommentare

  1. Sehr interessanter Artikel.
    Eine Sache interessiert mich nun doch. Gibt es eine Möglichkeit eine php datei so zu hinterlegen, dass sie z.B. bei einem Beitrag oder einem WooArtikel quasi im gleichen Pfad liegt?
    Ich habe bei meiner Seite Permalinks drinnen also in der Form von /produkt/produktname und würde gerne in der Artikelbeschreibung ein Script einfügen, welches aber eine php datei im Ordner benötigt. Dadurch dass es ein Ajax-Call ist, kann ich nicht http….dateiname verwenden.
    Gibt es dafür auch solche eine Lösung wie die anderen Beispiele oben?
    VLG Felix

    1. Hallo Felix,

      Sorry, aber ich verstehe die Frage nicht.

      Der Permalink bzw. die URL von WordPress hat nichts mit der Ordnerstruktur von WordPress zu tun. Der Permalink ist eine sprechende URL und wird zur besseren Lesbarkeit und SEO anstatt einer Post ID verwendet.

      Beim Aufruf der URL wird der Permalink in eine Post ID umgewandelt, und der jeweilige Content (Beitrag, Seite, Produkt) für diese ID aus der WordPress Datenbank geholt. Das heißt gleichzeitig, dass für die URL /produkt/produktname kein gleichnamiger Ordner oder Pfad besteht. Der Permalink existiert nur virtuell.

      Zusätzlich erlaubt WordPress normalerweise aus Sicherheitsgründen nicht, in der Artikelbeschreibung Skripte hinzuzufügen und auszuführen.

      Viele Grüße,
      Thomas

      1. Hallo Thomas,
        vielen Dank für Deine Antwort.
        Also was ich gerade am basteln bin, ist quasi ein Woo Produkt, wo man in der Kurzbeschreibung eine Art Formular hat.

        PostVar:

        Und der Code, den man da eingibt, holt einen Bildpfad aus der DB, da ich aber möchte das das direkt so angezeigt wird, läuft das per Ajax.
        $(„#senden“).click(function(){
        PostVar_jquery = $(„#PostVar“).val();
        $.ajax({
        type: ‚post‘,
        url: ‚ajax_get_image.php‘,
        data: {
        PostVar: PostVar_jquery
        },
        dataType: ‚json‘,
        success: function( daten )

        Wenn ich das in meiner Testdatei teste, klappt das alles so wie es sollte. Nur diese Zeile: url: ‚ajax_get_image.php‘, da ist denke ich das Problem. wenn ich da ein url: ‚localhost/ajax_get_image.php‘ z.B. draus mache klappt das Script nicht mehr.

        Nun war meine überlegung, ob es nicht eine Möglichkeit gibt das irgendwie so zu hinterlegen, dass auch bei dem virtuellen Pfad die Datei gefunden werden kann.

        VLG Felix

  2. Okay, vielen Dank. Dann werde ich mich wohl über die Feiertage mit einem Plugin beschäftigen. xD

    Dann wünsche ich frohe Feiertage und einen guten Rutsch. Und nochmals Danke 🙂

    VLG
    Felix

    1. Ich kenne mich mit Ajax in WordPress fast gar nicht aus, aber wahrscheinlich kann der wp_ajax_$function Hook verwendet werden, um den Ajax Handler zu registrieren: https://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)

      In die Funktion kann dann der Code aus der ajax_get_image.php ausgeführt werden. Damit folgt die Umsetzung den WordPress Standards und sollte besser funktionieren als externe PHP Dateien, die nicht auf WordPress basieren.

      Ich wünsche ebenfalls frohe Feiertage und einen guten Rutsch 🙂

      Thomas

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.