✅ WEB- und WordPress-Nachrichten, Themen, Plugins. Hier teilen wir Tipps und beste Website-Lösungen.

WordPress-Theme-Tutorial für Anfänger – Teil 7: Theme-Setup und ausgewählte Bilder

15

Diese Lektion des WordPress-Theme-Tutorials für Anfänger wird fortgesetzt, indem der grundlegende, erforderliche Code für die Einrichtung des Themas hinzugefügt wird. Wir lernen, Themenunterstützungen hinzuzufügen, und als Ergebnis wird die Featured-Image-Funktionalität von WordPress aktiviert. In dieser Lektion korrigieren wir auch den Titel der Startseite, indem wir unseren ersten Filter anwenden.

Wir werden hauptsächlich in functions.phpDateien arbeiten, die wir in der vorherigen Lektion hinzugefügt haben. Am Ende fügen wir Code für die Ausgabe von vorgestellten Bildern in unseren Vorlagen hinzu.

Theme-Setup

Alle Themen benötigen einen Code zum Einrichten, indem sie WordPress anweisen, bestimmte Funktionen zu aktivieren. Dazu gehören die Aktivierung von Menüs, Widgets, Übersetzungen usw. Dies geschieht üblicherweise in einer „Setup-Theme-Funktion”, die normalerweise an einen bequem benannten Hook angeschlossen ist after_setup_theme. Für einige spezifische Dinge müssen wir den WordPress-Initialisierungs-Hook namens verwenden init.

Notwendigen Einrichtungscode für das Thema schreibenafter_setup_theme

Richten wir eine solche „Setup-Theme-Funktion” in unserem functions.phpein, verbunden mit after_setup_theme:

add_action('after_setup_theme', 'wptutorial_setup_theme'); function wptutorial_setup_theme() {   }

Innerhalb dieser Funktion werden wir eine Reihe gängiger und nützlicher Setup-Funktionen für WordPress-Themes hinzufügen. Bitte platzieren Sie alle folgenden Codeteile in Ihrer Setup-Funktion.

Zuerst müssen wir eine maximale Breite von Bildern und Einbettungen (z. B. Videos) definieren. Dadurch wird sichergestellt, dass beim Einfügen von großen Bildern in Beiträgen die Bilder innerhalb einer bestimmten Breite bleiben. Ich habe es auf 840 Pixel eingestellt (weil ich Platz für die Seitenleiste haben möchte), aber Sie können dies nach Ihren Wünschen anpassen.

$GLOBALS['content_width'] = 840;

Wir sollten WordPress auch darüber informieren, dass das Theme übersetzbar ist und wo es nach Übersetzungsdateien suchen kann. Ich werde im nächsten Schritt dieser Themen-Tutorial-Serie ausführlich auf die Übersetzung des WordPress-Themes eingehen .

load_theme_textdomain('wptutorial', get_stylesheet_directory(). '/lang');

Beachten Sie die Verwendung einer neuen Funktion zum Abrufen Ihres Themenverzeichnisses, get_stylesheet_directory(). Dies ist dem im letzten Schritt sehr ähnlich get_stylesheet_directory_uri(), aber hier benötigen wir den relativen Pfad, nicht die URL.

Dann müssen wir einige „Themenunterstützungen” hinzufügen, die die WordPress-Funktionalität aktivieren, die standardmäßig nicht aktiviert ist.

Das war eine ganze Reihe von add_theme_supportAnrufen! Wie der Name schon sagt, add_theme_supportweist WordPress an, Funktionen zu aktivieren, die standardmäßig nicht aktiviert sind. Zum Beispiel vorgestellte Bilder (‘Post-Thumbnails’), Unterstützung für HTML5-Tags und die benutzerdefinierte Logo-Funktion von WordPress im Customizer (passe das gewünschte Logo-Bild an, wenn du möchtest!).

Es gibt noch viele weitere coole Funktionen, daher empfehle ich Ihnen, die Dokumentation für add_theme_support zu überfliegen. Zum Beispiel gibt es einen ziemlich neuen, title-tag, der den Titel-Tag behandelt. Ich habe es in diesem Tutorial weggelassen, da wir das Titel-Tag bereits header.phpmanuell hinzugefügt haben.

Denken Sie daran, dass Sie, wenn Sie Unterstützung für hinzufügen title-tag, das Titel-Tag aus Ihrer Header-Datei entfernen sollten, um zu verhindern, dass Sie doppelte Titel-Tags erhalten.

Schließlich fügen wir ein paar add_theme_supportfür das neue Gutenberg in WordPress hinzu. Wir werden Unterstützung für breite Abschnitte hinzufügen, Funktionen für Blockstile aktivieren und responsive Einbettungen unterstützen:

add_theme_support('wp-block-styles'); add_theme_support('align-wide'); add_theme_support('responsive-embeds');

Das Endergebnis

Hier ist die endgültige Setup-Funktion in unserem functions.php:

Nach dem Speichern sollten Sie nun in der Lage sein, vorgestellte Bilder zu Beiträgen im Admin hinzuzufügen! Lassen Sie uns eine weitere Themenkorrektur in unserem functions.phphinzufügen, bevor wir unseren Vorlagen ausgewählte Bilder hinzufügen. Denken Sie daran, dass wp_titlein unserem header.phpstandardmäßig nichts auf der Titelseite wiedergegeben werden kann? Lassen Sie uns das beheben.

Hinzufügen eines Filters zuwp_title

Lassen Sie uns unsere erste richtige Filteränderungsfunktion hinzufügen, indem wir add_filter(). Der Filter, mit dem wir uns verbinden, hat denselben Namen wie die Funktion, die wir für WordPress verwendet haben, um den Seitentitel dynamisch abzurufen. wp_title. Was wir beheben werden, ist sicherzustellen, dass der Titel auf der Titelseite nicht leer ist – was in WordPress standardmäßig der Fall ist. Wenn Sie sich auf der Startseite befinden, möchten wir, dass sie mit dem Namen der WordPress-Site gefüllt wird.

Denken Sie daran, in Ihren Filterfunktionen immer die gefilterte Variable zurückzugeben ! Alle Filter ändern eine Variable, und wenn Sie nichts zurückgeben, wird die Variable undefiniert. Dies kann viele Probleme verursachen. Weitere Informationen zu Filtern finden Sie in meinem Beitrag, in dem alles über Hooks und Filter erklärt wird .

Wissen, wann der Titel angepasst werden muss

Wir möchten die Titelvariable nur anpassen, wenn wir uns auf der Titelseite befinden. Für alle anderen Seiten wollen wir es in Ruhe lassen (einfach so zurückgeben, wie es ist). Aber woher wissen wir, wann wir auf der Titelseite sind?

Wir können die bedingten Tags von WordPress nutzen, eine ganze Reihe nützlicher Funktionen, die basierend auf einer Bedingung wahr oder falsch zurückgeben. Diese werden am häufigsten verwendet, um zu fragen, ob wir uns auf einer bestimmten Seite oder Vorlage befinden. Wir können einfach fragen: „Sind wir auf der Titelseite?”. Wenn diese Methode true zurückgibt, ändern wir nur dann die Titelvariable.

Es ist erwähnenswert, dass es zwei Bedingungs-Tags für die Titelseite gibt, nämlich is_home()und is_front_page().Diese unterscheiden sich je nach Ihrer Einstellung „Lesen” – ob Ihre Titelseite die neuesten Beiträge anzeigt oder nicht oder auf eine feste Seite eingestellt ist. Wenn Sie diesem Tutorial mit einer brandneuen WordPress-Installation mit der Standardeinstellung folgen, verwenden Sie is_front_page().

Abrufen des Namens der WordPress-Site

Jetzt wissen wir, welchen Filter wir verwenden müssen und wie wir sicherstellen können, dass wir den Titel nur ändern, wenn wir an der richtigen Stelle sind. Aber wie soll der Titel lauten? Normalerweise ist der Seitentitel für die Startseite der Name Ihrer WordPress-Site. Aber wie kommen wir an diese Informationen?

Zum Abrufen von Informationen über die aktuelle WordPress-Installation verwenden wir die bloginfo()Funktion. Als Parameter fordern wir die Rückgabe des Site-Namens an, was durch Setzen des Parameters auf ‘ name‘ erfolgt. Und weil dies ein Filter ist und wir ihn zurückgeben und nicht wiederholen müssen, verwenden wir seine Schwestermethode get_bloginfo(). Beim Aufrufen bloginfo()wird immer ein Echo ausgegeben.

add_filter('wp_title', 'wptutorial_title_filter'); function wptutorial_title_filter($title) { if (is_front_page()) { return get_bloginfo('name'); } return $title; }

Wenn Sie Ihre Startseite aktualisieren, sollten Sie sehen, dass Ihr Site-Name im <title>Tag (und im Browser-Tab) erscheint! Unser Filter wirkt sich nur auf die Titelseite aus, sodass alle anderen Seiten, wie z. B. einzelne Posts, immer noch dasselbe zurückgeben sollten wie zuvor. der Beitragstitel.

Ausgeben von vorgestellten Bildern in Vorlagendateien

Als wir früher die Themenunterstützung eingerichtet haben, haben wir die Unterstützung für vorgestellte Bilder hinzugefügt. Wenn dies aktiviert ist, können wir diese Bilder jetzt in unseren Vorlagen ausgeben. Lass uns das jetzt tun!

Öffnen Sie sich index.phpund finden Sie einen Platz für sie in der Schleife. Ich habe mich dafür entschieden, es nach dem Titel zu platzieren, aber es liegt an Ihnen, wo Sie sie haben möchten. Mit der Funktion the_post_thumbnail()geben Sie das Bild aus. Es wird empfohlen, zuerst zu prüfen, ob der Beitrag überhaupt ein Beitragsbild enthält, was wir tun, indem wir verwenden has_post_thumbnail().

Wenn Ihr Beitrag kein Beitragsbild enthält, wird nach dem Titel nichts ausgegeben. Wenn Sie jedoch ein hervorgehobenes Bild in einem Ihrer Beiträge festlegen, wird ein Tag mit dem ausgewählten Bild the_post_thumbnail()ausgegeben. <img>Diese Funktion akzeptiert einige zusätzliche Parameter. Sie können beispielsweise festlegen, welche Bildgröße Sie verwenden möchten, und die dem Bild hinzugefügten Attribute steuern. Wie üblich ermutige ich Sie, einen kurzen Blick auf die Dokumentation zu werfen und sie nach Ihren Wünschen anzupassen.

Dokumentation der angewandten Methoden

Aufnahmequelle: awhitepixel.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen