Springe zum Hauptinhalt

Wie ein Widget auf den Kopf Ihrer Wordpress-Blog

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

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.

Hinweis: 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

In der Regel fügen WordPress-Designs Seitenleisten neben dem Inhalt oder im Fußzeilenbereich 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

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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 WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip 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 flexibles WordPress-Plugin, mit dem moderne Tooltips ohne Abhängigkeit von der JavaScript-Bibliothek erstellt werden können. Es reagiert vollständig 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

Das WordPress Justified-Plugin ist ein responsives Galerie-Plugin, mit dem Sie Ihre Thumbnails mithilfe von jQuery wie bei Flickr in einem Raster ausrichten können. 

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…

Download | Demo | Web-Hosting  

3. E-Mails planen

Mit diesem WordPress-Plugin können Sie, wie der Name schon sagt, die E-Mail-Veröffentlichung auf Ihrer Website planen. Es ist Teil der Plugins des WordPress-Plugins "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

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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. .

DownloadDemo |Web-Hosting

Empfohlene Ressourcen

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

Fazit

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.

...

Dieser Artikel enthält Kommentare 8

  1. 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!

  2. 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?

  3. 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.

  4. 🙂 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 ...

  5. 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.

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
7 Aktien
Aktie1
tweet
Registrieren6