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
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 .
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.
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 .
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.
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.
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.
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".
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. .
Downloaden | demonstratie | web hosting
Aanbevolen bronnen
Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.
- Hoe maak je Excel- en Word-documenten op WordPress
- Hoe het WordPress-logo van het dashboard aan te passen
- Bestanden zoeken om te bewerken vanuit een WordPress-thema
- Hoe de CSS van uw WordPress-website aan te passen
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.
...
dag! Ik zou graag willen weten of je de kans hebt om me te vertellen hoe je een "infobox" kunt plaatsen die lijkt op degene die hier aan het begin van dit artikel wordt gebruikt, inclusief de klikbare knoppen naast "Downloaden" en "Spreadsheets", de lay-out is erg leuk. Dank je!
De code die header.php toevoegt, werkt niet
Meneer, ik heb het geprobeerd. Inderdaad, de pagina met widgets is een uitvoer die de toevoeging van widgets definieert. En ik heb het toegevoegd. Wanneer stap 2 de code niet in de php-header invoert. Raad 2, wat is de fout, meneer?
In de eerste getoonde code, die is om een nieuw widgetgebied te genereren, begin je met het typen van "function", maar ik zou zeggen dat het begint met "function". Eigenlijk heeft deze code verschillende fouten waardoor deze tijdens het schrijven verkeerd is. Ik zou het op prijs stellen als het wordt gecorrigeerd.
OK.
🙂 Alles is in orde, alleen legt niemand in hun advies uit waar de code moet worden toegevoegd aan “functions.php !!! " Het is belangrijk! Iedereen gebruikt de "verschillende" thema's ...
Hallo,
Bedankt voor deze ondersteuning.
Ik wist hoe ik mijn zoekbalk in de gepersonaliseerde koptekst moest toevoegen. Aan de andere kant is het moeilijker om de stijl te personaliseren ...
Ik wil de grootte, de positie (dat het niet de volledige breedte van de koptekst in beslag neemt) en de achtergrondkleur wijzigen.
Dank u bij voorbaat.
Hallo Thomas,
Daar is een beetje CSS-kennis voor nodig. Maar ik raad deze uitstekende WordPress plug-in aan: https://codecanyon.net/item/yellow-pencil-visual-css-style-editor/11322180?ref=voirplusgrand