Hoe u een WordPress-widget aan uw websitekop toevoegt

Wil je een WordPress-widget toevoegen aan het koptekstgebied van je website? Met widgets kunt u eenvoudig inhoudsblokken toevoegen aan aangewezen secties van uw thema. In dit artikel laten we u zien hoe u eenvoudig een WordPress-widget aan de koptekst van uw site kunt toevoegen.


Voeg een WordPress-widget toe aan de koptekst van uw site

Notitie: Dit is een tutorial op gemiddeld niveau. U moet code toevoegen aan uw WordPress-themabestanden en CSS schrijven.

Waarom en wanneer u een headerwidget op uw site nodig heeft?

Met widgets kunt u eenvoudig inhoudsblokken toevoegen aan een aangewezen gebied in uw WordPress-thema. Deze aangewezen gebieden worden zijbalken of widget-ready gebieden genoemd.

Een widget-ready gebied in de koptekst of vóór inhoud kan worden gebruikt om advertenties, recente artikelen of wat u maar wilt weer te geven.

Dit specifieke gebied wordt ‘Below the fold’ genoemd en alle populaire sites gebruiken het om echt belangrijke dingen weer te geven.

Het kopgedeelte op de populaire List25-website

Meestal voegen WordPress-thema’s zijbalken toe naast de inhoud of in het voettekstgebied. Niet veel WordPress-thema’s voegen gebieden toe die klaar zijn voor widgets boven de inhoud of in de koptekst.

Daarom bespreken we in dit artikel hoe u een widgetgebied toevoegt aan de kop van uw WordPress-website.

Stap 1. Een koptekstwidgetgebied maken

Eerst moeten we een aangepast widgetgebied maken. Met deze stap kunt u uw aangepaste widgetgebied zien Uiterlijk »Widgets pagina in uw WordPress-dashboard.

U moet deze code toevoegen aan het functies.php-bestand van uw thema.

functie wpb_widgets_init () {

register_sidebar (array (
‘naam’ => ‘Custom Header Widget Area’,
‘id’ => ‘custom-header-widget’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));

}
add_action (‘widgets_init’, ‘wpb_widgets_init’);

Deze code registreert een nieuwe zijbalk of een widget-klaar gebied voor uw thema.

Je kunt nu naar Uiterlijk »Widgets pagina en u ziet een nieuw widgetgebied met de naam ‘Widgetgebied voor aangepaste koptekst’.

Aangepast widgetgebied voor koptekst

Ga je gang en voeg een tekstwidget toe aan dit nieuw gemaakte widgetgebied en sla het op. Zie onze gids over het toevoegen en gebruiken van widgets in WordPress voor gedetailleerde instructies over het toevoegen van widgets.

Stap 2: Geef uw aangepaste koptekstwidget weer

Als u nu uw website bezoekt, kunt u de tekstwidget die u zojuist hebt toegevoegd aan uw zojuist gemaakte koptekstwidget niet zien.

Dat komt omdat we WordPress nog niet hebben verteld waar dit widgetgebied moet worden weergegeven.

Laten we dat in deze stap doen.

U moet het header.php-bestand in uw thema bewerken en deze code toevoegen waar u uw aangepaste widgetgebied wilt weergeven.

<?php

if (is_active_sidebar (‘custom-header-widget’)): ?>

<?php dynamic_sidebar (‘custom-header-widget’); ?>

<?php endif; ?>

Vergeet niet je wijzigingen op te slaan.

U kunt nu uw website bezoeken en u ziet uw koptekstwidgetgebied.

Ongeklede header-widget

Je zult merken dat het er een beetje ongepolijst uitziet. Dat is waar je CSS nodig hebt om het er beter uit te laten zien.

Stap 3: Style uw header-widgetgebied met behulp van CSS

Afhankelijk van uw thema, moet u CSS toevoegen om te bepalen hoe het widgetgebied van de koptekst en elke widget erin wordt weergegeven.

De eenvoudigere manier om dit te doen is door de CSS Hero-plug-in te gebruiken. Hiermee kunt u een intuïtieve gebruikersinterface gebruiken om CSS van elk WordPress-thema te wijzigen. Zie onze CSS Hero-recensie voor meer informatie.

Als je geen plug-in wilt gebruiken, kun je aangepaste css aan je thema toevoegen door naar te gaan Uiterlijk »Aanpassen bladzijde.

Hiermee wordt de interface voor het aanpassen van het WordPress-thema gestart. U moet op het tabblad ‘Extra CSS’ klikken.

Aangepaste CSS toevoegen aan een WordPress-thema

Op het extra CSS-tabblad in de thema-aanpassing kunt u uw aangepaste CSS toevoegen terwijl u de wijzigingen in de live preview ziet.

Terwille van deze tutorial gaan we ervan uit dat u dit gebied alleen zult gebruiken om een ​​enkele widget toe te voegen om banneradvertenties weer te geven, of een aangepaste menu-widget.

Hier zijn enkele voorbeeld-CSS om u op weg te helpen.

div # header-widget-area {
breedte: 100%;
achtergrondkleur: # f7f7f7;
border-bottom: 1px solid #eeeeee;
text-align: center;
}
h2.chw-title {
margin-top: 0px;
text-align: left;
text-transform: hoofdletters;
lettergrootte: klein;
achtergrondkleur: #feffce;
breedte: 130px;
opvulling: 5px;
}

Zo zag ons aangepaste widgetgebied voor kopteksten eruit op het standaard Twenty Seventeen-thema.

Voorbeeld van koptekstwidget

Mogelijk moet u de CSS aanpassen aan uw thema. Bekijk onze gids over het toevoegen van aangepaste stijlen aan WordPress-widgets.

We hopen dat dit artikel je heeft geleerd hoe je een WordPress-widget toevoegt aan de koptekst van je site. Misschien wilt u ook onze lijst met 25 meest bruikbare WordPress-widgets voor uw site bekijken.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map