Alles, was Sie über die get_template_part()-Funktion von WordPress wissen müssen

Ich habe einmal gelesen, dass man Programmieren am besten lernt, indem man den Code liest, den andere geschrieben haben. Schließlich verbringen Sie die meiste Zeit als Entwickler wahrscheinlich damit, Code zu überprüfen, zu optimieren und zu reparieren, den Sie oder ein anderer Entwickler in der Vergangenheit geschrieben haben. Genau deshalb mag ich freie und quelloffene Software so sehr: Sie gewährt uns Zugriff auf den Quellcode großartiger Tools und ermöglicht es, daraus zu lernen.

Wenn Sie sich für die WordPress-Welt interessieren (und ich nehme an, Sie sind es, weil Sie hier sind), sind der Quellcode von WordPress Core oder der von Gutenberg zwei sehr gute Möglichkeiten, um ein besserer WordPress-Profi zu werden und etwas über Backend- und Frontend-Entwicklung zu lernen.

Seit der ersten Veröffentlichung von Gutenberg teilen wir alles, was wir bisher über die Frontend-Entwicklung gelernt haben. So haben wir zum Beispiel eine Reihe von Beiträgen erstellt, in denen wir Ihnen die Grundlagen von React beigebracht haben, wir haben gesehen, wie Komponenten wiederverwendet werden, wir haben erklärt, wie man Gutenberg erweitert, und wir haben JavaScript-Neuigkeiten diskutiert, um besseren Quellcode zu schreiben, um nur einige Artikel zu nennen wir haben geschrieben.

Nun, heute werden wir den Gang wechseln und uns wieder auf WordPress Core konzentrieren. Warum? Ich weiß es nicht, vielleicht, weil die Ankündigung des nächsten Twenty Twenty-One-Themas, das vor ein paar Tagen herauskam, die perfekte Ausrede dafür ist? Lassen Sie uns also über eines der wichtigsten Elemente beim Erstellen von Themes in WordPress sprechen: die get_template_part Funktion.

WordPress-Themen

Lassen Sie uns zunächst überprüfen, wie WordPress-Themes funktionieren, sollen wir? Im Wesentlichen ist ein Design eine Sammlung von Dateien, die die HTML-Struktur und die CSS-Stile definieren, die unsere Website verwenden wird.

Wenn Sie an das Skelett einer Webseite denken, werden Sie feststellen, dass sich immer dasselbe Muster wiederholt:

• Wir beginnen mit dem Öffnen der html und head Tags. Dort fügen wir Skripte, Stile, Meta-Tags und so weiter hinzu.
• Dann schließen wir das head -Tag und öffnen das body -Tag, das den sichtbaren Inhalt unserer Website enthält.
  • Normalerweise enthält der Hauptteil einer Seite eine Kopfzeile mit dem Logo des Webs, ein Menü usw.
  • Dann kommt der Inhalt selbst, der eine Seite, ein Blogartikel, eine Liste von Beiträgen, das Ergebnis einer Suche usw. sein kann.
  • Schließlich endet es normalerweise mit einer Fußzeile.
• Sobald die gesamte Seite gerendert wurde, schließen wir schließlich alle Tags und wir sind fertig.

Also, ja, es scheint, dass jede Webseite mehr oder weniger einer ähnlichen Struktur folgt: Es gibt einen gemeinsamen Teil (z. B. Kopfzeile, Menü, Fußzeile …) und einen inhaltsspezifischen Bereich (einen Blogbeitrag, die Ergebnisse, die wir nach einer Suche erhalten haben). , ein WooCommerce-Produkt usw.).

Da Programmierer nicht gerne Code wiederholen und wir (im Allgemeinen) organisierte Menschen sind, folgen WordPress-Themes einer sehr strukturierten Dateistruktur. In diesem Beitrag, den ich vor ein paar Monaten geschrieben habe, haben Sie eine gute Erklärung der verschiedenen Dateien in einem Thema, aber denken Sie daran, dass es gibt:

• ein Stylesheet: style.css ,
• eine header.php -Datei zum „Öffnen“ der Webseite (d. h. Ausgabe des head -Tags und normalerweise des Anfangsteils des body , der allen Seiten gemeinsam ist),
• eine weitere footer.php -Datei, die die Seite „schließt“ (dh sie fügt die Fußzeile hinzu und schließt das html -Tag), und
• viele zusätzliche Dateien für die verschiedenen Arten von Inhalten, die wir rendern möchten.

Was ist die Funktion get_template_part und wozu dient sie?

Das erste, was Sie tun müssen, wenn Sie auf eine neue Funktion stoßen, ist das Gegenteil von dem, was Sie tun, wenn Ihr Vater Sie bittet, ihm beim Programmieren seines neuen Roomba-Reinigers zu helfen: Lesen Sie die Dokumentation . Machen wir das also mit unserer Funktion, indem wir uns den Codex ansehen:

get_template_part bietet einen einfachen Mechanismus für untergeordnete Designs, um wiederverwendbare Codeabschnitte im Design zu überladen.

Enthält den benannten Vorlagenteil für ein Thema oder wenn ein Name angegeben ist, wird ein spezialisierter Teil eingeschlossen. Wenn das Design keine {slug}.php-Datei enthält, wird keine Vorlage eingefügt.

Die Vorlage wird mithilfe von require und nicht require_once eingefügt, sodass Sie denselben Vorlagenteil mehrmals einfügen können.

Wenn die Datei „{slug}-special.php“ heißt, geben Sie für den $name-Parameter „special“ an.

Hinweis: get_template_part() schlägt stillschweigend fehl

get_template_part Dokumentation auf WordPress.org

Sehen? In weniger als einer Minute haben wir alle Informationen erhalten, die wir brauchten. Jetzt wissen wir, dass diese Funktion verwendet wird, um „wiederverwendbare Teile“ in einem Thema zu erstellen (und somit doppelten Code zu vermeiden), und zwar so, dass ein untergeordnetes Thema sie anpassen kann. Wir haben auch Informationen über seine Parameter, seine interne Funktionsweise (es verwendet die require -Funktion von PHP) und was wir von ihm erwarten können (es „versagt stillschweigend“).

Leider gibt es ein paar Dinge, die noch unklar sind, wie die erwähnten Dateien {slug}.php und {slug}-special.php . Was sind Sie? Was enthalten sie? Was machen Sie? Viele schwierige Fragen, die nur durch einen Blick auf die Dokumentation zu beantworten sind, also ist es an der Zeit, zu den Beispielen zu springen.

So erstellen Sie Teilvorlagen in unserem Thema

Werfen wir einen Blick auf das Twenty Twenty-One-Theme, um herauszufinden, ob es diese „Teilvorlagen“ verwendet und wenn ja, wie sie aussehen und was Sie tun sollten, um sie in Ihr eigenes Thema zu implementieren.

Wenn Sie meinen Beitrag über die Dateihierarchie eines WordPress-Themes gelesen haben, wissen Sie, dass „ index.php die Standardvorlage für unser Theme ist. Es wird zum Rendern von Inhalten auf unserer Website verwendet, solange für diese Inhalte kein bestimmtes Template entwickelt wurde.“ Da dies eine Standardvorlage ist, halte ich es für eine gute Idee, dort zu beginnen. Dies ist der Inhalt von index.php im Twenty Twenty-One-Theme:

 get_header(); if ( have_posts() ) { // Load posts loop. while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content/content' ); } // Previous/next page navigation. twenty_twenty_one_the_posts_navigation(); } else { // If no content, include the "No posts found" template. get_template_part( 'template-parts/content/content-none' ); } get_footer();

Wie Sie sehen können, haben wir alle Teile, die wir zuvor kommentiert hatten:

• Es schließt den Header mit get_header .
• Es rendert den Inhalt selbst.
• Es schließt die Seite mit get_footer .

Das Interessante hier ist natürlich der „Content“-Bereich in der index.php . Insbesondere sehen wir, dass wir eine kleine Kontrolle haben, um zu wissen, ob wir gültige Inhalte sehen oder nicht ( Funktion have_posts der WordPress-Schleife) und je nachdem, ob dies der Fall ist oder nicht, laden wir eine Teilvorlage ( …/content ) oder ein anderes ( …/content-none ).

Wenn wir uns nun das partielle content.php Template ansehen, sehen wir ungefähr Folgendes:

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> … the_title( … ); … </header> <div class="entry-content"> <?php the_content( … ); wp_link_pages( … ); ?> </div> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer> … </article>

Ziemlich einfach, nicht wahr? Alles, was wir haben, ist eine winzige Vorlage, die entwickelt wurde, um generische WordPress-Inhalte wie beispielsweise einen Blog-Beitrag zu rendern. Beachten Sie, dass das resultierende HTML-Skelett nichts anderes als ein article -Tag mit einem Titel, seinem Inhalt und einer Fußzeile ist, die alle WordPress-Vorlagen-Tags verwenden, um den eigentlichen Inhalt abzurufen.

Warum die WordPress-API großartig ist

Selbst wenn Sie nicht gewusst hätten, dass all diese Funktionen existieren ( get_header , get_footer oder der heutige Stern: get_template_part ), bin ich mir ziemlich sicher, dass Sie Ihren Code nach einem ähnlichen Ansatz organisiert hätten. Schließlich erscheint es ziemlich logisch, eine Vorlage für die Kopfzeile, eine andere für die Fußzeile, eine andere für den Inhalt zu erstellen … und dann eine spezielle Datei oder etwas zu haben, das alles zusammenklebt, oder?

Wenn Sie einem solchen Ansatz gefolgt wären, hätte Ihre index.php -Datei ungefähr so ​​​​ausgesehen:

 require_once 'header.php'; if ( have_posts() ) { // Load posts loop. while ( have_posts() ) { the_post(); require 'template-parts/content.php'; } // Previous/next page navigation. twenty_twenty_one_the_posts_navigation(); } else { // If no content, include the "No posts found" template. require 'template-parts/content-none.php'; } require_once 'footer.php';

das ist sehr ähnlich dem, das wir im Thema Twenty Twenty-One haben. An dieser Stelle fragt man sich also vielleicht: Was bringt es mir, bestimmte WordPress-Funktionen zu nutzen? Ist es nicht dasselbe, PHP require direkt zu verwenden, insbesondere wenn man bedenkt, dass diese Hilfsfunktionen laut WordPress-Dokumentation genau das verwenden?

Nun, der Hauptgrund wird tatsächlich in der Dokumentation selbst erwähnt: Es macht es einfach, ein untergeordnetes Thema zu erstellen. Wenn Sie also ein untergeordnetes Thema erstellen und get_template_part verwenden, sucht WordPress nach der Vorlage im untergeordneten Thema und verwendet, wenn dies nicht der Fall ist, das übergeordnete Thema.

Aber das ist nicht alles! WordPress-Funktionen sind normalerweise voll von Filtern und Aktionen, mit denen Sie das Endergebnis anpassen können. Wenn wir uns zum Beispiel die interne Funktion get_template_part in der Datei wp-includes/general-template.php ansehen:

 function get_template_part( … ) { do_action( "get_template_part_{$slug}", … ); … do_action( 'get_template_part', … ); if ( ! locate_template( … ) ) { return false; } }

Wir werden sehen, dass wir einige Aktionen haben, die Plugins und das Design selbst nutzen können. Und wenn wir den Thread weiter ziehen, können wir sogar sehen, wie WordPress ( locate_template ) die Vorlage findet und lädt, die es am Ende verwenden wird:

 function locate_template( $template_names, … ) { $located = ''; foreach ( $template_names as $name ) { if ( file_exists( STYLESHEETPATH . "/$name" ) ) { $located = …; // in child theme break; } else if ( file_exists( STYLESHEETPATH . "/$name" ) ) { $located = …; // in parent theme break; } else { … } } if ( $located ) { load_template( $located, $require_once, $args ); } return $located; }

Ich hoffe, der heutige Beitrag hat Ihnen geholfen, ein wenig besser zu verstehen, wie WordPress-Themes funktionieren. Ich hoffe auch, dass es Ihnen gezeigt hat, wie Sie etwas über WordPress lernen können, indem Sie die Dokumentation lesen und den Quellcode durchsuchen. Und wenn es dir gefallen hat, teile es mit deinen Freunden und hinterlasse uns einen Kommentar.

Vorgestelltes Bild von Joshua Sortino auf Unsplash.