So fügen Sie Widgets zu Ihrem Header in WordPress hinzu

Nicht alle Themes erlauben es Ihnen, WordPress-Widgets zu Ihrem Header-Bereich hinzuzufügen. Möglicherweise möchten Sie jedoch mithilfe von Widgets Inhaltsblöcke in Ihren WordPress-Header einfügen, um ein viel besseres Aussehen zu erzielen.

Es gibt zwei Methoden, die Sie verwenden, um WordPress-Widgets im Header-Bereich zu verwenden. In diesem Tutorial werden wir verstehen, wie man WordPress-Widgets im Header-Bereich verwendet.

Warum sollten Sie Ihrem Website-Header ein WordPress-Widget hinzufügen?

Wenn jemand Ihre WordPress-Website besucht, wird er bemerken, dass der Header eines der ersten Dinge ist. Sie können diesen Abschnitt verbessern, um die Aufmerksamkeit des Lesers zu wecken, indem Sie Ihrer Kopfzeile ein WordPress-Widget hinzufügen.

Ein einzigartiges Logo und ein Navigationsmenü sind oft in Website-Kopfzeilen enthalten, um Besuchern bei der Navigation auf Ihrer Website zu helfen. Sie können auch ein Header-Widget verwenden, um hilfreiche Inhalte, Bannerwerbung, zeitlich begrenzte Sonderangebote, einzeilige Formulare und mehr über oder unter diesem Abschnitt anzuzeigen.

So fügen Sie WordPress-Widgets mit WordPress-Designoptionen zum Header hinzu

In vielen der Top-WordPress-Designs ist ein Header-Widget-Bereich enthalten, den Sie nach Ihren Wünschen bearbeiten können. Überprüfen Sie zunächst, ob Ihr vorhandenes WordPress-Theme aus einem Widget-Abschnitt in der Kopfzeile besteht.

Um diese Option zu aktivieren, gehen Sie zu Aussehen und dann zu Anpassen und prüfen Sie, ob Sie die Kopfzeile bearbeiten können.

Sie gelangen zu dem Feld, in dem Sie die Kopfzeile bearbeiten und WordPress-Widgets hinzufügen können. Sie können die Kopfzeile sowie die Leerzeichen darüber und darunter am unteren Bildschirmrand ändern. Klicken Sie einfach auf das Plus- Symbol, während Sie mit der Maus über einen der freien Bereiche fahren.

Sie können Widget 1 aus einem Popup-Menü auswählen, das angezeigt wird. Es stehen weitere Möglichkeiten zur Verfügung, aber Sie müssen eine der Widget-Optionen auswählen, um das Header-Widget bereit zu machen.

Klicken Sie auf das Feld „ Widget 1 “ im Abschnitt „Header-Anpassung“, um einen Widget-Bereich zu Ihrem Header hinzuzufügen, damit Sie das Widget im nächsten Schritt hinzufügen können.

Als nächstes müssen Sie den Block zum Feld hinzufügen und das Widget auswählen, das Sie auswählen möchten.

Mit der gleichen Methode können Sie so viele Widgets hinzufügen, wie Sie möchten. Wenn Sie mit allen Einstellungen fertig sind, stellen Sie sicher, dass Sie alle Änderungen veröffentlichen und speichern.

So fügen Sie WordPress-Widgets mit Codierung zu Ihrem Website-Header hinzu

Es ist kein Problem, wenn Ihr WordPress-Theme das Hinzufügen von WordPress-Widgets zum Header Ihrer Website nicht unterstützt, da Sie die gleiche Aufgabe mit ein wenig Codierung erreichen können.

Um das Code-Snippet zu verwenden, gibt es drei Optionen. Es kann in Ihre functions.php-Datei, ein seitenspezifisches Plug-in oder ein Code-Snippet-Plug- in eingefügt werden.

Fügen Sie nun den folgenden Code mit einer der drei oben angegebenen Optionen ein.

function wpb_widgets_init() {
 
    register_sidebar( array(
        'name'          => 'Custom Header Widget Area',
        'id'            => 'custom-header-widget',
        'before_widget' => '<div class="chw-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="chw-title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'wpb_widgets_init' );

Dieser Code erstellt eine neue Seitenleiste oder einen Widget-bereiten Bereich für Ihr Design. Sie können von Appearance aus zur Option Widgets gehen, und dort sehen Sie den Widgetbereich für benutzerdefinierte Kopfzeilen .

Jetzt können Sie die Widgets in diesem Bereich hinzufügen und die Änderungen live auf Ihrer Website anzeigen.

Dazu müssen Sie die Datei header.php in Ihrem Design aktualisieren. Fügen Sie dann den folgenden Code dort ein, wo das Widget angezeigt werden soll.

<?php
 
if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
    <?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>
 
<?php endif; ?>

Dieser Code platziert den Widget-Bereich, den Sie zuvor erstellt haben, im Header-Bereich Ihrer Website.

Möglicherweise müssen Sie auch CSS zu WordPress hinzufügen, um den Header-Widget-Bereich anzupassen, und jedes darin enthaltene Widget wird je nach Design angezeigt. Sie können stattdessen ein Plugin wie CSS Hero verwenden, wenn Sie CSS nicht kennen.

Gehen Sie zu Customize from Appearance, wo Sie die Option Additional CSS finden.

Auf diese Weise können Sie Ihrem Design sofort neues CSS hinzufügen und die Ergebnisse in Echtzeit anzeigen. Sie können die folgenden Codes als Beispiel verwenden, um damit zu beginnen.

div#header-widget-area {
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
    text-align: center;
        padding: 20px;
}
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    }

Um Ihre Änderungen zu speichern, klicken Sie auf die Schaltfläche „ Veröffentlichen “, nachdem Sie Ihr CSS hinzugefügt haben.

Sie können diesen beiden Methoden folgen, um WordPress-Widgets zu Ihrem Website-Header hinzuzufügen. Das ist alles von uns für dieses Tutorial. Folgen Sie uns auf Facebook und Twitter , um über unsere Beiträge auf dem Laufenden zu bleiben.