Möchten Sie dem Header-Bereich Ihrer Website ein WordPress-Widget hinzufügen?

Mit Widgets können Sie problemlos Inhaltsblöcke in bestimmten Abschnitten Ihres WordPress-Themas hinzufügen.

In diesem Tutorial zeigen wir Ihnen, wie Sie auf einfache Weise ein WordPress-Widget zum Header Ihrer Website hinzufügen.

Note: Dies ist ein Tutorial für Fortgeschrittene. Sie müssen dem Code Code hinzufügen Dateien Ihres WordPress-Themas und etwas CSS beherrschen.

Aber bevor Sie Änderungen vornehmen, entdecken Sie unsere 5 Wordpress-Plugins, ein Backup Ihrer Blog oder Wie man ein Wordpress-Theme zu installieren et Wie viele Plugins sollte ich installieren auf Wordpress.

Dann lassen Sie uns zurückgehen, warum wir hier sind. 

Warum und wann müssen Sie dem Header ein Widget hinzufügen?

Mit Widgets können Sie problemlos Inhaltsblöcke zu einem bestimmten Bereich in Ihrem WordPress-Design hinzufügen. Diese ausgewiesenen Bereiche heißen " Sidebars "Oder Gebiete von" widgets".

Ein Widget-Bereich in der Kopfzeile kann verwendet werden, um Anzeigen, aktuelle Artikel oder was auch immer Sie möchten anzuzeigen.

Diese Domain wird auf allen gängigen Websites verwendet, um wirklich wichtige Informationen anzuzeigen.

entdecken Sie auch Wie man benutzerdefinierte Widgets nach dem Posten auf WordPress hinzufügt

Zone Widgetisee in WordPress Kopf

Allgemein, WordPress-Themes Fügen Sie Seitenleisten neben dem Inhalt oder im Fußbereich hinzu. Sehr wenige WordPress-Themes fügen Widget-Bereiche über dem Inhalt oder in der Kopfzeile hinzu.

Wir empfehlen auch, unsere zu entdecken MailChimp Tutorial in Französisch: die komplette Anleitung, einen Newsletter zu erstellen

Aus diesem Grund zeigen wir Ihnen in diesem Tutorial, wie Sie dem Header Ihrer WordPress-Website einen Widget-Bereich hinzufügen.

Schritt 1: Erstellen Sie einen Widget-Bereich

Zunächst müssen wir einen benutzerdefinierten Widget-Bereich erstellen. Mit diesem Schritt können Sie einen benutzerdefinierten Widget-Bereich in " Aussehen> Widgets Auf Ihrem WordPress-Dashboard.

Sie müssen diesen Code zur Datei hinzufügen functions.php Von deinem Thema.

Funktion bpc_widgets_init () {register_sidebar (Array ('name' => 'Benutzerdefinierter Header-Widget-Bereich', 'id' => 'benutzerdefiniertes Header-Widget', 'before_widget' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init', 'bpc_widgets_init');

Dieser Code speichert eine neue Seitenleiste oder einen neuen Widget-Bereich in Ihrem WordPress-Theme.

Wenn Sie WordPress noch nie lokal installiert haben, finden Sie es heraus Wie Wordpress lokal auf einem PC / Windows mit XAMPP installieren

Du kannst gehen zu " Aussehen> Widgets Und Sie sehen einen neuen Widget-Bereich mit der Aufschrift " Benutzerdefinierte Kopfzeile Widget Gebiet ".

neue WordPress Widget Zone

Fügen Sie diesem neu erstellten Bereich ein Text-Widget hinzu und speichern Sie es.

Versuchen Sie es auch Unser Leitfaden zum Hinzufügen von Widgets.

Schritt 2: Zeigen Sie Ihr Widget in der Kopfzeile an

Wenn Sie Ihre Website besuchen, wird das soeben hinzugefügte Text-Widget nicht angezeigt.

Weil wir Ihnen noch nicht gezeigt haben, wie Sie die Zonen von anzeigen benutzerdefinierte Widgets Wordpress.

Das werden wir in diesem Schritt tun.

Hier ist auch für Sie eine Liste von 5 Critical WordPress-Plugins, um die Einnahmen Ihres Blogs zu steigern

Sie müssen die Datei bearbeiten header.php Fügen Sie in Ihrem WordPress-Design diesen Code hinzu, in dem Sie die Widgets anzeigen möchten.


 
 
 
 

Vergessen Sie nicht, Ihre Änderungen zu speichern.

Sie können dann Ihre Website besuchen und sehen das Text-Widget in Ihrer Kopfzeile.

Demo-Site im Auge

Das Ergebnis wird nicht unbedingt das attraktivste sein. Aus diesem Grund benötigen Sie CSS, damit es richtig angezeigt wird.

3-Schritt: Geben Sie Ihren CSS-Headern Stil

Abhängig von Ihrem WordPress-Thema müssen Sie CSS-Code hinzufügen, um zu steuern, wie der Header und der Widget-Bereich angezeigt werden.

Eine der einfachsten Möglichkeiten, dies zu tun, ist die Verwendung von CSS Hero. Letzteres ermöglicht es Ihnen, eine intuitive Benutzeroberfläche zu verwenden, um das CSS eines WordPress-Themas zu ändern.

Wir raten Ihnen auch, dies zu entdecken Was kann man mit dem Yellow Pencil WordPress Plugin machen?

Wenn Sie kein Plugin verwenden möchten, können Sie Ihrem WordPress-Theme benutzerdefiniertes CSS hinzufügen, indem Sie " Aussehen »Personalisieren So passen Sie das WordPress-Design an

Lesen Sie auch unseren Artikel über 10 WordPress-Plugins zur Verbesserung des Datenverkehrs in einem Blog

Auf diese Weise können Sie die WordPress Customizer-Oberfläche anzeigen. Sie müssen auf " zusätzlicher CSS ".

zusätzliche CSS WorDPress

Der Reiter « Zusätzliche CSS In der " Konfigurator Ermöglicht das Hinzufügen Ihres benutzerdefinierten CSS, während Sie die Änderungen in der Vorschau rechts anzeigen.

Aus Gründen, die mit diesem Lernprogramm zusammenhängen, wird davon ausgegangen, dass Sie in diesem Bereich ein einzelnes Widget zum Anzeigen von Bannerwerbung oder ein benutzerdefiniertes Menü-Widget hinzufügen.

Hier ist ein Beispiel für CSS, um Ihnen den Einstieg zu erleichtern:

div # header-Widget-Bereich {width: 100%; background-color: #f7f7f7; border-bottom: 1px feste #EEEEEE; text-align: center; } H2.chw-title {margin-top: 0px; text-align: left; text-transform: Groß; font-size: small; background-color: #feffce; Breite: 130px; padding: 5px; }

So wird unser benutzerdefiniertes Widget in der Kopfzeile des Themas "Twenty Seventeen" angezeigt.

Demo-Thema siebzehnundzwanzig WordPress

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere verwenden Wordpress-Plugins um ein modernes Erscheinungsbild zu geben und die Handhabung Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. Smart4y-QuickInfo

Smart4y Tooltip ist ein WordPress Plugin flexibles Tool zum Erstellen moderner Tooltips ohne Abhängigkeit von der Javascript-Bibliothek. Es ist vollständig responsiv und bietet die Möglichkeit, HTML-Inhalte einzufügen.

Smart4y Tooltip Responsives WordPress-Plugin

Mit dem WYSIWYG-Editor können Sie jeden Tooltip visuell erstellen, ohne Code eingeben zu müssen. Wenn Sie jedoch dazu bereit sind, können Sie dies jederzeit tun.

Entdecken Sie auch unsere 10-WordPress-Plugins zur Auswertung von Artikeln aus Ihrem Blog

Die anderen Funktionen sind: Unterstützung für Builder-Seiten, ein ziemlich reaktionsschnelles Layout, die Möglichkeit, globale Parameter für alle QuickInfos zu definieren oder spezifische Parameter für jede QuickInfo zu definieren, Unterstützung für vordefinierte visuelle Effekte, die Berechnung der Position der QuickInfo im Fenster mit geänderter Größe, detaillierte Dokumentation usw.

Herunterladen | Demo | Web-Hosting

2. gerechtfertigt

Le WordPress Plugin Justified ist ein reaktionsschnelles Galerie-Plugin, das Ihre Miniaturansichten mithilfe von jQuery wie auf Flickr in einem gerechtfertigten Raster ausrichtet. 

Justified-Plugin für Wordpress-Fotografen,

Es bietet Funktionen, die Ihre Galerien von denen der Mitbewerber unterscheiden!

Die Hauptmerkmale sind: reaktionsschnelles Layout, spezielle Überflugeffekte, automatische Neuausrichtung des Gitters,  ein Shortcode-EditorAussehen evollständig anpassbar, die Unterstützung von pZuschauer und viele andere…

Herunterladen | Demo | Web-Hosting  

3. E-Mails planen

ce WordPress Plugin Wie der Name schon sagt, können Sie die E-Mail-Veröffentlichung auf Ihrer Website planen. Es ist Teil der WordPress-Plugin-Erweiterung „Follow My Blog Post“. E-Mails planen Folgen Sie meinem Blog-Beitrag WordPress-Plugin

Sie können jetzt die Veröffentlichung Ihrer E-Mails nach Stunden, Tagen oder Wochen planen.

Lesen Sie auch unseren Artikel über 10 WordPress-Plugins zur Verwendung von Karten auf Ihrer Website

Es bietet die Möglichkeit, eine kombinierte E-Mail für alle Benachrichtigungen anstelle jeder E-Mail für jede Benachrichtigung zu senden und verschiedene E-Mail-Vorlagen für unterschiedliche E-Mails zu definieren, um schließlich den Empfang Ihrer E-Mails besser verdaulich zu machen. .

HerunterladenDemo |Web-Hosting

Empfohlene Ressourcen

Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.

Zusammenfassung

Das war's Das ist alles für dieses Tutorial. Ich hoffe, es wird Ihnen helfen, einen Widget-Bereich in den Header Ihres WordPress-Themas einzufügen. Zögere nicht zu Teile es mit deinen Freunden in deinen bevorzugten sozialen Netzwerken

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.

Wenn Sie Vorschläge oder Anmerkungen haben, hinterlassen Sie diese in unserer Rubrik commentaires.

...