Inhalte:
Die Erstellung ist eigentlich gar nicht so schwer.
Öffne in einem Texteditor deiner Wahl die functions.php deines Themes. Diese findest du im WordPress-Installationsverzeichnis unter /wp-content/themes/<dein-theme>/
Füge nun folgenden Code-Schnipsel ganz unten ein (aber bitte, falls vorhanden, noch vor ?>).
add_action( 'widgets_init', 'fhw_register_custom_widget_area' );
function fhw_register_custom_widget_area() {
register_sidebar(
array(
'id' => 'neue-widget-area',
'name' => esc_html__( 'Meine Widget-Area' ),
'description' => esc_html__( 'Ein eigener Bereich' ),
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => ''
)
);
}Ersetze nun die kursiv markierten Texte mit Texten deiner Wahl.
neue-widget-area bezeichnet hierbei die eindeutige ID der Area. Diese darf nur einmal vergeben werden.
Meine Widget-Area ist der Name der Area, so wie sie auch im Adminbereich unter „Widgets“ angezeigt wird.
Ein eigener Bereich ist lediglich die Beschreibung, wie sie im Customizer angezeigt wird.
Der Website-Besucher wird von den drei oben stehenden Texten nichts sehen können. Sie dienen nur der Ansicht und Übersichtlichkeit für dich im Admin-Bereich.
Nun bearbeite eine Webseiten-Datei deiner Wahl, dort wo das Widget angezeigt werden soll und füge folgenden Code dort ein:
<?php dynamic_sidebar( 'neue-widget-area' ); ?>
Beachte, dass hier neue-widget-area mit der oben vergebenen id übereinstimmen muss, sonst fehlt die Verknüpfung und dein Bereich funktioniert nicht.
Speichere nun die Dateien und lade Sie auf deinen Server. Wenn du WordPress lokal installiert hast, entfällt dieser Schritt.
Nun rufe im Adminbereich „Design“ -> „Widgets“ auf. Dort sollte dein neu erstellter eigener Widget-Bereich nun vorzufinden sein.
Du kannst nun also hier Navigationsmenüs, Bilder, Texte, HTML oder viele andere Widgets einbinden – und sie werden genau an der Stelle angezeigt wo du den Code hinterlegt hast.
Gar nicht so schwer, oder?
Moin, ich teste Deine Anleitung mit dem Code, ob das funktioniert.
Ich hatte schon einmal einen neuen Header-Widget-Bereich erstellt. Das Problem war, dass er drei eingefügte Widgets mittig senkrecht untereinander anzeigte. Ich brauche sie wie eine Navigation in einer Zeile nebeneinander. Der Widget-Bereich sollte somit 3-spaltig sein. Wie richte ich das ein?
Hallo Thomas,
danke für deine Nachfrage.
Damit die horizontal angezeigt werden musst du erstmal 3 Widget-Areas in der functions.php definieren.
Danach bindest du die 3 in der Datei ein, in der du sie anzeigen möchtest, aber platzierst eine <div> mit css darum.
z.B. so:
Ich hoffe das hilft dir – falls nicht gib gern Bescheid.
Moin, Fabian, ist Deine Anleitung für einen Header-Widget-Bereich gedacht?
Und ich bin davon ausgegangen, dass ein Widget-Bereich ausreicht. Dieser enthält dann eben drei Widgets (Kategorien-Dropdown-Menüs, RSS-Feed-Abonnement usw.). Diese müsste ich dann vermutlich mit einem CSS mittig und horizontal (3-spaltig) setzen.
Moin, Fabian,
ich habe Deinen Code mit 1 Widget-Area in der functions.php eingefügt.
Dann diesen Code in die header.php:
Das funktioniert auch soweit. Nur wird jetzt komplett alles horizontal angezeigt, also sowohl die Titel der Widgets als auch deren Inhalte.
Diese sollten allerdings wie bisher übereinander stehen, nur die Widgets an sich horizontal in einer Linie.
https://www.nudelheissundhos.de/IMG_4285.PNG
Hallo Thomas,
Das kommt jetzt ganz drauf an wie du die Widget-Inhalte angelegt hast.
Mit dem CSS von oben wird alles horizontal angezeigt. Das könntest du ändern, indem du alle „Kindelemente“ mit <div>…</div> umgibst.
Moin, Fabian,
ich bin im Programmieren nicht so firm. Was bedeutet:
„ indem du alle ,Kindelemente‘ mit … umgibst.“?
Hallo Thomas,
am leichtesten ist es, wie ich es im vorherigen Kommentar geschrieben habe, mit 3 einzelnen Widget-Bereichen.
Ansonsten musst du etwas programmieren, da kann ich aber schriftlich hier leider kaum weiterhelfen, da es sehr individuell ist.
Okay, dann verwende ich drei Widgetbereiche, wie Du angegeben hast. Aber wie umgebe ich die „Kindelemente“ mit einer Ellipse, also dem …?
Hallo Thomas,
da war nur das Format meines Kommentars zerschossen, ich habs geupdatet.
Aber mit 3 Widget-Bereichen brauchst du das eh nicht.
Moin, Fabian,
jetzt ist es perfekt. Schön mittig unter der Navigation.
Ich habe drei Widgetareas erstellt und jeweils mit div versehen.
Du kannst es Dir auf der Website anschauen.
Danke.
Moin, Fabian,
doch ein Wermutstropfen: ich habe mein Blog auf dem Smartphone geprüft. Die drei einzelnen Widget Areas werden leider nicht untereinander, sondern in einer Zeile dargestellt. Das ist somit so nicht zu gebrauchen.
Ich prüfe das Smartphone nochmals mit der Option von einer Widget Area mit drei Widgets darin, ob das untereinander dargestellt wird.
Ansonsten muss ich mir noch einen CSS Code für das mobile Gerät ausdenken.
Nun bin ich völlig überfragt. Auch bei 1 Area mit 3 Widgets werden diese auf dem Smartphone horizontal angezeigt und sind so nicht anwählbar. Sie werden nicht vertikal angezeigt.
Es übersteigt leider meine Kenntnisse, da nur das Smartphone einen CSS-Code zu schreiben, der dies möglich macht.
Ich habe das Problem mit CSS gelöst. Die Darstellung auf dem Smartphone ist jetzt senkrecht. Wenn es einen Leser Deines Blogs interessiert, poste ich den Code zur Lösung gern hier.
Hallo Thomas,
freut mich, dass es jetzt klappt!
Gern kannst du den Code dafür auch hier teilen.