WordPress assembleert meerdere PHP-sjabloonbestanden om leesbare inhoud voor de gebruiker in de browser weer te geven.WordPress-thema's bevatten header.php, footer.php, single.php (voor berichten), page.php (voor pagina's) en zijbalk.php-bestanden, de nieuwste thema's gebruiken extra sjabloonsecties om de hoofdinhoud te genereren.
Al deze sjablonen worden netjes samengesteld en weergegeven wanneer u de WordPress-pagina in uw browser bekijkt.Meestal hoeft u deze bestanden niet aan te passen en zijn er plug-ins beschikbaar om aangepaste functionaliteit in te voegen.In sommige gevallen moet u echter code invoegen in de kop- en voettekstsecties van WordPress.
In dit artikel leggen we uit hoe je dit kunt doen zonder en met plug-ins.
Waarom code invoegen in kop- of voettekst?
De kop- en voettekstsecties zijn handig voor verschillende code-integraties en het toevoegen van extra functionaliteit aan uw site.Hier zijn enkele van de beste voorbeelden waarbij u code moet invoegen in de kop- en voettekst van uw WordPress-site.
Voeg automatische advertentiecode in uit Google AdSense of advertentiecode voor mastheadbod uit een ander advertentieprogramma.
Installeer de trackingcode van Google Analytics en Facebook Pixel.
Voeg captcha in van Bing Webmaster Tools, Google Search Console, Baidu, Yandex en elk ander platform zoals Pinterest.
Voeg aangepaste CSS toe aan de koptekst, zoals Google Fonts-stijlbladen en JavaScript in de voettekst.
Voeg aangepaste componenten zoals broodkruimels in de koptekst in bij gebruik van plug-ins zoals Yoast SEO.
Zoals u kunt zien, zal de lijst langer zijn, afhankelijk van uw behoeften.
Code toevoegen aan kop- en voettekstsecties in WordPress
WordPress biedt standaard geen optie om code in te voegen in kop- en voettekstsecties.De gemakkelijke optie is om het bestand rechtstreeks te bewerken en uw code in te voegen.Hiervoor zijn echter ook plug-ins beschikbaar.In dit artikel leggen we twee manieren uit om code toe te voegen aan de kop- en voettekstsecties van een WordPress-site.
Bewerk handmatig de header.php en footer.php bestanden van het WordPress thema.
Gebruik de plug-in Koptekst en voettekst invoegen om code toe te voegen zonder het bewerken van bestanden.
We zullen ook uitleggen hoe u enkele thema's gebruikt om code in kop- en voetteksten in te voegen met behulp van de haken wp_head en wp_footer.
Handmatig WordPress kop- en voettekstcode invoegen
Deze optie vereist het bewerken van het header.php- of footer.php-bestand in uw WordPress-sitethema en is mogelijk niet beginnersvriendelijk.
Begin eerst met het voorbereiden van codefragmenten of het kopiëren van sites van derden.Zodra u uw kop- en voettekstcode gereed heeft, plaatst u de muisaanwijzer op het menu Uiterlijk in het sitedashboard en klikt u op het tabblad Thema-editor.
Negeer eventuele waarschuwingsberichten die u ontvangt en selecteer uw actieve onderwerp in de vervolgkeuzelijst "Selecteer onderwerp om te bewerken:".
Selecteer het bestand "header.php" of "footer.php" rechts van de huidige weergave.
Zorg ervoor dat u voor de koptekst de code onder de afsluitende ""-tag plakt, dan zou de code voor de voettekst onder " moeten staan" Label.Soms moet u mogelijk ook code invoegen vóór de afsluitende tag.
Klik ten slotte op de knop "Bestand bijwerken" om de wijzigingen op uw site met het toegevoegde fragment op te slaan.
Zorg ervoor dat u uw site test en controleer of de functies die u hebt aangesloten werken zoals verwacht.
WordPress kop- en voettekstcode invoegen met behulp van plug-ins
WordPress stelt u standaard in staat om aangepaste CSS aan uw website toe te voegen onder het gedeelte Uiterlijk > Aanpassing > Aanvullende CSS.U kunt in deze sectie echter geen JavaScript invoegen.Er zijn veel gratis plug-ins en plug-ins beschikbaar voor het invoegen van code, hier zullen we het uitleggen met behulp van "WPBeginner Insert Header and Footer".De plug-in heeft een supereenvoudige interface die beginners gemakkelijk kunnen gebruiken.
Installeer en activeer eerst de plug-in "Insert Header and Footer".Beweeg vanuit uw WordPress-sitedashboard over het menu Plug-ins en klik op Nieuwe toevoegen.
Gebruik de zoekfunctie van de plug-in om "Koptekst en voettekst invoegen" te vinden en klik op de knop "Nu installeren".Nadat het installatieproces is voltooid, "Activeer" de plug-in.
Installeer de plug-in
Ga naar het menu Instellingen, zoek en klik op het submenu Koptekst en voettekst invoegen.
De plug-in biedt drie vakken voor het plaatsen van scripts in koptekst, hoofdtekst en voettekst om code in te voegen.Tot die tijd instrueren externe providers zoals Google Analytics u in welk vak ze hun codefragmenten moeten plaatsen.Zorg er anders voor dat u precies weet waar u de code wilt invoegen.
Plak deze codes in de juiste codes en klik op Opslaan om uw sitewijzigingen te voltooien.
Codescripts worden nu automatisch geladen naar de specifieke locatie waar de site draait.
U kunt de code altijd verder bewerken en de plug-in actief houden, omdat het deactiveren ervan voorkomt dat u aangepaste functionaliteit toevoegt en alle eerder aan uw site toegevoegde scripts uitschakelt.
Code invoegen met plug-ins
Houd er rekening mee dat als de plug-in "Insert Header and Footer" per ongeluk wordt gedeactiveerd of verwijderd, uw code in uw sitedatabase blijft staan.Installeer de plug-in opnieuw of activeer deze opnieuw om eerdere code aan het werk te krijgen.Het wordt ook aanbevolen dat u de cache van uw WordPress-site wist wanneer u wijzigingen aan de kop- en voettekstcodefragmenten in de plug-in toevoegt en opslaat.
Bewerk kop- en voetteksten met thema's
Of u nu uw themabestanden handmatig bewerkt of een plug-in gebruikt, de code die u invoegt, heeft invloed op uw hele website.Je moet plug-ins gebruiken zoals HTML-fragmenten invoegen of aangepaste HTML-blokken in de Gutenberg-editor proberen om aangepaste code alleen in specifieke berichten of pagina's in te voegen.U kunt echter code in kop- en voetteksten invoegen met de nieuwste thema's zoals GeneratePress Premium en Astra Pro.Deze thema's gebruiken de standaard haken wp_head en wp_footer en maken het mogelijk aangepaste beperkingen toe te passen.U kunt bijvoorbeeld broodkruimels in een enkele post invoegen zonder de pagina te beïnvloeden.
Hier gebruiken we het Astra Pro-thema voor instructies, u kunt vergelijkbare stappen uitvoeren in het GeneratePress Premium-thema met behulp van de optie 'Elementen'.
Ga na het installeren van de Astra Pro-add-on naar Uiterlijk > Astra-opties.
Activeer de optie Aangepaste lay-out en klik op de koppeling Instellingen voor die optie.
Klik op de knop "Nieuwe toevoegen" en plak de code die u wilt invoegen in het vak.
Klik in het gedeelte Instellingen voor aangepaste lay-out op het vervolgkeuzemenu Lay-out en selecteer de optie Haken.
Koptekstcode invoegen in Astra-thema
Selecteer in de vervolgkeuzelijst Actie wp_head voor de koptekstsectie en wp_footer voor de voettekstsectie.
Als u slechts één fragment gebruikt, laat u 'prioriteit' leeg.Als u echter meerdere codes op dezelfde hook-locatie invoert, zorg er dan voor dat u de prioriteitsvolgorde instelt om de codes in te voegen.U kunt 10, 20, 30, enz. als prioriteit gebruiken, de laagste heeft voorrang op de andere.
Geef indien nodig details van de afstand tussen boven en onder in pixels op.
Selecteer waar u de code wilt weergeven in het vervolgkeuzemenu Weergeven aan.U kunt specifieke berichten, pagina's, categorieën selecteren of uw hele website invoegen of specifieke berichttypen invoegen, zoals berichten, pagina's of elk aangepast berichttype dat op uw website wordt gebruikt.
Selecteer in de vervolgkeuzelijst Gebruikersrol de gebruikersrol waarvoor u de code actief wilt hebben.
Zodra alle instellingen zijn voltooid, klikt u op de knop Publiceren om uw wijzigingen door te voeren.
Redenen om de plug-in Koptekst en voettekst invoegen te gebruiken
Er zijn zoveel nadelen aan het bewerken van themabestanden of het gebruik van een aangepast thema dat je vasthoudt aan de plug-in-aanpak.Hier zijn enkele van de voordelen die u kunt halen uit het gebruik van de plug-in, behalve dat u misschien geen techneut of een beginner bent.
Omdat de plug-inwinkel scripts op een aparte locatie toevoegt, hoeft u zich geen zorgen te maken over het wissen van code tijdens upgrades, updates of het wijzigen van thema's.U hebt ook geen onderliggende thema's nodig, omdat de plug-in onafhankelijk van het thema van uw site werkt.
Het maakt het toevoegen van aangepaste code in kop- en voetteksten eenvoudig en snel.Bovendien helpt dit de organisatie van codefragmenten op één locatie te behouden.
Het is mogelijk om fouten tegen te komen wanneer u ervoor kiest om uw WordPress-thema te bewerken, dus het gebruik van een plug-in kan dergelijke fouten helpen voorkomen, voorkomen en vermijden.
Laatste gedachten
In veel gevallen moet u het uiterlijk, de manier waarop u werkt of andere functionaliteit aan uw WordPress-site toevoegen.In beide gevallen, als u niet technisch aangelegd bent, vergeet dan niet om de plug-inmethode te gebruiken om kop- en voettekstcode in te voegen.Hoewel thema's als Astra en GeneratePress u hierbij kunnen helpen, moet u de premium-versie kopen.Het kan ook het veranderen van thema's bemoeilijken, waarna u op zoek moet naar plug-ins om te gebruiken.
