So erstellen Sie ein benutzerdefiniertes Header-Widget in WordPress

Suchen Sie nach Möglichkeiten, ein Header-Widget auf Ihrer Website zu erstellen? Sie sind an der richtigen Stelle. Wir zeigen Ihnen, wie Sie ganz einfach ein benutzerdefiniertes Header-Widget in WordPress erstellen können.

Ein attraktiver Header ist der Schlüssel, um bei Ihren Besuchern Eindruck zu hinterlassen. Darüber hinaus kann es der perfekte Ort sein, um zeitlich begrenzte Angebote oder besondere Gelegenheiten zu präsentieren. Wenn Ihr Design diesen Widget-Bereich nicht unterstützt, können Sie manuell einen erstellen. In dieser Anleitung zeigen wir Ihnen, wie Sie ein benutzerdefiniertes Header-Widget in WordPress erstellen .

Bevor wir sehen, wie es geht, wollen wir die Vorteile von benutzerdefinierten Header-Widgets besser verstehen.

Warum ein benutzerdefiniertes Header-Widget in WordPress erstellen?

Der Header ist das erste, was Besucher sehen, wenn sie auf Ihrer Website landen. Dies ist eines der Dinge, denen die Benutzer mehr Aufmerksamkeit schenken, daher zeigen die meisten Websites ihre wichtigsten Inhalte wie Sonderangebote und Menüs in den Kopfzeilen an.

Wenn dies der Ort ist, auf den Benutzer achten, ist es verlockend, dort viele Inhalte hinzuzufügen. Sie sollten jedoch vermeiden, zu viele Links in Ihrem Hauptmenü (Header) zu haben. Es wird nicht empfohlen, zu viel Inhalt im Kopfzeilenmenü zu haben, da dies Benutzer verwirren und Ihre Website schlecht aussehen lassen kann. Hier kann ein Header-Widget hilfreich sein. Sie können ein benutzerdefiniertes Header-Widget unterhalb der primären Navigationsleiste hinzufügen und diesem Bereich zusätzliche Widgets hinzufügen, ohne das Hauptmenü zu verstopfen.

Durch das Erstellen eines benutzerdefinierten Header-Widgets können Sie alles problemlos anzeigen, sei es eine Anzeige, ein Newsletter-Widget, ein Banner, Textinhalte, WooCommerce-Angebote und benutzerdefinierte Widgets. Auf diese Weise können Sie Ihrem Header Inhalte hinzufügen und ihn gleichzeitig organisieren.

Nachdem wir nun die Bedeutung eines benutzerdefinierten Header-Widgets besser verstehen, lernen wir, wie man eines mit minimalem Aufwand erstellt.

So erstellen Sie ein benutzerdefiniertes Header-Widget in WordPress

Wir haben zuvor verschiedene Methoden zum Anpassen des WordPress-Headers gesehen. In diesem Abschnitt lernen wir jedoch, wie Sie den Header bearbeiten, indem Sie ein benutzerdefiniertes Header-Widget erstellen. Dafür verwenden wir PHP- und CSS-Snippets.

HINWEIS : Da wir einige Kerndateien bearbeiten werden, empfehlen wir Ihnen, bevor Sie fortfahren, ein vollständiges Backup Ihrer Website zu erstellen und ein untergeordnetes Design zu installieren. Um ein untergeordnetes Thema zu erstellen, können Sie diesem Tutorial folgen oder eines dieser speziellen Plugins verwenden.

Wenn Sie das getan haben, fahren Sie mit dem nächsten Abschnitt fort.

1) Erstellen eines benutzerdefinierten Widgets

Zuerst müssen Sie einen neuen Widget-Bereich erstellen. Gehen Sie dazu in Ihrem WordPress-Dashboard zu Darstellung > Widgets .

Dort sehen Sie alle Widget-Bereiche, die in Ihrem aktiven Design verfügbar sind. Dies kann sich je nach Thema ändern, aber in den meisten Fällen sehen Sie hier mehrere Bereiche. Für diese Demo verwenden wir GeneratePress und es enthält viele Widget-Bereiche, die bereits registriert und gestaltet sind.

Sie müssen einen neuen Widget-Bereich erstellen, in dem wir unser benutzerdefiniertes Header-Widget hinzufügen. Dazu müssen Sie die Datei functions.php Ihres Child-Themes anpassen. Dafür können Sie entweder die Datei direkt verwenden oder ein Plugin wie Code Snippets verwenden.

Für diese Demonstration verwenden wir Code Snippets, also gehen wir zu Plugins > Add New und suchen nach dem Code Snippets-Plugin. Dann installieren wir es und aktivieren es wie unten gezeigt.

Nach der Aktivierung sehen Sie auf der linken Seite die Einstellungen des Plugins. Gehen Sie zu Alle Snippets und klicken Sie auf Neu hinzufügen, um ein neues Snippet zu erstellen.

Geben Sie dem Snippet einen Namen und fügen Sie dann das folgende Snippet in den Abschnitt „ Code “ ein:

 Funktion quadlayers_widgets_init() {
 register_sidebar( array(
 'name' => 'QuadLayers-Header-Widget',
 'id' => 'quadlayers-header-widget',
 'before_widget' => '<div class="ql-widget">',
 'after_widget' => '</div>',
 'before_title' => '<h2 class="ql-title">',
 'after_title' => '</h2>',
 ) );
 }
 add_action( 'widgets_init', 'quadlayers_widgets_init' );

Dieses Snippet erstellt ein neues Widget auf Ihrer WordPress-Seite mit dem Namen Quadlayers Header Widget.

Speichern Sie dann die Änderungen und nach der Aktivierung sehen Sie einen brandneuen Widget-Bereich unter dem Abschnitt WordPress-Widgets.

Auf diese Weise können Sie ein neues Widget registrieren. Danach müssen Sie das Widget zum Header Ihrer Website hinzufügen. Mal sehen, wie man das macht.

2) Hinzufügen des Widgets zur Kopfzeile

Sie haben erfolgreich ein neues Widget auf Ihrer Website erstellt, aber Sie haben den Speicherort nicht angegeben. In diesem Abschnitt zeigen wir Ihnen, wie Sie dieses neue benutzerdefinierte Widget zum WordPress-Header hinzufügen.

Dazu müssen Sie die Datei header.php bearbeiten. Sie finden diese Datei im Theme-Verzeichnis, indem Sie zu Appearance > Theme Editor > Theme header (header.php) gehen . Stellen Sie vor dem Bearbeiten der Datei sicher, dass Sie ein untergeordnetes Design verwenden. Wenn dein Child-Theme keine header.php -Datei hat, öffne den Ordner des Parent-Themes, lade die header.php -Datei von dort herunter und lade sie dann in den Child-Theme-Ordner hoch.

Fügen Sie danach den folgenden Code in die Datei header.php ein :

 <?php

 if ( is_active_sidebar( 'quadlayers-header-widget' ) ) : ?>
 <div class="ql-widget-area Widget-Bereich" role="komplementär">
 <?php dynamic_sidebar( 'quadlayers-header-widget' ); ?>
 </div>

 <?php endif; ?>

Nachdem Sie den Code eingefügt haben, aktualisieren Sie die Datei.

Wenn Sie sich nicht sicher sind, wo Sie den Code hinzufügen sollen, können Sie verschiedene Standorte testen oder sich an das Support-Team Ihres Themes wenden und es nach dem besten Standort für Ihre Bedürfnisse fragen. Testen Sie nach dem Hinzufügen des Codes den Widgetbereich, indem Sie ihm ein Widget hinzufügen. In diesem Beispiel haben wir einen Absatzblock mit Dummy-Inhalt hinzugefügt.

Im Frontend der Website sehen Sie die Kopfzeile wie unten gezeigt.

Das bedeutet, dass das Widget und der Code funktionieren. Toll!

So können Sie ein benutzerdefiniertes Header-Widget in WordPress hinzufügen. Sie können diesen Bereich verwenden, um ein Banner, Anzeigen, ein zeitlich begrenztes Angebot oder alles, was Sie möchten, anzuzeigen.

Aber das ist nicht alles. Das Widget ist funktionsfähig, aber Sie können es noch verbessern. Sehen wir uns an, wie wir das Widget mit etwas CSS gestalten können, um es an das Erscheinungsbild Ihrer Website anzupassen.

3) Anpassen des Widgets mit CSS

Nachdem Sie das Widget zur Header-Datei hinzugefügt haben, ist es an der Zeit, es mit etwas CSS besser aussehen zu lassen. Sie können Ihren CSS-Code in die style.css -Datei des Themes eingeben oder den WordPress Customizer verwenden. Beide Methoden funktionieren gut, aber wir empfehlen Ihnen, den CSS-Code über den Abschnitt „ Zusätzliches CSS “ im Admin-Dashboard hinzuzufügen. Auf diese Weise sehen Sie die Änderungen sofort im Live-Vorschau-Assistenten. Jedoch,

Sehen wir uns nun ein Beispielskript an, damit Sie das benutzerdefinierte Header-Widget anpassen können, das Sie im vorherigen Abschnitt erstellt haben. Kopieren Sie den folgenden Code, gehen Sie zu Appearance > Theme Editor > Additional CSS und fügen Sie ihn ein.

 div#quadlayers-header-widget {
 Breite: 100 %;
 Hintergrundfarbe: #f5f5f5;
 Rand unten: 1px solide #eeeeee;
 Textausrichtung: Mitte;
 }

 .ql-Widget {
 Breite: 100 %;
 Hintergrundfarbe: #f5f5f5;
 Textausrichtung: Mitte;
 }

 h2.ql-Titel {
 Rand oben: 0px;
 Textausrichtung: links;
 Texttransformation: Großbuchstaben;
 Schriftgröße: klein;
 Hintergrundfarbe: #feffce;
 Breite: 130px;
 Polsterung: 5px;
 } 

Sobald Sie das CSS aktualisiert haben, sieht es so aus:

Dies ist nur ein Beispielcode. Sie können es als Basis nehmen und anpassen, um es an das Design und die Anforderungen Ihrer Website anzupassen.

Das ist es! So können Sie mit ein wenig Code ein benutzerdefiniertes Header-Widget in WordPress erstellen. Es war nicht so schwer, oder?

Fazit

Zusammenfassend lässt sich sagen, dass der Header einer der prominentesten Bereiche jeder Website ist und in dem Sie wichtige Inhalte haben sollten, die Besucher sehen sollen. Aus diesem Grund ist das Hinzufügen eines Header-Widgets eine hervorragende Option, um die Aufmerksamkeit des Benutzers zu erregen und ein zeitlich begrenztes Angebot, die wichtigsten Bereiche Ihrer Website usw. anzuzeigen.

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie ein benutzerdefiniertes Header-Widget erstellen und es mit ein wenig Code anpassen. Auch wenn Sie keine Programmierkenntnisse haben, können Sie dem Tutorial folgen und das Widget zu Ihrer Website hinzufügen. Um den Stil zu ändern, benötigen Sie jedoch möglicherweise einige Grundkenntnisse in CSS. Das Bearbeiten der header.php -Datei kann je nach Theme schwierig sein. Wenn Sie also auf Probleme damit stoßen, können Sie sich an Ihren Theme-Autor wenden.

Haben Sie ein Header-Widget erstellt? Wie war Ihre Erfahrung? Lassen Sie es uns im Kommentarbereich unten wissen.

Weitere Möglichkeiten zum Anpassen Ihrer Kopfzeile finden Sie in den folgenden Anleitungen:

• 3 Methoden zum Anpassen der Kopfzeile in WordPress
• So machen Sie den Divi-Header klebrig