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
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 ".
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.
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 ".
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.
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.
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.
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“.
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. .
Herunterladen | Demo | Web-Hosting
Empfohlene Ressourcen
Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.
- Wie Excel und Word-Dokumente auf Wordpress erstellen
- So passen Sie das WordPress-Logo des Dashboards an
- Wie die Dateien zu finden, ein Wordpress-Theme bearbeiten
- So passen Sie das CSS Ihrer WordPress-Website an
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.
...
Hallo! Ich würde gerne wissen, ob Sie die Möglichkeit haben, mir zu sagen, wie ich eine "Infobox" ähnlich der hier am Anfang dieses Artikels verwendeten platzieren soll, einschließlich der anklickbaren Schaltflächen neben "Herunterladen" und "Tabellenkalkulationen" Layout ist sehr schön. Vielen Dank!
Der Code zum Hinzufügen von header.php funktioniert nicht
Sir, ich habe es versucht. In der Tat wird die Widgets-Seite ausgegeben, die das Hinzufügen von Widgets definiert. Und ich habe es hinzugefügt. Wenn Schritt 2 den Code nicht in den PHP-Header eingeben kann. Ratet mal, 2, was ist der Fehler, Sir?
Geben Sie im ersten gezeigten Code, der einen neuen Widget-Bereich generieren soll, zunächst "function" ein, aber ich würde sagen, er beginnt mit "function". Tatsächlich weist dieser Code mehrere Fehler auf, die ihn beim Schreiben falsch machen. Ich würde es begrüßen, wenn es korrigiert würde.
OK.
🙂 Alles ist in Ordnung, nur niemand in seinem Rat erklärt, wo der Code zu „functions.php !!! " Es ist wichtig! Jeder benutzt die "verschiedenen" Themen ...
Hallo,
Danke für diese Unterstützung.
Ich wusste, wie ich meine Suchleiste in die personalisierte Kopfzeile einfügen konnte. Andererseits ist es komplizierter, den Stil zu personalisieren ...
Ich möchte die Größe, die Position (die nicht die gesamte Breite des Headers einnimmt) sowie die Hintergrundfarbe ändern.
Vielen Dank im Voraus.
Hallo Thomas,
Dafür braucht es ein bisschen CSS-Wissen. Aber ich empfehle dieses ausgezeichnete WordPress-Plugin: https://codecanyon.net/item/yellow-pencil-visual-css-style-editor/11322180?ref=voirplusgrand