Widgets toevoegen aan uw header op WordPress

Niet alle thema's staan ​​u toe om WordPress-widgets toe te voegen aan uw koptekstgebied. Het is echter mogelijk dat u inhoudsblokken in uw WordPress-header wilt opnemen met behulp van widgets om een ​​veel beter uiterlijk te krijgen.

Er zijn twee methoden die u gebruikt om WordPress-widgets in het kopgedeelte te gebruiken. In deze zelfstudie zullen we begrijpen hoe u WordPress-widgets in het kopgedeelte kunt gebruiken.

Waarom zou u een WordPress-widget aan uw websitekoptekst toevoegen?

Wanneer iemand uw WordPress-website bezoekt, zullen ze merken dat de koptekst een van de eerste dingen is. U kunt deze sectie verbeteren om de aandacht van de lezer te trekken door een WordPress-widget aan uw kop toe te voegen.

Een uniek logo en een navigatiemenu zijn vaak opgenomen in websiteheaders om bezoekers te helpen bij het navigeren op uw site. U kunt ook een header-widget gebruiken om nuttige inhoud, banneradvertenties, tijdelijke specials, formulieren met één regel en meer boven of onder dit gedeelte weer te geven.

Hoe WordPress-widgets aan de koptekst toe te voegen met WordPress-thema-opties

Een header-widgetsectie is opgenomen in veel van de beste WordPress-thema's, die u naar uw voorkeur kunt bewerken. Controleer eerst of uw bestaande WordPress-thema bestaat uit een widgetgedeelte in de koptekst.

Om deze optie aan te vinken, gaat u naar Uiterlijk en vervolgens naar Aanpassen en kijkt u of u de koptekst kunt bewerken.

U gaat naar het veld waar u de koptekst kunt bewerken en WordPress-widgets kunt toevoegen. U kunt de koptekst wijzigen, evenals de spaties erboven en eronder, onder aan het scherm. Klik gewoon op het plus- symbool terwijl u met uw muis over een van de vrije gebieden zweeft.

U kunt Widget 1 kiezen uit een pop-upmenu dat verschijnt. Er zijn meer mogelijkheden beschikbaar, maar u moet een van de Widget-opties selecteren om de header-widget gereed te maken.

Klik op het vak Widget 1 in het gedeelte voor het aanpassen van de koptekst om een ​​widgetgebied aan uw koptekst toe te voegen, zodat u de widget in de volgende stap kunt toevoegen.

Vervolgens moet u het blok aan het veld toevoegen en de widget selecteren die u wilt kiezen.

Met dezelfde methode kunt u ervoor kiezen om zoveel widgets toe te voegen als u wilt. Als u klaar bent met alle instellingen, zorg er dan voor dat u alle wijzigingen publiceert en opslaat.

Hoe u WordPress-widgets aan uw websitekoptekst kunt toevoegen met codering

Het is geen probleem als je WordPress-thema geen ondersteuning biedt voor het toevoegen van WordPress-widgets aan de koptekst van je website, omdat je dezelfde taak kunt bereiken met een beetje codering.

Om het codefragment te gebruiken, zijn er drie opties. Het kan in uw functions.php-bestand, een sitespecifieke plug-in worden geplaatst, of u kunt ook een codefragment-plug- in gebruiken.

Plak nu de volgende code met een van de drie bovenstaande opties.

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' );

Deze code maakt een nieuwe zijbalk of widget klaar voor uw thema. U kunt vanuit Uiterlijk naar de Widgets-optie gaan en daar ziet u Custom Header Widget Area .

Nu kunt u de widgets in dit gebied toevoegen en doorgaan met het live weergeven van de wijzigingen op uw website.

U moet hiervoor het header.php-bestand in uw thema bijwerken. Plak vervolgens de volgende code waar u de widget wilt laten verschijnen.

<?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; ?>

Deze code plaatst het widgetgebied dat u eerder hebt gebouwd in de koptekst van uw website.

Mogelijk moet u ook CSS aan WordPress toevoegen om het header-widgetgebied aan te passen, en elke widget erin wordt weergegeven, afhankelijk van uw thema. U kunt in plaats daarvan een plug-in zoals CSS Hero gebruiken als u CSS niet kent.

Ga naar Aanpassen vanuit uiterlijk, waar de optie Extra CSS te vinden is.

Hierdoor kun je direct nieuwe CSS aan je thema toevoegen en realtime de resultaten bekijken. U kunt de volgende codes als voorbeeld gebruiken om mee te 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;
    }

Om uw wijzigingen op te slaan, klikt u op de knop Publiceren zodra u klaar bent met het toevoegen van uw CSS.

U kunt deze twee methoden volgen om WordPress-widgets toe te voegen aan de koptekst van uw website. Dat is allemaal van ons voor deze tutorial. Zorg ervoor dat u zich bij ons voegt op Facebook en Twitter om op de hoogte te blijven van onze berichten.