Widgets sind ein so integraler Bestandteil von WordPress-Themes, dass es schwer vorstellbar ist, ein WordPress-Theme ohne Widgets zu haben. Widgets sind ausführbare Skripte, die Sie einfach per Drag & Drop in Ihre Sidebars oder andere Widget-fähige Bereiche Ihres Themes ziehen können. Viele unserer Leser nutzen Widgets, um benutzerdefinierte Elemente zu ihrer Sidebar hinzuzufügen. Dieser Artikel richtet sich jedoch an neugierige Benutzer, die lernen möchten, wie man dynamische Widget-fähige Sidebars oder Widget-fähige Bereiche in WordPress-Themes hinzufügt.
Registrieren von Sidebars oder Widget-fähigen Bereichen in WordPress
Als Erstes müssen Sie Ihren Seitenleisten- oder Widget-Bereich für Ihr Theme registrieren. Sie können mehrere Seitenleisten und Widget-Bereiche registrieren. Kopieren Sie diesen Code und fügen Sie ihn in die functions.php-Datei Ihres Themes ein
function wpb_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'wpb' ),
'id' => 'sidebar-1',
'description' => __( 'The main sidebar appears on the right on each page except the front page template', 'wpb' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' =>__( 'Front page sidebar', 'wpb'),
'id' => 'sidebar-2',
'description' => __( 'Appears on the static front page template', 'wpb' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'wpb_widgets_init' );
In diesem Code haben wir zwei Sidebars registriert. Wir haben ihnen Namen und Beschreibungen gegeben, um sie auf dem Widgets-Bildschirm zu identifizieren. Der Parameter description kann verwendet werden, um Benutzern mitzuteilen, wo diese Sidebar im Theme erscheint. wpb ist der Name des Themes, an dem wir gerade arbeiten. Er wird hier verwendet, um diese Strings übersetzbar zu machen. Sie sollten ihn durch Ihren Theme-Namen ersetzen.
Hinzufügen von dynamischen Widget-fähigen Sidebars in WordPress-Theme-Dateien
Bisher haben wir nur dynamische Seitenleisten registriert. Benutzer können Widgets per Drag & Drop aus dem Bildschirm Design » Widgets in diese Seitenleisten ziehen. Diese Seitenleisten werden jedoch erst auf Ihrer Website angezeigt, wenn sie in einer Vorlage wie sidebar.php oder an einer anderen Stelle, an der Sie sie anzeigen möchten, aufgerufen werden. Um diese Widget-Bereiche hinzuzufügen, bearbeiten Sie die Vorlagendatei, in der Sie sie anzeigen möchten, und fügen Sie diesen Code ein:
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?> <div id="secondary" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-1' ); ?> </div> <?php endif; ?>
In diesem Beispielcode haben wir die Seitenleisten-ID verwendet, um die Seitenleiste aufzurufen, die wir hier anzeigen möchten. Ändern Sie die Seitenleisten-ID, um eine andere Seitenleiste anzuzeigen. Sie können beispielsweise drei Seitenleisten für den Fußbereich registrieren und diese dann nacheinander in der footer.php-Vorlage Ihres Themes aufrufen.
Widgets können sehr mächtig sein. Sie können Widgets zu Ihren Beiträgen und Seiteninhalten hinzufügen, Ihre Text-Widgets farblich gestalten oder die Leistung von Standard-WordPress-Widgets erweitern. Richtig platzierte Widget-Bereiche ermöglichen es Benutzern, benutzerdefinierte Elemente mit einer einfachen Drag-and-Drop-Oberfläche zu ihren Websites hinzuzufügen.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie dynamische Widget-fähige Sidebars in WordPress hinzufügen. Wir empfehlen Ihnen, den Code in Theme-Frameworks wie Genesis zu studieren, um zu lernen, wie Profis ihn in ihren Produkten verwenden. Für Fragen und Feedback hinterlassen Sie bitte einen Kommentar unten.
nabil
Hallo, ich brauche zwei Spalten in der Sidebar! Wie mache ich das mit CSS?
Jason
Wo kann ich die Funktionalität meiner WordPress-Widgets erweitern?
Milada
Hallo Team, nochmals,
Entschuldigen Sie die Störung, aber ich möchte angeben, dass ich ein Widget über dem aktuellen primären Seitenleisten-Widget der Themen auf der rechten Seite und das andere Widget auf der linken Seite des Artikels in der Mitte benötigen würde.
Wie soll ich vorgehen?
Vielen Dank,
Milada
Milada
Hallo Team, nochmals,
Wie füge ich ein Feld im Widget hinzu und wo füge ich einen Feldcode ein, um Affiliate-Links dort zu haben?
Danke,
Milada
Tanmay Bala
Ich möchte lernen, wie man das DB-Plugin in WordPress und das Redux-Framework verwendet.
Marc
Dieses Tutorial war eine große Hilfe.
Ich habe versucht, dies seit etwa einer Woche zu erreichen.
Schön und auf den Punkt gebracht.
Danke!
Laura
Ich habe mich nur gefragt, bevor ich den Code tatsächlich einfüge, funktioniert das auch bei einem Theme, das ursprünglich keine Sidebar hat? Ich benutze Book Lite, das nur Footer hat.
WPBeginner Support
Ja, das tut es.
Admin
Laura
Danke bisher – ich habe versucht, die Sidebar zu registrieren, aber wann immer ich auf „Speichern“ klicke, erhalte ich den White Screen of Death – den ich vorher noch nie hatte. Irgendwelche Vorschläge, was falsch sein könnte?
Lohith
Thanks Alot
Its really wonderful and simple method to explain….
Bakopu
Vielen, vielen Dank, Sir. Wo sind Sie, Sir, wir möchten Ihren Segen erhalten, indem wir Ihre Füße berühren.
akhilesh
Danke, Herr, diese Beiträge waren sehr hilfreich für mich
Marcos Nakamine
Hat perfekt funktioniert
Danke
gWorldz
Ich habe Probleme, das Widget angezeigt zu bekommen o.O
Das Widget registriert und zeigt sich im Backend ordnungsgemäß ohne Probleme an, jedoch wird mein Widget-Inhalt nur angezeigt, wenn ich Inhalte im vorherigen Widget einfüge.
Ich verwende ein Child-Theme von 2011 und registriere einen zusätzlichen Footer-Bereich.
Snippet für functions.php:
https://gist.github.com/gWorldz/76273b5901e1b5c4759b#file-functions-php
sidebar-footer.php
https://gist.github.com/gWorldz/b6177ccc9734718dd636#file-sidebar-footer-php
style.css
https://gist.github.com/gWorldz/0f24a9350da164ee2f29#file-style-css
Haben Sie eine Ahnung, was ich falsch mache oder was dieses Problem verursacht?
Tiger
Haben Sie jemals Hilfe dazu bekommen? Ich habe dasselbe Problem.
MJ
Ich wollte mich nur für diesen Beitrag bedanken. Ich habe bei Google nachgeschaut, wie man eine Seitenleiste in WordPress registriert, und bin auf ein paar andere Seiten gestoßen, bevor ich auf Ihre gestoßen bin. Ihre Seite hatte die besten, klarsten und verständlichsten Anleitungen. Gut gemacht.
arvind
Ihr Beitrag ist hilfreich für mich,
danke !!!!
Dharmendra Prajapati
Endlich ist meine dynamische Widget-fähige Sidebar nach 23 Tagen fertig… Ich habe alle Seiten gegoogelt… und bin schließlich auf Ihrer Seite gelandet.
Danke
Kevin
Im zweiten Ausschnitt, wo Sie den Widget-Code in die Vorlage einfügen, wo Sie haben
div id=”secondary”
Sollte sich diese ID mit jedem Widget-Bereich ändern.
Z.B.:
Erstens, Zweitens, Drittens, Viertens usw.
WPBeginner Support
Kevin Ja, das solltest du, und es sollte nach dem Widget-Bereich oder der Sidebar benannt werden, die es repräsentiert.
Admin
SS
Funktioniert für die Registrierung der Sidebars, aber wenn ich zum Bildschirm "Design" » "Widgets" gehe, sehe ich alle meine Widgets, aber nichts, wohin ich sie ziehen kann.
WPBeginner Support
SS, wenn Sie erfolgreich eine dynamische Widget-fähige Sidebar registriert haben, wird sie auf dem Widgets-Bildschirm angezeigt. Das bedeutet, dass die Registrierung der Sidebars wahrscheinlich nicht funktioniert hat.
Admin
Steve Smart
Hallo –
Das ist ein sehr hilfreicher Beitrag. Danke!
Ich habe erfolgreich einen dynamischen Widget-Bereich verwendet und versuche nun, mehr als einen zu implementieren. Alles scheint wie erwartet zu funktionieren, bis auf ein seltsames Problem im Dashboard. Wenn ich ein Text-Widget in meinen zweiten dynamischen Widget-Bereich ziehe, kann ich Inhalte wie erwartet hinzufügen und speichern, und es wird wie erwartet auf meinen Seiten ausgegeben. Wenn ich jedoch die Seite mit den Dashboard-Widgets erneut aufrufe, scheint der zweite Widget-Bereich keine Widgets zu enthalten.
Ich benutze ein twentytwelve-Child-Theme und WordPress 3.7.1.
Irgendwelche Gedanken?
Jackson
Hearty thanks….You have done such a wonderful work…thanks thanks thanks…
JP
danke, das war nützlich. direkt auf den Punkt.
Praveen Prasad
Können Sie mir sagen, wo die Funktion aufgerufen wird?
Ed Du
Sie können auch Headway mit einem zusätzlichen Block verwenden und es wird sich um all das kümmern. Oder Pagelines in diesem Fall.