WordPress-Theme-Tutorial für Anfänger – Teil 3: Dynamische Inhalte
In dieser Lektion des WordPress-Theme-Tutorials für Anfänger lernen wir Hooks in WordPress kennen und fügen unserem Theme einige Hooks hinzu, die erforderlich sind, damit ein Theme ordnungsgemäß mit WordPress und Plugins funktioniert. Wir werden auch mit dem Zugriff auf dynamische Inhalte von WordPress in unserem Header beginnen, z. B. um automatisch den aktuellen Seitentitel zu erhalten.
Zuerst müssen wir ein wenig über Hooks in WordPress lernen. Hooks sind eine Kernfunktion, mit der Sie sich vertraut machen müssen. Ich bin kein Fan davon, nur eine ganze Reihe von Codes zu zeigen, in die Sie kopieren und einfügen müssen, ohne zu wissen, was es wirklich tut. Wenn Sie diesem Tutorial folgen, möchten Sie dies richtig lernen, oder?
Keine Sorge, ich mache es jetzt kurz. Wir werden später in diesem Tutorial mehr darüber erfahren.
Haken in WordPress
Zusamenfassend; Da WordPress den gesamten Code zum Laden und Rendern einer Seite ausführt, gibt es bestimmte „Checkpoints” – die wir Hooks nennen. An diesen Punkten erlaubt WordPress Entwicklern, ihren eigenen Code zu ändern oder hinzuzufügen. WordPress hat eine ganze Reihe von „Checkpoints” definiert, an denen, jeweils mit einem eindeutigen Namen. Wenn Sie den Namen kennen, können Sie an diesen Checkpoints Ihren eigenen Code hinzufügen. Und so einfach WordPress anweisen, Ihren Code auszuführen, wenn es diesen Checkpoint als Teil seines Prozesses erreicht.
Es gibt zwei Arten von Haken; Aktionen und Filter. Aktionen sind Punkte im Code, an denen Sie benutzerdefinierten Code hinzufügen können, z. B. etwas ausgeben oder etwas für Ihre eigenen Zwecke tun. Filter sind Punkte im Code, an denen Sie eine bestimmte Variable ändern können, bevor sie verwendet oder ausgegeben wird. Sie sind sich sehr ähnlich, aber Filter sind an eine bestimmte Variable angehängt und Aktionen nicht.
Plugins, Themes und WordPress selbst können ihren Code mithilfe add_action()von Aktionen und add_filter()Filtern „einhängen”. Diese beiden Funktionen weisen WordPress an, den Hook-Code auszuführen, wenn die Ausführung diese Hooks erreicht.
Um Hooks zu definieren, verwenden Sie diese do_action()für Aktionen und apply_filters()für Filter.
Für alle, die daran interessiert sind, mehr zu erfahren, habe ich einen weiteren Beitrag, der detailliert auf Hooks in WordPress eingeht.
Ein WordPress-Theme muss einige bestimmte wichtige Hooks (Aktionen) enthalten. Diese Hooks ermöglichen es WordPress, Plugins und unserem Theme selbst, sich einzuklinken und kritische Dinge zu tun. Schauen wir uns die kritischen Haken an, die wir hinzufügen müssen.
Alle WordPress-Themes müssen zwei Hooks in den Templates haben. Eine Aktion muss in der Kopfzeile (innerhalb des <head>Tags) und eine andere in der Fußzeile (direkt vor dem schließenden </body>Tag) platziert werden. Diese beiden Hooks sind absolut notwendig, damit WordPress, Ihr Theme und alle Plugins ihre Skripte und Stilcodes zu Ihrem Theme hinzufügen können.
Die Hooks, die wir brauchen, sind wp_headund wp_footerfür die Kopf- bzw. Fußzeile.
Normalerweise rufen wir, wenn wir einen Hook ausführen wollen do_action(<hook name>). Aber weil diese beiden Hooks so wichtig sind, hat WordPress sie für uns vereinfacht, indem sie in einen einfachen Funktionsaufruf eingefügt wurden. Für diese beiden Haken können Sie also einfach wp_head()und verwenden wp_footer(). Im Hintergrund führen diese beiden die do_action().
Lassen Sie uns diese beiden Hooks (Funktionsaufrufe) zu unseren Kopf- und Fußzeilenvorlagen hinzufügen und sehen, was passiert.
Klicken Sie auf Aktualisieren auf Ihrem Frontend. Wenn Sie eingeloggt sind, sollte jetzt die Admin-Leiste von WordPress erscheinen! Das bedeutet, dass WordPress seine Skripte und Stile jetzt erfolgreich zu Ihrem Design hinzufügen kann.
Sie können Ihre HTML-Quelle überprüfen und feststellen, dass Ihr Header jetzt ziemlich viel Code enthält. Dies ist Code, den Sie nicht zu Ihrem Design hinzugefügt haben. Wie Sie sehen können, verwendet WordPress selbst die Hooks, die wir hinzugefügt haben, um seine eigenen Sachen zu machen.
Lassen Sie uns von Hooks fortfahren und untersuchen, wie wir Inhalte dynamisch aus WordPress abrufen und diese in unserem Header ausgeben können.
Dynamischer Inhalt im Header
Lassen Sie uns WordPress anweisen, den Dokumenttitel (für das <title>Tag) dynamisch festzulegen. Dazu verwenden wir eine Funktion (die übrigens einen Filter hat) namens wp_title(). Wie wir oben gelernt haben wp_title(), können Sie, da es sich um einen Filter handelt, WordPress oder Plugins die Ausgabe ändern. Wir werden später in diesem Tutorial einen Filter hinzufügen.
Die Funktion wp_title()akzeptiert mehrere Argumente, die Sie nach Belieben anpassen können, aber jetzt füge ich eine leere Zeichenfolge hinzu, sodass nur der Titel der Seite angezeigt wird, auf der wir uns gerade befinden.
Wechseln Sie Ihr <title>Tag header.phpin dieses aus:
Die Begeisterten von Ihnen haben vielleicht bemerkt, dass die Titelseite keinen Titel generiert. Dies ist das Standardverhalten von WordPress, das wir später in diesem Tutorial beheben werden (wir werden dies mit Hilfe des Filters tun). Wenn Sie einen einzelnen Beitrag oder eine einzelne Seite besuchen, sollten Sie den Titel des Beitrags erhalten.
WordPress hat eine raffinierte Funktion, die dynamisch eine Reihe von Klassen für das <body>Tag generiert, je nachdem, auf welcher Seite wir uns befinden; genannt body_class. Aktualisieren Sie das <body>Tag header.phpin diesem:
Aktualisieren Sie und sehen Sie sich alle Klassen an, die dem <body>Tag hinzugefügt wurden. Schauen Sie sich auf verschiedenen Seiten um (Startseite, Single, Kategorie). Alle diese Klassen sind sehr nützlich für das Styling und um verschiedene ähnliche Teile zu unterscheiden. Sie werden höchstwahrscheinlich einige davon in Ihrem CSS verwenden.
Um guten HTML-Praktiken zu folgen, sollten wir auch über die Seitensprache im HTML informieren. Dazu verwenden wir eine WordPress-Funktion, um die Sprache aus den Einstellungen abzurufen; Sprachattribute.
Und schließlich möchte ich einige Meta-Tags und solche hinzufügen, die nicht WordPress-spezifisch sind, aber gängigen Webdesign-Praktiken folgen. header.phpSo sieht die vollständige Datei aus:
Für den nächsten Schritt in diesem Tutorial verlassen wir es header.phpund tauchen index.phpein, um zu erfahren, wie Sie dynamischere Inhalte wie Beiträge abrufen können.