Das Standard-WordPress-Theme im Jahr 2014 war Zwanzig Fünfzehn, eine Vorlage mit einer festen Seitenleiste links, die sich in der mobilen Ansicht in eine Kopfzeile verwandelt, einem minimalen Fußzeilenbereich, toller Typografie und einem schönen Bereich für ausgewählte Bilder. Seitdem wurden TwentySixteen, TwentySeventeen, TwentyEighteen, TwentyNineteen und das aktuelle kostenlose Standard-Theme veröffentlicht. ZwanzigZwanzig.
Diese Designs sind großartig. Sie durchlaufen einen ganzen Prozess, um als Standard-WordPress-Design ausgewählt zu werden. Wir können jedoch verstehen, dass Benutzer es dennoch anpassen und zu ihrem eigenen machen möchten.
Da diese Designs normalerweise einige Einschränkungen aufweisen, beispielsweise eine einzelne Seitenleiste (die in WordPress als Widget-fähiger Bereich bezeichnet wird), zeigen wir Ihnen, wie Sie der Fußzeile ein Widget hinzufügen oder den Code eines Designs anpassen, um einem Design weitere Widget-Bereiche hinzuzufügen.
Das Hinzufügen eines Widget-Bereichs zur Fußzeile von TwentyFifteen bis TwentyTwenty unterscheidet sich nicht vom Hinzufügen eines Widget-Bereichs in den meisten WordPress-Themes.
Wenn Sie sich für andere WordPress-Themes interessieren, empfehlen wir Ihnen, sich andere beliebte Themes wie Divi von Elegant Themes anzusehen. Lesen Sie hier unseren vollständigen Test.
{autotoc}
Erstellen Sie ein WordPress Child Theme
Wenn Sie die Vorlagendateien eines WordPress-Themes anpassen, um einen Widget-Bereich zu erstellen, empfiehlt es sich, einen Kind theme.
Das Konzept eines untergeordneten Designs ist ziemlich einfach: Wir möchten die Möglichkeit nicht beeinträchtigen, das Design auf neu veröffentlichte Versionen zu aktualisieren.
Wenn Sie Anpassungen an einem untergeordneten Design vornehmen, werden Ihre Änderungen dem untergeordneten Design und nicht dem ursprünglichen Design hinzugefügt. Wenn eine aktualisierte Version des ursprünglichen Designs verfügbar ist, können Sie Ihre Kopie des ursprünglichen Designs aktualisieren und Ihre Änderungen im untergeordneten Design beibehalten.
Wenn Sie weitere Tipps und Tricks zu WordPress erfahren möchten, besuchen Sie den Rest des Abschnitts auf CollectiveRay.
1. Child-Theme-Verzeichnis und -Dateien erstellen
Erstellen Sie als ersten Schritt einen Ordner im wp-content> themen Ordner. Nennen Sie den Ordner twentyfifteen-child, twentytwenty-child. Es ist jedoch wichtig, dass das untergeordnete Design der Namenskonvention des übergeordneten Designs entspricht.
Wenn also das übergeordnete Element aufgerufen wird fünfzehnundzwanzigmuss das Kind angerufen werden 251-Kind. Wenn das Design, das Sie anpassen, zwanzigzwanzig, das Child-Theme muss t heißenzwanzigzwanzig Kind.
Nachdem Sie das untergeordnete Design erstellt haben, müssen Sie zwei zusätzliche Dateien erstellen.
Die Datei, die für Änderungen an den CSS-Stilen verwendet wird, sollte heißen style.cssWir brauchen auch die functions.php Datei für das untergeordnete Design, in der wir bestimmte erforderliche Funktionen hinzufügen können.
Diese beiden Dateien befinden sich im Ordner „twentyfifteen-child“ oder im entsprechenden Ordner, den Sie für das untergeordnete Design erstellt haben.
2. Fügen Sie die Datei für den WordPress-Widget-Bereich hinzu (in der Fußzeile oder wo immer Sie möchten).
Da der Widget-Bereich zum Theme-Footer hinzugefügt werden soll, benötigen Sie eine Datei für den Footer-Code.
Der sicherste Weg, eine WordPress-Vorlagendatei zu codieren, besteht darin, mit einer vorgefertigten Vorlage zu beginnen und dann hinzuzufügen, was Sie möchten, und/oder zu löschen, was Sie nicht möchten.
Nehmen Sie in diesem Fall die footer.php aus dem Twenty Fifteen-Design oder dem Twenty Twenty-Design oder wie auch immer das Design heißt, das Sie anpassen, und fügen Sie es in Ihr untergeordnetes Design ein.
3. Fügen Sie den Dateien des untergeordneten Designs Code hinzu, um das Widget zu erstellen
Im Moment haben wir nur leere Dateien, daher kann das untergeordnete Design derzeit nichts tun.
Damit wir Änderungen vornehmen können, benötigt ein funktionierendes Child-Theme einige Kommentare oben im style.css. Öffnen style.css in Ihrem bevorzugten Code-Editor und fügen Sie diesen Code hinzu.
/*Theme Name: Twenty Fifteen ChildTheme URI: http://example.com/twenty-fifteen-child/Description: Twenty Fifteen Child ThemeAuthor: John DoeAuthor URI: http://example.comTemplate: twentyfifteenVersion: 1.0.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-readyText Domain: twentyfifteenchild*/
Der wirklich wichtige Teil hier ist in der Template Im obigen Beispiel ist es also Vorlage: twentyfifteen. Dadurch wird WordPress über den Namen des übergeordneten Designs informiert.
Stellen Sie sicher, dass der Name genau mit dem Ordnernamen des übergeordneten Designs übereinstimmt (Groß- und Kleinschreibung sowie Leerzeichen, Bindestriche, Unterstriche usw. sind wichtig: Alles muss genau mit dem Ordnernamen des übergeordneten Designs übereinstimmen).
Als nächstes öffnen functions.php und fügen Sie den folgenden Code hinzu.
Obwohl dieser Schritt nicht unbedingt erforderlich ist, wird er dringend empfohlen, da das untergeordnete Design mit diesem Code das Erscheinungsbild seines übergeordneten Designs übernimmt.
Schreiben wir also eine Funktion, die sich in die wp_enqueue_scripts() Aktions-Hook. Innerhalb der Funktion enqueue das Stylesheet des übergeordneten Designs mithilfe der Funktion wp_enqueue_style().
Dadurch wird sichergestellt, dass das untergeordnete Design die Stile seines übergeordneten Designs übernimmt und gleichzeitig alle spezifischen Stilregeln in seinem eigenen Design überschreibt. style.css Datei.
<?php
//Import parent styles the right way and add other stylesheets if necessary.
function twenty_fifteen_child_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twenty_fifteen_child_styles' );
Ihr untergeordnetes Design ist fast fertig!
Besuchen Sie das Themen Panel in Ihrer WordPress-Installation und Sie sollten Ihr Twenty Fifteen Child-Theme einsatzbereit sehen. Klicken Sie auf Mehr erfahren und besuchen Sie Ihre Website. Es sollte genau so aussehen wie das übergeordnete Design.
Hinzufügen des Widget-Bereichs
Nun müssen wir den Code hinzufügen, um den Footer-Widget-Bereich zu definieren. Hier ist der Codeausschnitt, der in functions.php.
/** * Footer-Widget-Bereich registrieren. * * @since Twenty Fifteen Child 1.0 * * @link https://codex.wordpress.org/Function_Reference/register_sidebar */ function twentyfifteen_child_widgets_init() { register_sidebar( array( 'name' => __( 'Footer-Widgets', 'twenty-fifteen-child' ), 'id' => 'sidebar-2', 'description' => __( 'Fügen Sie hier Widgets hinzu, die in Ihrem Footer-Bereich angezeigt werden sollen.', 'twenty-fifteen-child' ), 'before_widget' => ' ', 'after_widget' => ' ', 'before_title' => ' ', 'after_title' => ' ', ) ); } add_action( 'widgets_init', 'twentyfifteen_child_widgets_init' );
Der obige Code fügt eine Funktion hinzu, die eine Seitenleiste mit der ID „sidebar-2“ registriert (das Twenty Fifteen-Design hat bereits eine Seitenleiste mit der ID „sidebar-1“) und hängt diese Funktion dann in die widgets_init() Aktions-Hook.
Als nächstes fügen wir die neue Seitenleiste zur Fußzeile hinzu. Öffnen footer.php in einem Code-Editor und geben Sie diesen Ausschnitt direkt unter dieser Codezeile ein: <footer id="colophon" class="site-footer" role="contentinfo">.
Der obige Code prüft zunächst, ob die Seitenleiste 2 Widgets enthält. Wenn ja, zeigt er die Seitenleiste innerhalb eines Div mit der Klasse „Widget-Bereich“ an.
Als Nächstes öffnen Sie die Widgets-Leiste Ihres WordPress-Backends, suchen die Footer-Widgets-Seitenleiste und fügen dort einige Widgets hinzu. Speichern Sie die hinzugefügten Widgets und überprüfen Sie das Ergebnis.
Oben sind einige Widgets in der Fußzeilen-Seitenleiste von Twenty Fifteen Child zu sehen. Man sieht, dass der Text zu nah am oberen Rand des Containers und der untere Rand der Widgets zu hoch war. Dieser kleine Ausschnitt in style.css wird das Erscheinungsbild erheblich verbessern.
.site-footer .widget { Rand: 0; Polsterung: 10 % 20 % 0; } .site-footer .widget:last-child { Rand unten: 10 %; }
Hier ist ein weiteres Beispiel für das Hinzufügen einer weiteren Seitenleiste:
wenn ( ist_aktive_Seitenleiste( 'Seitenleiste-2' )
|| is_active_sidebar( 'sidebar-3' ) ) :
?>
">
wenn ( ist_aktive_Seitenleiste( 'Seitenleiste-2' ) ) { ?>
<?php }
wenn ( ist_aktive_Seitenleiste( 'Seitenleiste-3' ) ) { ?>
Der Code, den Sie verwenden müssen, hängt von dem Design ab, das Sie tatsächlich verwenden.
Ihr WordPress-Fußzeilen-Widget ist fertig!
In diesem Beitrag haben wir gesehen, wie man einen neuen Widget-Bereich in die Fußzeile des WordPress-Themes Twenty Fifteen einfügt. Obwohl wir den Widget-Bereich in der Fußzeile des Themes platziert haben, können Sie diese Logik verwenden, um Widget-Bereiche praktisch überall im Theme hinzuzufügen, indem Sie ähnliche Schritte befolgen.
