[Gewusst wie] Hinzufügen eines Widget-Bereichs zu einem beliebigen WordPress-Theme (2021)

Das Standard-WordPress-Theme im Jahr 2014 war Zwanzig Fünfzehn, eine Vorlage mit einer festen Seitenleiste auf der linken Seite, die sich in der mobilen Ansicht in eine Kopfzeile verwandelt, einem minimalen Fußzeilenbereich, großartiger Typografie und einem schönen Bildbereich. Seitdem haben wir die Veröffentlichung von TwentySixteen, TwentySeventeen, TwentyEighteen, TwentyNineteen und das aktuelle defualt-freie Thema gesehen Zwanzigundzwanzig.

Diese Themen sind fantastisch, sie durchlaufen einen ganzen Prozess, um als Standard-WordPress-Thema ausgewählt zu werden. Wir können jedoch verstehen, dass Benutzer es weiterhin anpassen und zu ihrem eigenen machen möchten. 

Da diese Themen normalerweise einige Einschränkungen aufweisen, z. B. eine einzelne Seitenleiste (in WordPress als Widget-fähiger Bereich bezeichnet), zeigen wir Ihnen, wie Sie der Fußzeile ein Widget hinzufügen oder den Code eines Themas optimieren, um weitere Widget-Bereiche hinzuzufügen ein Thema. 

Das Hinzufügen eines Widget-Bereichs zur Fußzeile von TwentyFifteen to TwentyTwenty unterscheidet sich nicht vom Hinzufügen eines Widget-Bereichs in den meisten WordPress-Themen.

Wenn Sie an anderen WordPress-Themes interessiert sind, empfehlen wir Ihnen, sich andere beliebte Themen wie Divi von anzusehen Elegant Themes. Lesen Sie hier unseren vollständigen Test.

Erstellen Sie ein untergeordnetes WordPress-Thema

Wenn Sie die Vorlagendateien eines WordPress-Themas anpassen, um einen Widget-Bereich zu erstellen, empfiehlt es sich, eine zu erstellen Kind theme.

Das Konzept eines untergeordneten Themas ist recht einfach - wir möchten nicht die Möglichkeit aufheben, das Thema auf neu veröffentlichte Versionen zu aktualisieren.

Wenn Sie Anpassungen an einem untergeordneten Thema erstellen, werden Ihre Änderungen eher dem untergeordneten Thema als dem ursprünglichen Thema hinzugefügt. Wenn eine aktualisierte Version des Originalthemas nicht verfügbar ist, können Sie Ihre Kopie des Originalthemas aktualisieren und Ihre Änderungen im untergeordneten Thema beibehalten.

Wenn Sie mehr Tipps und Tricks zu WordPress erfahren möchten, besuchen Sie den Rest des Abschnitts auf CollectiveRay.

1. Erstellen Sie ein untergeordnetes Themenverzeichnis und Dateien 

Erstellen Sie als ersten Schritt einen Ordner im wp-content> themen Mappe. Nennen Sie den Ordner fünfundzwanzig Kind, zwanzig Kind. Es ist jedoch wichtig, dass das untergeordnete Thema der Namenskonvention des übergeordneten Themas folgt.

Also, wenn der Elternteil angerufen wird fünfundzwanzigmuss das Kind gerufen werden fünfundzwanzig Kind. Ebenso, wenn das Thema, das Sie anpassen, aufgerufen wird zwanzigundzwanzigmuss das untergeordnete Thema t heißenzwanzigjähriges Kind.

Nachdem Sie das untergeordnete Thema erstellt haben, müssen Sie zwei zusätzliche Dateien erstellen.

Die Datei, mit der Änderungen an den CSS-Stilen vorgenommen werden, sollte aufgerufen werden style.css. Wir brauchen auch die  functions.php Datei für das untergeordnete Thema, in der wir bestimmte erforderliche Funktionen hinzufügen können.

Diese beiden Dateien befinden sich in dem Ordner mit fünfundzwanzig Kindern oder dem entsprechenden Ordner, den Sie für das untergeordnete Thema erstellt haben.

2. Fügen Sie die Datei für den WordPress-Widget-Bereich hinzu (in der Fußzeile oder wo Sie es bevorzugen).

Da der Widget-Bereich zur Themenfußzeile hinzugefügt werden soll, benötigen Sie eine Datei für den Fußzeilencode.

Der sicherste Weg, eine WordPress-Vorlagendatei zu codieren, besteht darin, von einer vorgefertigten Vorlage auszugehen, dann hinzuzufügen, was Sie möchten, und / oder zu löschen, was Sie nicht möchten.

In diesem Fall nehmen Sie die footer.php aus dem Thema Twenty Fifteen oder dem Thema Twenty Twenty oder wie auch immer das Thema, das Sie anpassen, heißt, und fügen Sie es in Ihr untergeordnetes Thema ein.

3. Fügen Sie den Dateien des untergeordneten Themas Code hinzu, um das Widget zu erstellen

Im Moment haben wir nur leere Dateien, so dass das untergeordnete Thema nichts tun kann.

Damit wir Änderungen vornehmen können, benötigt ein arbeitendes untergeordnetes Thema oben einige Kommentare style.css. Öffnen style.css in Ihrem bevorzugten Code-Editor und fügen Sie dieses Codebit hinzu. 

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyfifteenchild
*/

Der wirklich wichtige Teil hier ist in der Vorlage so ist es im obigen Beispiel Vorlage: fünfundzwanzig. Dies weist WordPress über den Namen des übergeordneten Themas an.

Stellen Sie sicher, dass der Name genau mit dem Ordnernamen des übergeordneten Themas übereinstimmt (Groß- und Kleinschreibung oder Leerzeichen, Bindestriche, Unterstriche usw. sind wichtig: Alles muss genau mit dem Ordnernamen des übergeordneten Themas übereinstimmen).

Als nächstes öffnen functions.php  und fügen Sie das folgende Codebit hinzu.

Obwohl dieser Schritt nicht unbedingt vorgeschrieben ist, wird er dringend empfohlen, da mit diesem Code das untergeordnete Thema das Erscheinungsbild des übergeordneten Themas übernimmt.

Schreiben wir also eine Funktion, die sich in die einbindet Aktions-Hook wp_enqueue_scripts (). Innerhalb der Funktion Sie enqueue das Stylesheet des übergeordneten Themas mit dem Funktion wp_enqueue_style (). 

Dadurch wird sichergestellt, dass das untergeordnete Thema die Stile der übergeordneten Elemente erbt und gleichzeitig eine bestimmte Stilregel ü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 Kinderthema ist meistens fertig!

Besuchen Sie das WordPress Themes Panel in Ihrer WordPress-Installation und Sie sollten sehen, dass Ihr Twenty Fifteen Child-Thema einsatzbereit ist. Klicken Aktivieren und besuchen Sie Ihre Website. Es sollte genauso aussehen wie das übergeordnete Thema.

Hinzufügen des Widget-Bereichs

Jetzt müssen wir den Code hinzufügen, um den Fußzeilen-Widget-Bereich zu definieren. Hier ist der Ausschnitt, der hineingeht functions.php. 

/ ** * Fußzeilen-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', 'zwanzig) -fifteen-child '),' id '=>' sidebar-2 ',' description '=> __ (' Fügen Sie hier Widgets hinzu, um sie in Ihrem Fußzeilenbereich anzuzeigen. ',' Twenty-fünfzehn-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 von Seitenleiste-2 registriert (das Thema Twenty Fifteen hat bereits eine Seitenleiste mit der ID von Seitenleiste-1) und diese Funktion dann in die einbindet Aktions-Hook widgets_init ().

Als nächstes fügen wir die neue Seitenleiste zur Fußzeile hinzu. Öffnen footer.php Geben Sie in einem Code-Editor dieses Snippet 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. In diesem Fall wird die Seitenleiste in einem Div mit der Klasse "Widget-Bereich" angezeigt. 

Als Nächstes müssen Sie zum Widgets-Bereich Ihres WordPress-Backends wechseln, die Seitenleiste mit den Fußzeilen-Widgets suchen und einige Widgets hinzufügen. Speichern Sie die Widgets beim Hinzufügen und überprüfen Sie das Ergebnis.

Oben sehen Sie einige Widgets in der Fußzeile der Fußzeile von Twenty Fifteen Child. Sie können sehen, dass sich der Text zu nahe am oberen Rand des Containers befand und der untere Rand der Widgets zu hoch war. Dieser kleine Ausschnitt style.css wird das Aussehen erheblich verbessern. 

.site-footer .widget {margin: 0; Polsterung: 10% 20% 0; } .site-footer .widget: last-child {margin-bottom: 10%; }}	

Hier ist ein weiteres Beispiel für das Hinzufügen einer weiteren Seitenleiste:

if (is_active_sidebar ('sidebar-2') 
  || is_active_sidebar ('sidebar-3')): 
?> 
  "> 
     
      if (is_active_sidebar ('sidebar-2')) {?> 
         
           
         <?php } 
      if (is_active_sidebar ('sidebar-3')) {?> 
         
           
         
    

Der Code, den Sie verwenden müssen, hängt von dem Thema ab, das Sie in der Realität verwenden.

Ihr WordPress-Fußzeilen-Widget ist fertig!

In diesem Beitrag haben wir gesehen, wie Sie der Fußzeile des Twenty Fifteen WordPress-Themas einen neuen Widget-Bereich hinzufügen. Obwohl wir den Widget-Bereich in der Fußzeile des Themas platziert haben, können Sie diese Logik verwenden, um Widget-Bereiche praktisch überall in einem Thema hinzuzufügen, indem Sie ähnliche Schritte ausführen.

Über den Autor

Autor: David AttardWebsite: https://www.linkedin.com/in/dattard/

David arbeitet seit 18 Jahren in oder um die Online- / Digitalbranche. Er verfügt über umfangreiche Erfahrung in der Software- und Webdesignbranche mit WordPress, Joomla und den sie umgebenden Nischen. Als digitaler Berater konzentriert er sich darauf, Unternehmen durch die Kombination ihrer Website und der heute verfügbaren digitalen Plattformen einen Wettbewerbsvorteil zu verschaffen.