Hoe u uw WordPress-thema kunt aanpassen (5 stapsgewijze manieren)

Als u een WordPress-thema heeft geïnstalleerd, maar dit niet helemaal goed voor u is, voelt u zich misschien gefrustreerd. Er zijn tal van opties beschikbaar voor het aanpassen van uw WordPress-thema’s.

De uitdaging is om de juiste manier te vinden om het te doen.

In dit bericht zal ik u door de opties voor het aanpassen van uw WordPress-thema, help om te beslissen welke het beste bij u past en laat u zien hoe u dit veilig en efficiënt kunt doen.

Bekijkt u liever onze videoversie? Klik hieronder op afspelen:

Opties voor het aanpassen van een thema

Voordat we erin duiken en wijzigingen in uw thema gaan aanbrengen, loont het de moeite om te begrijpen wat de opties zijn, aangezien ze geschikt zijn voor verschillende situaties.

Hier is een overzicht van de opties die voor jou beschikbaar zijn:

• Als je functionaliteit aan je thema wilt toevoegen, installeer dan een plug-in.
• Gebruik de Aanpasser in uw WordPress admin-schermen om lettertypen, kleuren en misschien ook de lay-out aan te passen, afhankelijk van uw thema.
• Als u met een paginabuilder-thema werkt, gebruik dan de functies ervan om het ontwerp van uw site aan te passen.
• Als je een framework-thema hebt geïnstalleerd, gebruik dan een van de beschikbare onderliggende thema’s om je site aan te passen, samen met eventuele aanpassingsopties die mogelijk zijn in de beheerdersschermen.
• Als je thema is die specifiek is voor uw site en u zich er prettig bij voelt, bewerk dan de code van het thema rechtstreeks.
• Als u de code van een thema van een derde partij wilt bewerken, maakt u een child-thema aan.

Als u de code wilt bewerken heb je een aantal opties tot je beschikking, van het gebruik van de blokeditor en de Customizer tot het bewerken van de bestanden. We zullen ze allemaal in dit bericht bekijken, maar laten we beginnen met de eenvoudigste optie: een plug-in installeren.

Moet je je thema echt aanpassen?

Soms doe je dat niet ‘ Je hoeft je thema helemaal niet aan te passen: in plaats daarvan moet je een plug-in installeren.

Thema’s bepalen het ontwerp van je site: het uiterlijk en de manier waarop de inhoud wordt weergegeven. Plug-ins voegen extra functionaliteit toe.

Als de wijzigingen die u wilt aanbrengen meer gericht zijn op functionaliteit dan op ontwerp, overweeg dan om zelf een plug-in te installeren. Dit kan een plug-in zijn die je nodig hebt om te schrijven, een die je downloadt uit de plug-in-directory of een die je koopt.

Als je merkt dat je het functions.php-bestand in je thema wilt bewerken, vraag jezelf dan af:

Zou ik deze functionaliteit willen behouden als ik in de toekomst van thema veranderde?

Als het antwoord ja is, moet die code in een plug-in gaan, niet in je thema.

Goede voorbeelden van wat je een plug-in zou gebruiken in plaats van een thema, inclusief het toevoegen van widgets, het registreren van aangepaste berichttypen en taxonomieën , aangepaste velden maken en extra functies toevoegen, zoals een winkel of SEO-verbeteringen.

Uw WordPress-thema aanpassen via de WordPress Admin-schermen

Als de wijzigingen die u wilt aanbrengen ontwerpgericht zijn en relatief eenvoudig, je kunt ze misschien maken via de admin-schermen. De Customizer biedt u verschillende opties om uw thema aan te passen: wat er beschikbaar is, hangt af van uw thema. En misschien ziet u iets dat de Editor wordt genoemd in het menu Uiterlijk. Blijf hier uit de buurt, om redenen die ik kort zal beschrijven.

Uw thema aanpassen via de Customizer

De eenvoudigste manier om uw WordPress-thema aan te passen, is door de WordPress Customizer te gebruiken.

U kunt dit op twee manieren openen:

• Wanneer u uw site bekijkt (wanneer u bent aangemeld), klikt u op de link Aanpassen in de beheerbalk bovenaan het scherm.
• In de admin-schermen, klik op Uiterlijk > Aanpassen.

Dit brengt je naar de Customizer.

In de bovenstaande schermafbeelding heb ik installeerde een gratis thema genaamd ColorMag dat veel aanpassingsopties heeft. Het heeft secties toegevoegd aan de Customizer voor ontwerpfuncties, waaronder een headerafbeelding, sociale media, categoriekleuren en een tabblad Ontwerpopties dat u naar nog meer tabbladen leidt waar u wijzigingen kunt aanbrengen in de lay-out en het ontwerp van uw site.

Verschillende thema’s hebben verschillende aanpassingsopties, maar nieuwere thema’s lijken er steeds meer aan toe te voegen. Als je een thema vindt dat je leuk vindt, maar dat niet helemaal bij je past, zul je merken dat het aanpassen van het thema je precies het ontwerp en de lay-out geeft die je nodig hebt.

De thema-editor (en waarom je het niet gebruikt it)

In uw admin-schermen ziet u misschien een optie genaamd de Theme Editor, die u accepteert via Appearance > Theme Editor.

Dit geeft je toegang tot de bestanden in je thema , wat betekent dat u ze rechtstreeks kunt bewerken.

Niet doen.

Zelfs als je vertrouwd bent met het schrijven van CSS of PHP, is het op deze manier bewerken van de bestanden in je thema een heel slecht idee, om twee redenen:

• Als je een thema van een derde partij heeft gekocht of gedownload, zullen alle wijzigingen die u aanbrengt verloren gaan de volgende keer dat u het thema bijwerkt (en u moet uw thema om veiligheidsredenen up-to-date houden).
• Wat nog belangrijker is, als u een wijziging die uw site kapot maakt, deze niet wordt bijgehouden en de vorige versie van het bestand niet wordt gewijzigd. Je zou de site onherroepelijk kunnen breken.

Als je de code in je thema wilt bewerken, moet je dit doen met een code-editor (bekijk de beste gratis HTML-editors), en dat zou je ook moeten doen Bewerk de bestanden op uw live site pas als u deze op een testsite heeft getest. Als u een thema van een derde partij moet bewerken, moet u dit doen via een child-thema. Meer over beide verderop in dit bericht.

WordPress weet hoe onveilig het is om de thema-editor te gebruiken: het geeft je zelfs een waarschuwing als je er toegang toe probeert te krijgen.

Dus volg het advies van WordPress: niet gebruik de thema-editor!

Paginabouwers en frameworks gebruiken om uw WordPress-thema aan te passen

Een groot deel van de WordPress-thema’s heeft aanpassingsopties, wat betekent dat u wijzigingen kunt aanbrengen in het ontwerp en de lay-out via de Customizer.

Maar sommige thema’s gaan hier verder en zijn ontworpen om uitgebreid en aanzienlijk aangepast te worden. Deze thema’s worden themakaders genoemd.

Een andere optie is om een plug-in te gebruiken waarmee u uw site kunt ontwerpen met een gebruikersvriendelijke interface: dat worden paginabouwers genoemd.

Een pagina gebruiken Builder om uw thema aan te passen

Page Builder-plug-ins zijn ontworpen om het u gemakkelijk te maken om het ontwerp van uw site te bepalen, met behulp van een interface waarmee u kunt zien wat u krijgt.

U installeert een invoegtoepassing voor paginabuilder met een compatibel thema en gebruikt vervolgens de opties die het u geeft om uw site precies zo te ontwerpen zoals u dat wilt.

Een van de bekendste paginabouwers is Elementor, maar u kunt enkele alternatieven vinden in onze verzameling paginabouwers.

Met paginabouwers kunt u uw berichten en pagina’s bewerken met een interface voor slepen en neerzetten, wat betekent dat u kunt zien hoe uw inhoud eruit zal zien en kan elke pagina uniek maken.

Hieronder gebruik ik de Elementor-paginabuilder met het Hello Elementor-thema, dat ermee compatibel is.

Paginabouwers geven u veel flexibiliteit met de lay-out en het ontwerp van uw pagina’s. Als je een websitebouwer als Wix gewend bent, kunnen ze de overgang naar WordPress vergemakkelijken. En als u de voorkeur geeft aan een WYSIWYG-interface voor uw WordPress-inhoud, kunnen ze u helpen uw pagina’s snel te ontwerpen.

Een themakader gebruiken om uw thema aan te passen

Een alternatief voor paginabouwers is thema kaders. Dit zijn suites met thema’s die zijn ontworpen om samen te werken. Er is één hoofdthema dat het raamwerk is, en een keuze uit onderliggende thema’s die u kunt gebruiken om het hoofdthema aan te passen en het eruit te laten zien zoals u dat wilt.

Een voorbeeld van themakaders is Divi, dat heeft aanpassingsopties waarmee u het ontwerp van uw child-thema nog verder kunt aanpassen, inclusief een interface voor slepen en neerzetten vergelijkbaar met die van paginabouwers.

De code van uw WordPress-thema bewerken

Als u vertrouwd bent met het bewerken van CSS en / of PHP, dan kunt u dat bewerk de code in uw thema om uw thema aan te passen.

Dit geeft u de meeste controle.

Als u uw eigen thema bewerkt, dat specifiek is voor uw site en is er speciaal voor ontwikkeld, dan kun je het thema direct bewerken. Maar als u met een thema van een derde partij werkt en dat wilt bewerken, moet u een child-thema maken om te voorkomen dat u de volgende keer dat u het thema bijwerkt, uw wijzigingen kwijtraakt.

Themabestanden bewerken

De eerste stap bij het bewerken van uw WordPress-thema is om te begrijpen welke themabestanden bepalen wat en welke u moet bewerken.

Het stylesheet

Elk WordPress-thema heeft een stylesheet, genaamd style.css. Het bevat alle code voor het stylen van uw site: lay-out, lettertypen, kleuren en meer.

Als u bijvoorbeeld de kleuren in uw thema wilt wijzigen, moet u de stylesheet bewerken. Als je een nieuw lettertype wilt toevoegen, zou je het stylesheet gebruiken om het toe te passen op verschillende elementen, zoals de hoofdtekst en de koppen.

Let op bij het bewerken van de stylesheet: specificiteit betekent dat de code voor een element niet altijd afkomstig is van denk dat het is.Elementen zullen stijl erven van andere elementen die erboven in de hiërarchie van de pagina staan, tenzij je stijl toevoegt die specifiek is voor het onderste element.

Om te ontdekken wat CSS van invloed is op welke elementen op de pagina, kun je gebruik de inspecteur in uw browser om de CSS te bekijken (Chrome DevTools in dit voorbeeld):

U kunt dit vervolgens gebruiken om nieuwe CSS te schrijven die gericht is op individuele elementen of een reeks elementen of klassen op de pagina.

Als al dit gepraat over elementen, klassen en specificiteit nieuw voor je is, wil je misschien vermijden om de CSS van je thema rechtstreeks te bewerken. Tenminste totdat je meer hebt geleerd over CSS en hoe het werkt.

Het functiebestand

Een ander bestand dat vrijwel elk thema zal hebben, is het functiebestand (functions.php) . Dit is het bestand dat een heleboel dingen in je thema laat werken. Daarin vindt u code om themafuncties zoals aanbevolen afbeeldingen, widgets en meer te registreren.

Als u in de verleiding komt om functionele code aan uw thema toe te voegen, voegt u deze hier toe. Maar let op: in de meeste gevallen zou je echt een plug-in moeten schrijven. Vraag jezelf af:

Zou ik deze functionaliteit willen behouden als ik in de toekomst van thema verander?

Als het antwoord ja is, schrijf dan een plug-in in plaats van code toe te voegen aan het functiebestand. Plug-ins hoeven niet groot te zijn: niets belet u om er een te maken voor een paar regels code.

Het functiebestand is allemaal geschreven in PHP, dus u moet bekend zijn met dat. Kopieer de code die u via een Google-zoekopdracht vindt niet blindelings: neem de tijd om uit te zoeken wat die code doet en om deze te begrijpen. Op die manier is de kans kleiner dat u code toevoegt die niet zo goed is als zou moeten.

De themasjabloonbestanden

De meeste bestanden in een thema zijn themasjabloonbestanden . Dit zijn bestanden die bepalen welke inhoud WordPress op een bepaalde pagina uitvoert, en worden gekozen volgens de sjabloonhiërarchie.

Als je de manier wilt veranderen waarop inhoud wordt uitgevoerd op een bepaald berichttype, pagina of archief , moet je een van deze bestanden bewerken of een nieuwe maken.

Stel dat je thema bijvoorbeeld een archive.php-bestand heeft dat wordt gebruikt om archiefpagina’s voor categorieën en tags uit te voeren. U wilt wijzigingen aanbrengen in de manier waarop tags worden uitgevoerd. Dus je maakt een bestand aan met de naam “tag.php”, dat gebaseerd zou zijn op archive.php met je aanpassingen.

Nogmaals, wees voorzichtig met het bewerken van de bestanden: ze kunnen je site kraken. Test altijd op een lokale installatie met behulp van een tool zoals DevKinsta en / of staging-site.

Welke van deze bestandstypen u ook moet bewerken, u moet het op de juiste manier doen. Lees het onderstaande gedeelte over best practices om erachter te komen hoe u uw code op een manier die uw site niet kapot maakt en u geen beveiligingsproblemen bezorgt.

Een thema van derden aanpassen met een kindthema

Als het thema dat u die op uw site draait, is van een derde partij en u wilt de code bewerken, u moet een child-thema maken.

Dit komt omdat als u het thema rechtstreeks bewerkt en u het vervolgens bijwerkt ( wat je zou moeten doen), verlies je alle wijzigingen die je hebt aangebracht.

Het maken van een child-thema bestaat uit vier stappen:

1. Maak een nieuwe map in wp-content / thema’s.
2. Maak in die map een stylesheet. In dat stylesheet tel l WordPress dat dit een child-thema is van uw bestaande thema.
3. Voeg kopieën van de bestanden die u wilt bewerken toe aan het child-thema en bewerk ze daar.
4. Activeer het child-thema in uw site.

WordPress zal altijd een bestand uit het onderliggende thema gebruiken om inhoud uit te voeren, tenzij er een bestand hoger in de hiërarchie in het hoofdthema staat. Als er twee versies van hetzelfde bestand zijn, wordt de versie van het onderliggende thema gebruikt. Dit betekent dat uw nieuwe bestand in het child-thema het bestand uit het hoofdthema zal overschrijven.

Best practices voor het aanpassen van WordPress-thema’s

U bent dus van plan om uw thema aan te passen. Voordat u doorgaat en de wijzigingen aanbrengt, volgt u deze tips om ervoor te zorgen dat u het veilig doet en dat u uw site niet kapot maakt, deze niet kwetsbaar maakt voor aanvallen of uw code kwijtraakt.

Indien mogelijk , Aanpassen zonder code te bewerken

Als u uw aanpassingen kunt maken via de Customizer of elders in de admin-schermen, is dit veiliger dan het bewerken van de code.

Bewerk de code alleen als bekend met CSS (voor de stylesheet) en PHP (voor andere themabestanden) en je weet hoe je het veilig moet doen.

Gebruik een lokale ontwikkelingssite om uw wijzigingen aan te brengen

Als u de code in uw thema bewerkt of een child-thema maakt om wijzigingen aan te brengen, moet u het ontwikkelingswerk doen op een lokale installatie van WordPress met uw thema geïnstalleerd en uw inhoud gekopieerd van uw live site.

Op deze manier heeft u een spiegel van uw live site om uw wijzigingen te testen. Werken op een lokale site heeft geen effect op uw live site en kan sneller zijn.

Zelfs als u de Customizer gebruikt, kan het handig zijn om een lokale versie van uw site te gebruiken om te testen terwijl u kan uw wijzigingen publiceren en testen zonder de live site te beïnvloeden.

Zodra u de wijzigingen aan uw thema heeft getest, kunt u deze uploaden naar uw live site of, nog beter, u kunt het testen op een staging-site en zet deze vervolgens tot leven.

Gebruik versiebeheer

Wanneer u wijzigingen aanbrengt in uw thema, moet u versiebeheer gebruiken om uw wijzigingen bij te houden.

Eenvoudig gezegd betekent dit het versienummer van het thema wijzigen en kopieën van beide versies bewaren. Maar als het jouwe is om versiebeheer correct uit te voeren, moet je een service zoals GitHub gebruiken om je wijzigingen bij te houden.

Op deze manier kun je, als een wijziging problemen veroorzaakt, deze gemakkelijk terugdraaien zonder dat je handmatige bewerkingen.

Versiebeheer is zelfs nog handiger als u in een team werkt, omdat u kunt zien wat andere leden doen. Zorg ervoor dat je onze git vs Github-gids leest.

Gebruik een staging-site om je wijzigingen te testen

Als je toegang hebt tot een staging-site (zoals Kinsta’s gratis staging-site die bij alle plannen), is het testen hiervan voordat u de nieuwe versie van uw thema (of het nieuwe child-thema) op uw live site activeert de veiligste manier om verder te gaan.

Dit komt omdat elke lokale site enkele verschillen zal hebben met uw live site: deze bevindt zich op een andere server (een gemaakt op uw lokale computer), draait er mogelijk een andere versie van PHP of een van de andere tools op uw site.

Maak een kopie van uw live site op uw staging-server en upload en activeer vervolgens uw nieuwe thema. Test uw site grondig om er zeker van te zijn dat alles werkt, en dan kunt u uw wijzigingen naar uw live site pushen.

Maak uw thema responsief

Eventuele wijzigingen die u in uw thema moet aanbrengen zowel mobiel als desktop werken.

Nu steeds meer mensen toegang hebben tot internet via een mobiele telefoon en de Mobile-first-index van Google, is het nu waarschijnlijk belangrijker dat uw thema op mobiel werkt dan het doet op desktop. Dus alle wijzigingen die u in uw thema aanbrengt, moeten mobielvriendelijk zijn, of bij voorkeur mobiel, waar relevant.

Dit is voornamelijk van toepassing op alle wijzigingen die u aanbrengt in uw stijl of lay-out: controleer of de nieuwe lay-out werkt op mobiele apparaten en dat u mediaquery’s heeft toegevoegd, zodat de lay-out zich aanpast aan verschillende schermformaten.

Als uw thema niet reageert, heeft dit een negatieve invloed op uw positie in zoekmachines en conversiepercentages.

Als u geen toegang heeft tot veel verschillende mobiele apparaten om op te testen, kunt u een tool als BrowserStack gebruiken om te zien hoe uw site eruitziet op verschillende apparaten. U kunt ook de ontwikkelaarstools in uw browser en de responsieve weergaven in de Customizer gebruiken.

Zorg ervoor dat uw aanpassingen geen invloed hebben op de toegankelijkheid

Eventuele wijzigingen in uw thema moeten ook toegankelijk zijn voor gebruikers met een handicap of sensorische beperking .

Het gaat er niet alleen om ervoor te zorgen dat uw site werkt op schermlezers: andere overwegingen zoals kleurenschema’s en lettergroottes zijn belangrijk voor een groot aantal mensen.

Als de veranderingen die u aan uw thema toevoegt, zijn om de kleuren helderder of de tekst kleiner te maken, denk nog eens goed na: dit kan het moeilijk maken voor mensen om uw site te lezen of er interactie mee te hebben.

Voordat u live wijzigingen aanbrengt, gebruik een toegankelijkheidscontrole om uw site te testen en zorg ervoor dat deze geen mensen uitsluit.

Houd u aan de WordPress-coderingsnormen

Als u de code in uw thema bewerkt of een chi ld-thema, moet u ervoor zorgen dat uw code in overeenstemming is met de coderingsstandaarden van WordPress.

Deze standaarden zijn er om een consistente en kwaliteit van de code te garanderen en om te voorkomen dat code een puinhoop is. Er zijn standaarden voor PHP, CSS en JavaScript, dus neem even de tijd om de voor u relevante standaarden te controleren en zorg ervoor dat u ze volgt.

Als uw bestaande WordPress-thema goed is gecodeerd en u schrijft nieuwe code op een manier die daarmee consistent is, u bent goed op weg om ervoor te zorgen dat uw code compatibel is. Zorg ervoor dat u opmerkingen toevoegt aan eventuele wijzigingen die u in het thema aanbrengt, zodat u of anderen weten wat u deed toen u in de toekomst weer aan de code kwam werken.Je denkt misschien dat je het niet snel zult vergeten, maar na een paar maanden is het verrassend gemakkelijk te vergeten waarom je een regel code hebt bewerkt.

Moet je je # WordPress-thema aanpassen om het uniek te maken? Er zijn tal van mogelijkheden! Kies de juiste voor jou in onze uitgebreide gids! 👚👔Klik om te tweeten

Samenvatting

Het aanpassen van uw WordPress-thema is niet zo moeilijk. Soms is het een eenvoudig geval om de Customizer te gebruiken om wijzigingen aan te brengen in de lettertypen of kleuren (lees onze uitgebreide gids over WordPress-lettertypen). Andere keren moet je een nieuw child-thema maken om een nieuw sjabloonbestand aan een thema toe te voegen.

De opties die je hebt om je thema aan te passen, zijn onder meer het gebruik van een plug-in of de Customizer, het rechtstreeks bewerken van de code van het WordPress-thema , of het maken van een child-thema.

Identificeer de juiste optie voor jou en breng je aanpassingen veilig aan, allemaal zonder je site te breken.