So fügen Sie eine Seitenleiste zu WordPress hinzu » Ultimative Schritt-für-Schritt-Anleitung

Wenn Sie Ihre WordPress-Site erstellen, sollten Sie eine Seitenleiste als einen der Layout-Abschnitte Ihrer WordPress-Site hinzufügen. Das Erstellen einer Seitenleiste in einer einfachen HTML-Site ist einfach, da Sie nur die Seitenleisten-Tags <aside> </aside> verwenden müssen, aber um eine Seitenleiste zu WordPress hinzuzufügen, benötigen Sie einen anderen Ansatz.

Seitenleisten-Vorlagen-Tag: Wie die Seitenleiste in WordPress angezeigt wird

Es ist wichtig, dass Sie sich daran erinnern, dass WordPress mit Template-Tags arbeitet und die Kopfzeile mit der Funktion get_header() aufgerufen wird, während die Fußzeile mit der Funktion get_footer() aufgerufen wird. Für die Seitenleiste wird sie mit dem Template-Tag get_sidebar() angezeigt.

Dieses Vorlagen-Tag kann überall dort hinzugefügt werden, wo Sie die WordPress-Seitenleiste hinzufügen möchten. Aber bevor Sie beginnen, die WordPress-Sidebar anzuzeigen, müssen wir lernen, wie sie erstellt wird, damit sie in Ihrem Designcode vorhanden ist, bevor Sie sie in den Vorlagen aufrufen können.

Es gibt zwei Hauptschritte, die Sie befolgen sollten, um eine Seitenleiste in WordPress hinzuzufügen; diese Schritte umfassen: Registrieren der Seitenleiste, Aufrufen der Seitenleiste

So fügen Sie Schritt für Schritt eine Seitenleiste zu WordPress hinzu

Damit Sie die neue Seitenleiste erfolgreich zu WordPress hinzufügen oder eine benutzerdefinierte Seitenleiste in WordPress erstellen können, müssen Sie die folgenden Schritte ausführen:

1. Erstellen Sie zunächst eine Sicherungskopie Ihres WordPress-Themes
2. Erstellen Sie ein Child-Theme aus Ihrem übergeordneten WordPress-Theme und das Child-Theme sollte die Datei functions.php haben
3. In dieser Datei functions.php deines Child-Themes verwendest du die Funktion register_sidebar(), um die Seitenleiste zu erstellen.
4. Erstellen Sie die Datei sidebar.php und fügen Sie dieser Datei die Funktion dynamic_sidebar() mit dem Namen der Seitenleiste wie folgt hinzu – dynamic_sidebar( 'sidebar-1' ) wobei sidebar-1 die ID der Seitenleiste ist, die Sie bei der Registrierung der Seitenleiste hinzugefügt haben.
5. In Ihren Theme-Template-Dateien können Sie nun die Sidebar mit dem Template-Tag get_sidebar() aufrufen.
6. Wenn Sie eine benutzerdefinierte Seitenleiste erstellt haben, können Sie die Funktion dynamic_sidebar() verwenden, um die benutzerdefinierte Seitenleiste anzuzeigen.

Anatomie einer WordPress-Sidebar

Um im Detail zu verstehen, wie die Seitenleiste in WordPress funktioniert, müssen Sie lernen, wie der Seitenleistencode auf verschiedene WordPress-Designdateien verteilt ist.

WordPress Sidebar-Funktionen

Es ist wichtig zu wissen, dass die drei WordPress-Funktionen, die sich auf das Hinzufügen der WordPress-Seitenleiste beziehen, folgende sind:

• Seitenleiste registrieren – register_sidebar()
• Dynamische Seitenleiste – dynamic_sidebar()
• Seitenleiste abrufen – get_sidebar()

Seitenleiste registrieren – Schritt Eins

Diese Funktion register_sidebar() ist die erste Funktion, die die Seitenleiste erstellt und befindet sich in der Datei functions.php Ihres Themes.

Wenn Sie die Datei functions.php Ihres Themas öffnen, sollten Sie diese Funktion register_sidebar() sehen, die die verschiedenen Seitenleisten registriert, die in Ihrem Thema angezeigt werden.

Wie im Fall des Standard-WordPress-Designs Twenty seventeen können Sie im Bild unten den Code sehen, der die Seitenleisten für dieses Design registriert:

Im Grunde genommen ist diese Funktion diejenige, die alles in Gang bringt

Seitenleistenparameter registrieren

Die Registerseitenleistenfunktion wird als eine Funktion ausgedrückt, die die verschiedenen Argumente annimmt, die in der Datenform eines Arrays oder einer Zeichenfolge vorliegen können. Sie lässt sich allgemein wie folgt ausdrücken:

register_sidebar( array|string $args = array() )

Das Folgende ist ein Bild der Funktion register_sidebar, wie sie in einem WordPress-Design verwendet wird, wo die verschiedenen Parameter dem Array hinzugefügt werden, das innerhalb des Funktionsaufrufs übergeben wird:

Diese WordPress-Funktion hat verschiedene Argumente, die sie akzeptieren kann, die entweder ein PHP-String oder ein PHP-Array sein können. Zu den Argumenten gehören:

• Name – das ist der Name oder der Titel der Seitenleiste, es sollte eine Zeichenfolge sein.
• ID – Dies ist eine eindeutige Kennung der Seitenleiste, die Sie mit der Funktion dynamic_sidebar () verwenden, um die Seitenleiste aufzurufen.
• Beschreibung – Dies ist die Beschreibung der Seitenleiste, die in der Widgets-Oberfläche angezeigt wird, und es ist eine Zeichenfolge.
• Klasse Dies ist ein Argument, um eine zusätzliche CSS-Klasse für die Seitenleiste hinzuzufügen, die Ihnen beim Styling hilft.
• Before_widget – das ist der HTML-Inhalt, der hinzugefügt wird, bevor jede der Seitenleisten ausgegeben wird
• After_widget – das ist der HTML-Inhalt, der hinzugefügt wird, nachdem jede der Seitenleisten ausgegeben wurde
• Before_title Dies ist der HTML-Inhalt, der dem Titel der Seitenleiste hinzugefügt wird, wenn er angezeigt wird, und der Standardwert ist normalerweise das öffnende HTML-Tag <h2>.
• After_title Dies ist der HTML-Inhalt, der dem Titel der Seitenleiste hinzugefügt wird, wenn er angezeigt wird, und der Standardwert ist normalerweise das öffnende HTML-Tag <h2>.

Diese Funktion wird der Datei functions.php hinzugefügt und registriert die WordPress-Seitenleisten mit einem Action-Hook wie dem unten geteilten:

add_action( 'widgets_init', ' njengah_tutorial_sidebars' ' );

Um eine Seitenleiste zu registrieren, müssen wir uns mit dem Widgets_init-Ereignis verbinden und wir haben die Callback-Funktion mit einem Namen unserer Wahl, wie in diesem Fall haben wir die Callback-Funktion als 'njengah_tutorial_sidebars'

Der vollständige Code, den Sie Ihrer Datei functions.php hinzufügen sollten, um die Seitenleiste zu registrieren, lautet wie folgt:

 <?php

//Callback-Funktion 

Funktion njengah_register_sidebar_tutorial() {
	
	//Sidebar-Funktion registrieren - https://developer.wordpress.org/reference/functions/register_sidebar/
	register_sidebar(
		Reihe (
			'name' => __( 'Seitenleistenbeispiel', 'textdomain' ),
			'id' => 'Seitenleiste-1',
			'description' => __( 'Widgets hier hinzufügen, damit sie in Ihrer Seitenleiste in Blogbeiträgen und Archivseiten erscheinen.', 'textdomain' ),
			'before_widget' => '<Abschnitts-ID="%1$s" class="Widget %2$s">',
			'after_widget' => '</section>',
			'before_title' => '<h2 class="widget-title">',
			'after_title' => '</h2>',
		)
	);
	
} 

// Action-Hook 

add_action( 'widgets_init', 'njengah_register_sidebar_tutorial' );

Dynamische Seitenleiste – Schritt zwei

Diese Funktion dynamic_sidebar() ruft nun die Seitenleiste auf, die wir oben in Schritt eins registriert haben, und der Code wird in die Datei sidebar.php oder eine andere Datei eingefügt, in der wir die Seitenleiste anzeigen möchten, die wir im ersten Schritt erstellt haben.

Der allgemeine Ausdruck der Funktion dynamic_sidebar() lautet wie folgt:

dynamic_sidebar( int|string $index = 1 )

Diese Funktion akzeptiert ein Integer- oder ein String-Argument, und dies kann entweder der Name oder die ID-Parameter sein, die beim Registrieren der Seitenleiste im ersten Schritt verwendet werden.

Im Standard-WordPress-Theme Twenty Seventeen sehen Sie beim Öffnen der Datei sidebar.php die Funktion dynamic_sidebar(), wie im Bild unten gezeigt:

In diesem Fall können Sie sehen, dass wir den id-Parameter der Funktion register_sidebar an die Funktion dynamic_sidebar übergeben , damit wir diese Seitenleiste als Standardseitenleiste anzeigen können. Wie im Bild unten gezeigt:

Wenn wir diese Seitenleiste als benutzerdefinierte Seitenleiste registrieren würden, würden wir den obigen Code verwenden, um in allen Themenvorlagendateien anzuzeigen, die Folgendes enthalten können: Kopfzeile, Fußzeile, Körper und so weiter. Der Code zum Anzeigen der Seitenleiste sollte also wie folgt lauten:

 <?php if ( is_active_sidebar( 'custom' ) ) : ?>
  <div id="Seitenleiste">
    <?php dynamic_sidebar( 'benutzerdefiniert' ); ?>
   </div>
<?php endif; ?>

Wie Sie in sehen können, verwenden wir eine if-Anweisung, um zu überprüfen, ob die Seitenleiste aktiv ist, und die Funktion, die wir hier verwenden, ist is_active_sidebar() . Diese Funktion findet einfach heraus, ob die in dynamic_sidebar() übergebene Seitenleiste verwendet wird. Dies ist eines der bedingten Tags von WordPress.

Holen Sie sich die Seitenleiste – Schritt drei

Wenn Sie die Standard-WordPress-Seitenleiste in einem Design erstellen, müssen Sie sich registrieren , die Datei sidebar.php erstellen und schließlich das Template-Tag get_sidebar() verwenden , um die Seitenleiste in die Vorlage zu laden.

Die get_sidebar kann verwendet werden, um verschiedene Seitenleisten auf verschiedenen Seiten anzuzeigen, da die Funktion standardmäßig ein Zeichenfolgenargument akzeptiert, das dem Namen der Seitenleiste entspricht. Der Name, den Sie zum Registrieren der Seitenleiste oder des ID-Parameters verwendet haben, wie im obigen Schritt beschrieben.

get_sidebar( string $name = null )

Wenn Sie also eine Seitenleiste mit dem Namen " cool-sidebar " haben, können Sie die Seitenleiste in einer benutzerdefinierten Seitenvorlage wie folgt aufrufen:

get_sidebar('cool-sidebar');

Sie können auch mehrere Seitenleisten für jede Seite haben und Sie können eine if/else-Anweisung verwenden, um jede der Seitenleisten auf verschiedenen Seiten bedingt anzuzeigen, wie in diesem Code, wo wir drei Seitenleisten haben; eine für die Startseite, eine weitere für 404 und die Standardseitenleiste:

 if ( is_home() ) :

      get_sidebar( 'home' );

   elseif ( is_404() ) :

      get_sidebar( '404' );

   anders :

     get_sidebar();

endif;

WordPress-Sidebar-Dateien

Es ist ebenso wichtig zu wissen, dass die sieben gängigen WordPress-Designdateien, in denen der Sidebar-Code hinzugefügt wird, folgende sind:

• functions.php File
• sidebar.php File
• Pages Files
• Posts Files
• Custom Posts Type Files
• footer.php File
• header.php File

Der Code kann auch Plugins hinzugefügt werden, in denen Sie Seitenleisten-Widgets wie einige der gängigsten WordPress-Widget-Plugins registrieren und anzeigen.

Wenn Sie ein WordPress-Entwickler oder ein WordPress-Anfänger sind und lernen, wie WordPress funktioniert , ist das Verständnis der Art und Weise, wie diese Dateien mit dem Hinzufügen und Anzeigen der WordPress-Seitenleiste zusammenhängen, ein großer Schritt, um ein Profi zu werden.

Wie Sidebar-Code in jeder Theme-WordPress-Datei funktioniert

In einer kurzen Zusammenfassung sind die drei Funktionen zum Hinzufügen von Seitenleisten in WordPress in jeder dieser Dateien platziert, die jeweils in der folgenden Tabelle dargestellt sind:

Um eine Seitenleiste in WordPress hinzuzufügen, sollten Sie die drei Schritte befolgen, die wir in diesem WordPress-Entwicklungstutorial beschrieben haben, das Folgendes beinhaltet:

• Registrieren – Registrieren Sie die Seitenleiste in der functions.php mit register_sidebar()
• Call Default Sidebar/ Custom Sidebar – Rufen Sie die Sidebar in der Datei sidebar.php für die Standard-Sidebar auf, aber oder benutzerdefinierte Sidebar können Sie sie in jeder Vorlagendatei mit dynamic_sidebar() aufrufen.
• Seitenleiste in WP-Beitragsvorlagen anzeigen – In der Seiten-, Beitrags- und benutzerdefinierten Seitenvorlage und benutzerdefinierten Beitragsvorlage können Sie die Seitenleiste mit dem get_sidebar()-Template-Tag aufrufen.

So fügen Sie eine Sidebar zu einem WordPress-Codebeispiel hinzu

Das Folgende ist das Codebeispiel dafür, wie Sie eine Standard-Sidebar in einem WordPress-Design hinzufügen würden, das wir als Njengah Tutorial Sidebar bezeichnen werden

Seitenleiste registrieren

Im ersten Schritt würden wir es wie folgt registrieren:

 /**
* Registrieren Sie den Widget-Bereich.
*
* @link https://gist.github.com/Njengah/010453c11d170df9b9c8de2f31954a5d
*/

Funktion njengah_register_sidebar_tutorial() {

  //Sidebar-Funktion registrieren - https://developer.wordpress.org/reference/functions/register_sidebar/

  register_sidebar(

        Reihe (
                  'name' => __( 'Njengah Tutorial Sidebar ', 'textdomain' ),
                   'id' => 'njengah-sidebar-default',
                   'description' => __( 'Widgets hier hinzufügen, damit sie in Ihrer Seitenleiste in Blogbeiträgen und Archivseiten erscheinen.', 'textdomain' ),
                   'before_widget' => '<Abschnitts-ID="%1$s" class="Widget %2$s">',
                   'after_widget' => '</section>',
                   'before_title' => '<h2 class="widget-title">',
                   'after_title' => '</h2>',
                  )
             );
    
        }

add_action( 'widgets_init', 'njengah_register_sidebar_tutorial' );

Das Ergebnis wird auf unserem WordPress-Dashboard unter Aussehen > Widgets angezeigt, wie im Bild unten gezeigt:

Rufen Sie die Standard-Sidebar in der Datei Sidebar.php auf

In den sidebar.php- oder Index- Dateien sollten wir die Sidebar nicht wie folgt aufrufen:

 if ( ! is_active_sidebar('njengah-sidebar-default') ) {
   Rückkehr;
}

  dynamic_sidebar('njengah-sidebar-default');

Seitenleiste anzeigen

Schließlich würden wir in unseren Seitenvorlagen einfach die Seitenleiste mit dem folgenden Code aufrufen

get_sidebar();

Einpacken

In diesem Beitrag haben wir den Schritt-für-Schritt-Ansatz zum Hinzufügen einer Seitenleiste im WordPress-Design umfassend beschrieben. In einer kurzen Zusammenfassung müssen Sie sich daran erinnern, dass es nur 2 oder drei Schritte gibt; Um die Standardseitenleiste in WordPress hinzuzufügen, müssen Sie die Seitenleiste in functions.php registrieren , eine sidebar.php-Datei erstellen, in der Sie die Seitenleiste aufrufen, die Sie in Schritt eins registriert haben, und in den Seiten- oder Beitragsvorlagen die get_sidebar-Funktion verwenden, um die Standardeinstellung aufzurufen Seitenleiste .

Wenn Sie benutzerdefinierte Seitenleisten hinzufügen, benötigen Sie den letzten Teil nicht, da Sie den Code dynamic_sidebar() direkt in die Vorlage oder die Datei einfügen würden, in der Sie die Seitenleiste anzeigen möchten. In der Fußzeile sehen Sie beispielsweise häufig die Fußzeilen-Widgets, die mit dieser Funktion dynamic_sidebar() angezeigt werden.

Ich hoffe, Sie haben aus diesem Tutorial etwas Neues gelernt oder besser verstanden, wie Sie eine Seitenleiste zu einem WordPress-Design hinzufügen, ohne unbedingt Code in Ihre functions.php-Datei kopieren und einfügen zu müssen. Wenn Sie weitere Hilfe in diesem Bereich wünschen oder Rat von einem professionellen WordPress-Entwickler benötigen, zögern Sie nicht, mich zu kontaktieren.