Stel je voor dat je net een WordPress website hebt gemaakt. Hij is gevuld met inhoud en visuele aantrekkingskracht, maar er ontbreekt iets. Je wilt een aangepast auteursbiovak toevoegen onder elk van je blogberichten. En als je niet weet hoe je moet coderen, lijkt het een onmogelijke taak.
Maar met WordPress code snippets kun je vooraf gemaakte code gebruiken om de resultaten te krijgen die je wilt. Code snippets maken aanpassen eenvoudig.
Het is geen wonder dat 29% van ’s werelds top één miljoen websites gemaakt is met WordPress – het is de makkelijkste manier om een website te bouwen die helemaal van jou is.
En WordPress code snippets zijn daar een groot onderdeel van.
Lees verder om meer te weten te komen over aangepaste code snippets en een aantal van de beste snippets om aan je website toe te voegen.
Wat zijn WordPress code snippets?
WordPress code snippets zijn kleine stukjes code waarmee je specifieke functies of nieuwe mogelijkheden aan je website kunt toevoegen. Zie ze als snelkoppelingen. Je hoeft geen coderingsexpert te zijn of een ontwikkelaar in te huren om kleine wijzigingen aan te brengen of unieke functies aan je website toe te voegen.
Je kunt bijvoorbeeld die bio box toevoegen waar we het eerder over hadden. Of je kunt het logo van de inlogpagina aanpassen aan je eigen merk.
Code snippets helpen je website je visie te weerspiegelen zonder verstrikt te raken in de complexiteit van volledige webontwikkeling. Of het nu gaat om een kleine aanpassing of een grote verandering, WordPress code snippets geven je de kracht om te doen wat je wilt.
Waarom code snippets gebruiken in WordPress?
Code snippets zijn essentieel voor het aanpassen van je WordPress website, het verbeteren van de prestaties door het verminderen van plugin overbelasting en het mogelijk maken van snelle experimenten voor functies zoals flash sales of lay-out veranderingen. Bovendien helpen ze om de unieke persoonlijkheid van je website te creëren, zodat je bedrijf opvalt.
Je wilt geen standaard WordPress website – je wilt een unieke website die helemaal is afgestemd op jouw merk. Met code snippets kun je dat gemakkelijk bereiken zonder een ontwikkelaar in te huren om een website vanaf nul op te bouwen.
Het aangepaste auteursbiovak dat u aan uw website hebt toegevoegd, heeft u bijvoorbeeld de tijd bespaard om een ontwikkelaar in te huren terwijl de snelheid van uw website behouden bleef.
Hoewel WordPress plugins handig zijn, kunnen ze veel extra serverbelasting op je website leggen, waardoor deze langzamer laadt.
Stel dat je een knop voor sociaal delen wilt toevoegen. Een plugin die voor dat doel is ontworpen, kan andere functies bevatten die je niet nodig hebt, waardoor je website trager wordt.
Maar met een knipsel hoef je alleen de specifieke code voor de deelknop toe te voegen, waardoor de impact van onnodige achtergrondruis wordt geminimaliseerd.
Code snippets geven je ook de flexibiliteit om te experimenteren. Hoewel snippets CSS-, HTML-, JavaScript- en PHP-code gebruiken, heb je geen codeerervaring nodig om ze te gebruiken – ze zijn geschikt voor beginners.
Ten slotte verbeteren knipsels je gebruikerservaring (UX). Misschien verandert het knipsel de kleur van de call-to-action (CTA)-knop zodat deze meer opvalt of biedt het een unieke scrolervaring. Deze kleine aanpassingen dragen bij aan uw UX en maken uw website gedenkwaardig.
En dan hebben we het nog niet eens over het feit dat je UX volgens Google een directe invloed heeft op je ranking voor zoekmachineoptimalisatie (SEO).
Hoe WordPress code snippets gebruiken en toevoegen
Het beste aan WordPress code snippets is dat je geen code-expert hoeft te zijn om ze te laten werken.
Laten we stap voor stap bekijken hoe je deze snippets aan je website toevoegt:
1. Stel vast wat je wilt bereiken
Voordat je begint met het toevoegen van snippets, moet je nadenken over het eindresultaat. Wil je je voettekst aanpassen of een nieuwe WordPress widget toevoegen aan de zijbalk? Voor elk is andere code nodig en als je weet wat je doel is, kun je het juiste knipsel vinden.
Hoewel er geen speciale platforms zijn voor gebruikers om WordPress code snippets te delen, kun je kiezen voor een snippet bibliotheek plugin met een database van bewezen, kant-en-klare snippets.
Hier zijn enkele opties:
- WPCode (meest uitgebreid, maar duur)
- Snippet Shortcodes (het beste voor herhalende snippets, zoals biografieën van auteurs)
- Post Snippets (het beste voor blogs; betaalbaar)
Het gebruik van een plugin is de eenvoudigste manier om knipsels toe te voegen – je hoeft je geen zorgen te maken over technische problemen en je kunt eenvoudig ondersteuning vragen als je tegen problemen aanloopt.
En als je geen extra plugins wilt, gebruik dan de speciale Google-zoekopdracht in de volgende stap.
2. Haal het codefragment op en plak het in uw website
Vervolgens krijg je het codefragment dat je wilt gebruiken via een plugin of Google Zoeken.
Als je Google gebruikt, typ dit dan in de zoekbalk:
[Type aanpassing op je website] WordPress “code snippet”.
Als je bijvoorbeeld zoekt naar een auteurs bio box, dan zou die er zo uitzien:
De code die je vindt zou er anders uit moeten zien dan normale lettertypes. Typisch heeft code een monospaced lettertype (zie hieronder), met een dubbele schuine streep (//) die aangeeft wat elke regel code doet.
Zodra u de code hebt gekopieerd (de “//” heeft geen invloed op het resultaat), is het tijd om deze aan uw website toe te voegen. Als je een code snippet plugin zoals Code Snippets Pro gebruikt, volg dan de aanwijzingen van de plugin.
Als je het handmatig toevoegt, hoef je het knipsel alleen maar onderaan je functions.php-bestand te plakken.
Om toegang te krijgen tot dit bestand, ga je naar het dashboard van je hosting en klik je op Geavanceerd.
Dit brengt je naar je cPanel, waar je toegang hebt tot al je bestanden.
Scroll naar beneden naar de sectie Bestanden en klik op Bestanden beheren.
Zodra een nieuw tabblad wordt geopend, klikt u op de knop Zoeken in de rechterbovenhoek en typt u “functions.php” in.
Zoek vervolgens het juiste bestand, dubbelklik om het bestand te downloaden en maak een kopie. In de kopie kunt u uw codefragment plakken.
Zorg ervoor dat je het bestand hernoemt naar de exacte oorspronkelijke naam en sleep het terug naar je cPanel bestandsbeheer.
3. Test uw codefragment
Zodra u uw knipsel aan uw website hebt toegevoegd, bestaat de kans dat het niet werkt. Daarom raden we u aan een kopie te maken van uw functions.php-bestand voordat u wijzigingen aanbrengt – op die manier kan uw website altijd terugkeren naar het oorspronkelijke uiterlijk.
Overweeg daarnaast het gebruik van een staging-website of -omgeving om de werking van het knipsel te testen en te zien hoe het er aan de voorkant uitziet. Uw website wordt niet in realtime bijgewerkt. En voor het geval dat het knipsel niet goed werkt, heeft dit geen invloed op uw realtime UX.
Als je je thema bewerkt, raden we je aan een child-thema te gebruiken en codefragmenten toe te voegen aan het bestand functions.php van je thema.
Controleer ten slotte op functionaliteit, compatibiliteitsproblemen en andere bugs of problemen. Het is belangrijk om te valideren dat je codefragment vrij is van fouten en precies doet wat je bedoelde.
4. Analyseer snelheid en andere statistieken en pas waar nodig aan
Nu uw knipsel werkt, wilt u ervoor zorgen dat het geen negatieve invloed heeft op andere aspecten van uw website. Door de belangrijkste prestatie-indicatoren (KPI’s) te evalueren (bijvoorbeeld te vinden in Google Analytics), weet u of het de moeite waard is om uw knipsel te behouden.
Controleer bijvoorbeeld statistieken zoals de laadsnelheid van pagina’s, gebruikersbetrokkenheid en conversiepercentages – deze geven je inzicht in of je code snippet een waardevolle toevoeging is.
Stel dat je een snippet hebt geïmplementeerd om de kleur van de knop “Toevoegen aan winkelwagentje” te wijzigen. U wilt bijhouden hoe dit uw verkoopconversies beïnvloedt.
De kleurverandering kan de knop visueel aantrekkelijker en opvallender maken, waardoor het conversiepercentage kan stijgen. Of het kan een afleiding worden, waardoor het aantal conversies daalt.
Tot slot is het essentieel om je snelheid bij te houden, omdat dit een belangrijke factor is om hoog te scoren in Google. Als je merkt dat de snelheid van je website constant daalt, kun je de snippet misschien beter verwijderen.
Beste codeknipsels voor WordPress
- Aangepaste auteurs bio box
- Aangepaste aanmeldpagina
- SEO broodkruimels
- Reacties op specifieke berichten uitschakelen
- Dashboard aanpassen voor klanten
- Pictogrammen voor sociale media toevoegen
Laten we nu eens duiken in een aantal van de handigste WordPress code snippets om nieuwe functionaliteiten toe te voegen.
Aangepaste auteurs bio box
Een aangepast auteurs bio kader kan de inhoud van je blogposts verrijken door context te geven over de schrijver. Hoewel je plugins zoals Simple Author Box kunt gebruiken, kun je met een lichtgewicht codefragment hetzelfde resultaat bereiken zonder extra ophoping.
Deze snippet voegt een auteursbiosectie toe onder elk aangepast berichttype, die kan worden aangepast om links naar sociale media, een korte biografie en een auteursafbeelding te bevatten.
Het knipsel downloaden (met tutorial).
Aangepaste aanmeldpagina
Uw inlogpagina is de toegangspoort tot uw website en vaak een van de eerste indrukken die klanten en teamleden van uw merk krijgen. Plugins zoals LoginPress passen het inlogscherm aan – maar een codefragment kan de pagina aanpassen aan je huisstijl.
Wijzig het logo, de achtergrond en de formulierstijlen om vanaf het begin een samenhangende merkervaring te bieden.
SEO broodkruimels
Navigatie met broodkruimels is niet alleen handig voor je bezoekers – het verbetert ook je SEO door zoekmachines te helpen de structuur van je website te begrijpen. Als je wilt dat een plugin dit voor je doet, dan kan Yoast SEO breadcrumbs weergeven samen met andere SEO-verbeterende functies.
Maar je kunt ook een snippet toevoegen om een broodkruimelspoor weer te geven, zodat je geen andere plugin nodig hebt.
Ontvang de code (met tutorial).
Reacties op specifieke berichten uitschakelen
Hoewel reacties uitstekend zijn voor de betrokkenheid, zijn er momenten waarop je ze misschien wilt uitschakelen voor bepaalde berichten. Ja, je zou een plugin zoals Disable Comments kunnen gebruiken, maar een paar regels code kunnen deze klus al klaren.
Met een gericht codefragment kun je aangeven welke berichten of pagina’s geen commentaarsectie mogen weergeven, waardoor je volledige controle hebt zonder de overhead van een plugin.
Ontvang de code (met tutorial).
Dashboard aanpassen voor klanten
Het WordPress dashboard dient als controlecentrum voor het beheren van inhoud, thema’s, sjablonen en plugins. De standaardinstellingen kunnen echter overweldigend zijn voor andere gebruikers van je account, zoals virtuele assistenten, klantenservice of boekhouding.
Met een codefragment kun je widgets verwijderen of toevoegen en het dashboard zo eenvoudig of complex maken als nodig is voor je team.
Ontvang de code (met tutorial).
Pictogrammen voor sociale media toevoegen
Een plugin zoals Social Media Share Buttons & Sharing Icons kan relevante pictogrammen toevoegen, maar heeft misschien functies die je niet nodig hebt. En in dat geval kun je met een codefragment pictogrammen toevoegen zonder extra toeters en bellen. Bovendien kun je aangeven of je de pictogrammen in de header, footer of sidebar wilt hebben.
Ontvang de code (met tutorial).
Mogelijke fouten en hoe ermee om te gaan
Hoewel WordPress code snippets uitstekende hulpmiddelen zijn, komen ze wel met hun eigen uitdagingen en risico’s. Fouten komen in verschillende vormen voor, maar je weet meestal dat er iets mis is wanneer een functie niet werkt, je website ontoegankelijk wordt of je een expliciete foutmelding tegenkomt.
Hier lees je hoe je zes van de meest voorkomende fouten aanpakt:
Syntaxisfout
Een syntaxfout ontstaat meestal door onjuiste of onvolledige code. Dit kan een ontbrekende puntkomma zijn, een extra haakje of zelfs een verkeerd gespelde functienaam. Wanneer dit gebeurt, kan WordPress direct een foutmelding weergeven of kan je website ontoegankelijk worden.
Remedie:
Om dit probleem op te lossen, moet u uw functions.php-bestand openen via uw cPanel of hostingcontrolepaneel. Zoek vervolgens de snippet die het probleem veroorzaakt, corrigeer de fout en laad je website opnieuw met een bijgewerkt bestand.
Pro tip: Valideer altijd de syntax van je code voordat je deze implementeert om dit probleem te voorkomen met behulp van een code validator zoals FreeFormatter.
Conflicten met plugins
Soms kan het gebeuren dat je nieuwe codeknippet botst met de plugins op je website, waardoor een of beide niet meer werken. Vaak komt dit doordat de plugin en het knipsel dezelfde functie proberen aan te passen of te besturen.
Remedie:
De eenvoudigste manier om vast te stellen welke plugin er iets aan de hand is, is om alle plugins te deactiveren en vervolgens elke plugin opnieuw te activeren en elke keer te testen om te zien wanneer het probleem zich weer voordoet. Eenmaal geïdentificeerd, kun je op zoek gaan naar een alternatieve plugin of het knipsel aanpassen zodat het niet langer conflicteert met de plugin.
Thema breekt na het toevoegen van een knipsel
Soms kan het invoegen van een codefragment ervoor zorgen dat je WordPress-thema breekt of zich onvoorspelbaar gedraagt. Dit gebeurt wanneer je codefragment in conflict komt met de code waarop je thema is gebaseerd.
Remedie:
Helaas moet je het codeknipsel onmiddellijk verwijderen, omdat je niet wilt dat dit invloed heeft op je UX. Om dit probleem in de toekomst te voorkomen, moet u nieuwe codefragmenten altijd testen op een staging-versie van uw website voordat u ze uitrolt naar de live website.
Fouten met toestemming
Toestemmingsfouten treden op wanneer de bestands- of maprechten van je WordPress site onjuist zijn geconfigureerd. Het toevoegen van een codefragment onder deze omstandigheden kan resulteren in een mislukking of zelfs je website kwetsbaarder maken voor beveiligingsrisico’s.
Remedie:
Om problemen met de rechten op te lossen, opent u de hoofdmap van uw website met behulp van uw cPanel-bestandsbeheer. Stel de maprechten in op 755 en de bestandsrechten op 644. Als je dit liever niet zelf doet, vraag dan je hostingprovider om hulp.
Knipsel wordt niet uitgevoerd
In sommige gevallen kan het gebeuren dat een knipsel gewoon niet wordt uitgevoerd. Dat kan komen door onjuiste plaatsing, conflicten met andere code of foutieve code.
Remedie:
Controleer eerst of u het knipsel op de juiste locatie in uw functions.php-bestand hebt geplaatst. U kunt de juiste locatie vinden door een snelle Google- of YouTube-zoekopdracht uit te voeren om te zien of andere mensen dezelfde snippet hebben gebruikt.
Als de bestandslocatie correct is, los het probleem dan op door andere recent toegevoegde knipsels of plugins tijdelijk te verwijderen om te zien of er een conflict is. En als dat niet werkt, probeer dan uw knipsel door een codevalidator te halen om te zien of er fouten zijn.
Bezorgdheid over veiligheid
Beveiligingsproblemen zijn het gevolg van slecht gecodeerde snippets en daarom moet je ze altijd van betrouwbare bronnen krijgen. Elke extra code die aan een website wordt toegevoegd , zorgt voor meer kwetsbaarheden – maar als het op de juiste manier wordt gedaan, zorgt het niet voor veiligheidsproblemen.
Remedie:
Nogmaals, probeer fragmenten te krijgen van verifieerbare bronnen. Daarnaast kun je de code door een beveiligingsscanner halen om mogelijke kwetsbaarheden op te sporen. En maak voor de zekerheid een back-up van uw website of functions.php-bestand om er zeker van te zijn dat uw gegevens veilig zijn.
Laatste gedachten: De ultieme gids voor WordPress code snippets: 6 voorbeelden
Code snippets zijn een krachtige manier om je website te verbeteren en aan te passen – en tegelijkertijd de UX te verbeteren. Het kan echter overweldigend lijken om code in te voeren, vooral zonder een plugin.
Gelukkig vereenvoudigen WordPress hostingproviders zoals Bluehost dit proces door plannen aan te bieden die automatisch worden geleverd met staging-omgevingen, zodat je fragmenten kunt testen voordat je live gaat.
En als je ooit vast komt te zitten, biedt de ProDesign Live-service van Bluehost realtime ondersteuning om je door eventuele problemen heen te helpen.
