Wilt u een WordPress-widget toevoegen aan het koptekstgedeelte van uw website?

Met widgets kunt u eenvoudig inhoudsblokken toevoegen in aangewezen secties van uw WordPress-thema.

In deze zelfstudie laten we u zien hoe u eenvoudig een WordPress-widget aan de kop van uw website kunt toevoegen.

Note: Dit is een tutorial op gemiddeld niveau. U moet code toevoegen aan het bestanden van uw WordPress-thema en wat CSS beheersen.

Maar ontdek vóór elke wijziging onze 5 WordPress plugins om een ​​backup van je blog of Hoe maak je een WordPress thema te installeren et Hoeveel plugins moet ik installeren op WordPress.

Laten we dan teruggaan naar waarom we hier zijn. 

Waarom en wanneer moet u een widget aan de kop toevoegen?

Met widgets kunt u eenvoudig blokken met inhoud toevoegen aan een aangewezen gebied in uw WordPress-thema. Deze aangewezen gebieden worden " sidebars "Of gebieden van" widgets.

Een widgetgebied in de koptekst kan worden gebruikt om advertenties, recente artikelen of wat u maar wilt weer te geven.

Dit specifieke domein wordt op alle populaire websites gebruikt om echt belangrijke informatie weer te geven.

Ontdek ook Aangepaste widgets toevoegen na plaatsing op WordPress

widgetgebied aan het hoofd van wordpress

In het algemeen, WordPress-thema's voeg zijbalken toe naast inhoud of in het voettekstgebied. Zeer weinig WordPress-thema's voegen widgetgebieden toe boven de inhoud of in de koptekst.

We adviseren ook om onze te ontdekken MailChimp tutorial in het Frans: de complete gids voor een nieuwsbrief maken

Daarom laten we u in deze zelfstudie zien hoe u een widgetgebied toevoegt aan de kop van uw WordPress-website.

Stap 1: Maak een widgetgebied

Allereerst moeten we een aangepast widgetgebied maken. Met deze stap kunt u een aangepast widgetgebied zien in " Uiterlijk> Widgets Op uw WordPress-dashboard.

U moet deze code aan het bestand toevoegen functions.php Van je thema.

function bpc_widgets_init () {register_sidebar (array ('name' => 'Custom Header Widget Area', 'id' => 'custom-header-widget', 'before_widget' => ') ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init', 'bpc_widgets_init');

Deze code slaat een nieuwe zijbalk of widgetgebied op in uw WordPress-thema.

Als je WordPress nog nooit lokaal hebt geïnstalleerd, kom erachter Hoe kan ik WordPress lokaal te installeren op een pc / Windows met XAMPP

Je kunt naar ' Uiterlijk> Widgets En u ziet een nieuw widgetgebied met de markering ' Aangepaste koptekst Widget .

nieuw WordPress-widgetgebied

Ga je gang en voeg een tekstwidget toe aan dit nieuw gemaakte gebied en sla het op.

Probeer ook onze gids over het toevoegen van widgets.

Stap 2: toon uw widget in de koptekst

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

Omdat we u nog niet hebben laten zien hoe u de zones van weergeeft aangepaste widgets WordPress.

Dit gaan we in deze stap doen.

Hier is ook voor u een lijst met 5 Kritieke WordPress-plug-ins om de inkomsten van uw blog te verhogen

U moet het bestand bewerken header.php In uw WordPress-thema en voeg deze code toe waar u de widgets wilt weergeven.


 
 
 
 

Vergeet niet uw wijzigingen op te slaan.

U kunt vervolgens uw website bezoeken en u ziet de tekstwidget in uw koptekst.

demo-site in gedachten

Het resultaat zal niet noodzakelijkerwijs het meest aantrekkelijk zijn. Daarom heb je CSS nodig zodat het correct wordt weergegeven.

3 Stap: Geef stijl aan uw CSS-headers

Afhankelijk van uw WordPress-thema, moet u wat CSS-code toevoegen om te bepalen hoe de koptekst en het widgetgebied worden weergegeven.

Een van de gemakkelijkste manieren om dit te doen, is door CSS Hero te gebruiken. Met dit laatste kunt u een intuïtieve gebruikersinterface gebruiken om de CSS van een WordPress-thema aan te passen.

Wij adviseren u ook om dit te ontdekken Wat kunt u doen met de Yellow Pencil WordPress-plug-in?

Als u geen plug-in wilt gebruiken, kunt u aangepaste CSS aan uw WordPress-thema toevoegen door naar ' Uiterlijk »Personaliseer Om het WordPress-thema aan te passen.

Lees ook ons ​​artikel over 10 WordPress-plug-ins om het verkeer van een blog te verbeteren

Hiermee kunt u de WordPress Customizer-interface weergeven. U moet op de " extra CSS .

extra WorDPress css

Het tabblad « extra CSS In de " Customizer Hiermee kunt u uw aangepaste CSS toevoegen terwijl u de wijzigingen in het voorbeeld aan de rechterkant bekijkt.

Om redenen die inherent zijn aan deze zelfstudie gaan we ervan uit dat u dit gebied gebruikt om één widget toe te voegen om banneradvertenties weer te geven, of een aangepaste menuwidget.

Hier is een voorbeeld van CSS om u op weg te helpen:

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

Dit is hoe onze aangepaste widget wordt weergegeven in de kop van het thema Twenty Seventeen.

demo thema zeventien wordpress

Ontdek ook enkele premium WordPress-plug-ins  

U kunt andere gebruiken WordPress plugins om een ​​moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.

We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.

1. Smart4y-knopinfo

Smart4y Tooltip is een WordPress Plugin flexibele tool gewijd aan het maken van moderne tooltips zonder enige afhankelijkheid van de Javascript-bibliotheek. Het is volledig responsive en biedt de mogelijkheid om HTML-inhoud in te voegen.

Smart4y Tooltip Responsieve WordPress-plug-in

Met de WYSIWYG-editor kunt u elke tooltip visueel maken zonder code in te voeren, maar als u dat wilt, kunt u dit altijd doen.

Ontdek ook onze 10 WordPress plug-ins om artikelen uit uw blog te evalueren

De andere kenmerken zijn: Ondersteuning voor Builder-pagina, een redelijk responsieve lay-out, de mogelijkheid om globale parameters voor alle tooltips te definiëren of om specifieke parameters voor elke tooltip te definiëren, ondersteuning voor vooraf gedefinieerde visuele effecten, de berekening van de positie van de tooltip in het venster waarvan het formaat is gewijzigd, gedetailleerde documentatie, enz….

Download | Demo | web hosting

2. gerechtvaardigd

Le WordPress Plugin Justified is een responsieve galerij-plug-in die uw miniaturen uitlijnt in een gerechtvaardigd raster met behulp van jQuery, zoals op Flickr. 

Justified-plugin voor WordPress-fotografen,

Het biedt functies die uw galerijen zullen onderscheiden van die van concurrenten!

De belangrijkste kenmerken zijn: responsieve lay-out, speciale flyover-effecten, automatische uitlijning van het raster,  een shortcode-editor, uiterlijk evolledig aanpasbaar, de ondersteuning van pkijkers en vele anderen…

Downloaden | demonstratie | web hosting  

3. Plan e-mails

ce WordPress Plugin zoals de naam al doet vermoeden, kunt u e-mailpublicatie op uw website plannen. Het maakt deel uit van de WordPress-plug-in-extensies "Volg mijn blogpost". E-mails plannen Volg de WordPress-plug-in van My Blog Post

U kunt nu de publicatie van uw e-mails plannen in uren, dagen of weken.

Lees ook ons ​​artikel over 10 WordPress plug-ins om kaarten op uw website te gebruiken

Het biedt de mogelijkheid om een ​​gecombineerde e-mail te sturen voor alle meldingen in plaats van elke e-mail voor elke melding en maakt het ook mogelijk om verschillende e-mailsjablonen voor verschillende e-mailberichten te definiëren, om de ontvangst van uw e-mails uiteindelijk beter verteerbaar te maken. .

Downloadendemonstratie |web hosting

Aanbevolen bronnen

Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.

Conclusie

Alstublieft ! Dat is alles voor deze tutorial, ik hoop dat het je helpt een widgetgebied toe te voegen aan de kop van je WordPress-thema. Aarzel niet om deel met je vrienden op je favoriete sociale netwerken

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie.

Als u suggesties of opmerkingen heeft, laat ze dan achter in onze rubriek commentaires.

...