WordPress Ontcijferd: Kennismaken met de WordPress Thema Editor

Ben je op zoek om het volledige potentieel van je WordPress site te ontsluiten?

WordPress-beginners en professionals weten allemaal dat er zoveel mogelijkheden voor aanpassing zijn via het platform.

En veel van deze gelegenheden bevinden zich binnen je WordPress-thema.

Echter, rommelen in een WordPress-thema kan ernstige gevolgen hebben voor de onvoorbereide.

Daarom zijn we hier om je te helpen voorbereiden.

Blijf lezen voor een diepgaande uitleg over de thema-editor van WordPress en hoe je jouw beste thema kunt vinden, het op je website kunt activeren en het kunt personaliseren om aan te sluiten bij jouw bedrijf en branche.

Opmerking: Er zijn verschillen tussen WordPress.com en WordPress.org sites! WordPress.com is een online websitebouwer waar je een betaalbare, minder aanpasbare site kunt maken. WordPress.org is gratis, open-source software waar je een aangepaste site kunt bouwen die webhosting vereist. In dit artikel ligt de focus op WordPress.org, maar beide platforms gebruiken thema’s en delen veel overeenkomsten. 

Vernieuwen: De Basis Van WordPress Thema’s

Voordat we in de details duiken van het bewerken van je WordPress-thema, laten we snel onze kennis van wat een thema inhoudt opfrissen.

In WordPress is een thema in wezen een groep bestanden die samenwerken om het uiterlijk en de functionaliteit van een website te beheersen. Deze bestanden bevatten zaken zoals paginasjablonen, cascading style sheets (CSS) en meer.

Elke site die op WordPress wordt gelanceerd, komt met een thema. Als je het standaardthema wilt veranderen, kun je een WordPress thema kiezen uit de officiële themadirectory van het platform of een populaire marktplaats zoals ThemeForest.

Of, natuurlijk, je kunt je thema aanpassen met een van de processen die we in dit artikel zullen bespreken, variërend van codevrij tot volledige code tactieken.

Thema Vs. Sjabloon

Thema’s zijn een van de coolste en meest aanpasbare elementen van WordPress.

Wil je het uiterlijk en de indeling van je website fundamenteel veranderen?

Verander gewoon het thema!

Het wisselen van je thema is niet moeilijk, dankzij hoe gemakkelijk WordPress het heeft gemaakt om de meeste thema’s te vinden, te installeren, te activeren en zelfs te bewerken. Met duizenden gratis opties in de WordPress themadirectory en nog duizenden meer aangeboden door derden, kunnen de meeste mensen een thema vinden dat past bij hun industrie, functionele behoeften en technische kennis.

Echter, er is iets waar de meeste thema’s je niet bij kunnen helpen — en dat is het volledig uniek maken van verschillende pagina’s ten opzichte van elkaar.

Stel je wilt dat verschillende pagina’s heel verschillende indelingen hebben. Of, je wilt vergelijkbare ontwerpelementen op verschillende pagina’s, maar wilt dat de inhoud daarin uniek is. Omdat thema’s de opmaak toepassen op de hele website, is dit moeilijker te wijzigen via je thema.

Daar komen sjablonen in het spel.

Sjablonen verschillen niet van thema’s; ze richten zich alleen op de functies van individuele pagina’s of soorten pagina’s versus de hele site.

De meeste thema’s worden geleverd met enkele vooraf bepaalde sjablonen om je pagina’s te beheren, maar je kunt ook je eigen sjablonen bewerken en maken. Dit proces kan echter nog complexer zijn dan werken met thema’s, dus als je geïnteresseerd bent in het aanpassen van sjablonen, raden we je sterk aan om Decoding WordPress: Custom Templates and Template Parts te lezen.

Wat Is De WordPress Thema Editor?

Dit gedeelte begint met een beetje verduidelijking.

Lange tijd was Theme Editor de naam voor de teksteditor binnen het WordPress-beheerdersdashboard, waarmee gebruikers code in de bestanden van het thema konden bewerken.

Dat is er nog steeds en zal het focuspunt zijn van veel van dit artikel. Tegenwoordig wordt het echter technisch gezien “Theme File Editor” genoemd. Dus, als je WordPress-installatie up-to-date is — wat het zou moeten zijn voor beveiligings doeleinden! — werk je met de “Theme File Editor” in plaats van de “Theme Editor”. Je zult merken dat we nog steeds meestal de oudere term gebruiken, omdat zoveel mensen ermee vertrouwd zijn.

We moeten waarschuwen dat werken in de thema-editor met uiterste voorzichtigheid moet gebeuren. Wijzigingen gaan verloren als je thema wordt bijgewerkt of veranderd. Het is ook heel makkelijk om het ontwerp en de functionaliteit van je website te beschadigen — en in het ergste geval kun je jezelf zelfs buitensluiten van je site!

Als je niet veel ervaring hebt met WordPress of programmeren, raden we aan te beginnen met de beginners- en no-code-bewerkingstactiek, en pas technischer te worden als dingen vertrouwd beginnen te voelen.

Waarom De WordPress Thema Editor Gebruiken?

Waarom beginnen mensen met de WordPress thema-editor, wetende dat het zo gevoelig is? Omdat het de beste manier is om bij alle bestanden te komen die je WordPress thema vormen.

De meeste ontwerpelementen zullen in drie bestanden vallen: style.css, functions.php en templates.

Hoewel sommige thema’s meer bestanden bevatten met ontwerpelementen, laten we eerst de kernonderdelen bespreken die je via de thema-editor kunt benaderen.

Style.css Bestand (ook Bekend als Stylesheet)

De meeste op design gerelateerde elementen van een thema — typografie, kleuren, lay-outs — bevinden zich in het style.css-bestand, ook vaak de stylesheet genoemd.

Wijzigen, verwijderen of toevoegen van CSS code in dit bestand is een effectieve manier om de stijl van je website aan te passen.

Functions.php-bestand

Functions.php is waar de code voor de functies en kenmerken van je thema zich bevindt, uiteraard geschreven in PHP.

Nogmaals, met extreme voorzichtigheid, kan code hier worden bewerkt om dingen toe te voegen aan je websitekop en -voet, navigatiemenu’s te wijzigen, berichtopmaak bij te werken, enz.

Sjablonenbestand

Jouw templates bestand bevat ofwel PHP-bestanden of HTML-bestanden (afhankelijk van het thema) die de lay-out van de pagina’s van je website vormen.

Als je wilt veranderen hoe bepaalde pagina’s of paginatypes (denk aan berichtpagina’s, archiefpagina’s, enz.) eruitzien, zou je de wijzigingen in de sjabloonbestanden aanbrengen.

Hoe De WordPress Thema Editor Te Gebruiken

Nu, voor het hoofdevenement!

Blijf lezen om alles te leren wat je moet weten bij het uitzoeken, installeren en op maat maken van je WordPress-thema.

Kies Je Thema

Om te winkelen vanuit de themadirectory van WordPress, log in op je WordPress.org-website, bezoek het Dashboard en navigeer naar Weergave > Thema’s.

Gebruik de Nieuw Toevoegen-knop bovenaan de pagina naast de titel van de Thema’s-pagina of de Nieuw Thema Toevoegen-plusknop om je opties weer te geven.

Je kunt door alle thema’s in de aanbieding scrollen of de functiefilter en zoekbalk gebruiken om de opties te verfijnen.

Klik op een thema of zweef erover en gebruik de Voorbeeld knop om meer te weten te komen over het thema, wat kan inhouden een beschrijving, een demo van hoe het eruit ziet, en soms beoordelingen.

Als geen van de opties overeenkomt met wat je zoekt, kun je ook derde partij themabouwers en marktplaatsen bezoeken zoals het eerder genoemde ThemeForest, StudioPress of Elegant Themes.

Probeer je hetzelfde thema te vinden dat op een website staat die je leuk vindt? Een bron zoals WordPress Theme Detector kan daarbij helpen.

Installeer En Activeer Je Thema

Als je een thema hebt gekozen dat je bevalt uit de WordPress-directory, zie je een knop ‘Installeren’ als je erop klikt of eroverheen zweeft. Dit thema wordt met een enkele klik toegevoegd aan je thema’s-pagina.

Om het op je website te gebruiken, ga terug naar de hoofdpagina van Thema’s (Weergave > Thema’s) en klik op Activeren om het op je website toe te passen.

En als je een thema van een andere bron kiest, is het nog steeds gemakkelijk te gebruiken in WordPress.

Op de hoofdpagina van Thema’s opnieuw, gebruik de Add New knop bovenaan de pagina naast de titel Thema’s.

Op de volgende pagina zie je een knop op dezelfde plek met de naam Thema Uploaden.

Zodra je hierop klikt, zie je waar je het .zip-bestand kunt uploaden dat je hebt ontvangen van de externe bron. Kies Installeer Nu om het naar je Thema’s pagina te uploaden. Van daaruit kun je het activeren zoals elk ander thema.

Pas Je Thema Aan

Dit is je tweede herinnering dat het direct aanpassen van je thema je website kan beschadigen.

Een andere optie om te overwegen als je functionaliteit wilt toevoegen of het uiterlijk van je huidige thema wilt veranderen — plugins! (En widgets!)

WordPress plugins en widgets zijn hulpmiddelen die de functionaliteit uitbreiden en de stijl bijwerken zonder dat er code-aanpassingen nodig zijn. Bovendien zijn ze eenvoudig in gebruik en vaak gratis! Plugins en widgets kunnen worden gebruikt om de SEO van de site te verbeteren (Yoast), e-commercefuncties te installeren (WooCommerce) en nog veel meer.

Als je bang bent om themacode te bewerken of je wilt dat je upgrades blijven werken, zelfs als je van thema wisselt of je thema bijwerkt — probeer dan plugins en widgets.

Als je geen extensies kunt vinden die doen wat je wilt en toch besluit je thema te bewerken, zorg er dan voor dat je WordPress back-upt.

Voor extra veiligheid kun je nog één ding doen om je site te beschermen voor het geval het bewerken van thema’s verkeerd gaat en om je wijzigingen bij te houden door thema-updates heen: Installeer een WordPress child-thema.

Een WordPress child-thema werkt precies zoals het “normale” thema waarvan het is afgeleid — zijn parent-thema. Het bewerken van het child-thema zorgt ervoor dat jouw aanpassingen behouden blijven na updates.

Met die waarschuwingen uit de weg, is het nu tijd om aan te passen!

Ingebouwde Thema Bewerkingstools (Beginnersvriendelijk)

Als je nogmaals onder het tabblad Appearance in het Dashboard kijkt, zou je Editor of Customize moeten zien.

Voor het grootste deel is Customize een tool die je helpt om niet-blok-thema’s te bewerken, terwijl Editor (die verschillende namen heeft: Site Editor, Block Editor, enz.) is ontworpen voor blok-gebaseerde thema’s.

Ongeacht welk thema je hebt, beide platforms zijn zeer visueel, gebruiksvriendelijk en bevatten uitgebreide instructies voor het wijzigen van verschillende site-elementen.

Aanpassen heeft meer beperkte opties voor het wijzigen van je ontwerp, kleurenpalet, lettertypen, enz. De aanpassingsopties variëren per thema.

Je kunt echter ook aangepaste CSS en/of JavaScript toevoegen via Customize. Zorg ervoor dat je op Publish klikt om de gemaakte wijzigingen toe te passen.

Met de Editor-tool voor block-based thema’s, kun je diep ingaan op het aanpassen van pagina’s, sjablonen, styling, enz. Nogmaals, de opties variëren enigszins per thema.

Voor de meeste elementen binnen Editor kun je de code rechtstreeks bewerken.

Bijvoorbeeld, als we Styles selecteren en op de pagina klikken om te beginnen met bewerken, verschijnt er een paneel vol opties aan de rechterkant van het scherm.

Een werkbalk moet ook bovenaan de pagina verschijnen. Gebruik het menu met drie stippen om een lijst met keuzes te openen, inclusief een optie om te wisselen van Visuele editor naar Code-editor.

Hier kun je aan de code werken. Gebruik de Opslaan knop om wijzigingen toe te passen op je thema en site.

Er valt veel te leren over deze enigszins nieuwe manier van het bewerken van WordPress-thema’s. Voor meer informatie, bekijk Wat is WordPress Volledige-Site Bewerking? En hoe beïnvloedt het jouw site?

Host Bestandsbeheer (Coderen Vereist)

Nu gaan we naar het programmeergebied.

Voor de meeste gehoste WordPress-sites kun je de bestanden die je thema vormen openen en bewerken via de bestandsbeheerder van je host.

Deze bestandsbeheerder ziet er voor elke host anders uit, maar we kunnen uitleggen hoe het werkt binnen DreamPress.

Zodra je bent ingelogd, ga naar WordPress > Managed WordPress in de zijbalk.

Vind de website die je wilt bewerken en kies Beheren.

Je zou op de Details pagina voor die website moeten komen. In de sectie Bestandsupload, selecteer Bestanden Beheren.

Open de map die de domeinnaam van jouw website bevat. Van daaruit kun je navigeren naar wp-content > themes. Klik op de map van je huidige WordPress-thema, of welk ander thema je ook wilt bewerken.

Zo kijk je naar alle bestanden waar je wijzigingen kunt aanbrengen om je thema bij te werken.

Zorg ervoor dat je alle wijzigingen die je in de bestandseditor maakt, opslaat.

WordPress Thema Bestandseditor (Meest Geavanceerd)

Meer codering in het vooruitzicht!

Om je thema vanuit WordPress te bewerken, ga je opnieuw naar Dashboard en navigeer je naar Uiterlijk > Thema Bestandseditor (dit was voorheen bekend als “Thema Bestandseditor”).

De teksteditor zou moeten openen; aan de rechterkant zou je een lijst met themabestanden moeten zien. Klik in deze bestanden om je wijzigingen aan te brengen.

Gebruik de Update Bestand knop nadat je je updates hebt voltooid. Als er syntaxisfouten in de code zijn, zal WordPress je verhinderen je wijzigingen op te slaan en de fout markeren, zodat je deze gemakkelijker kunt herstellen.

Als je een thema wilt bewerken dat je niet gebruikt, is er een vervolgkeuzemenu boven de teksteditor waar je kunt selecteren welk thema je wilt bewerken.

Onthoud dat het kiezen van een ander thema hier niet automatisch wisselt welk thema jouw WordPress-website gebruikt.

Om dat te doen, ga naar Appearance > Themes om nogmaals een ander thema te activeren. Dit is ook waar je kunt controleren of je thema’s een update nodig hebben. Het is belangrijk om ze up-to-date te houden om nieuwe beveiligingspatches te installeren die de thema-ontwikkelaar heeft uitgerold.

Eervolle Vermelding: Page Builder Plugin (Geen Code)

Page builder plugins bevatten doorgaans gebruiksvriendelijke drag-and-drop editors om websitepagina’s te ontwerpen — niet thema’s. Daarom hebben we ze als eervolle vermeldingen geclassificeerd. Elementor en WPBakery zijn populaire voorbeelden van page builder plugins.

Waar Elementor solo als websitebouwer gebruikt kan worden, kan het als WordPress-plugin alleen gebruikt worden als pagina-editor.

Afgezien van de technische details, kun je nog steeds Elementor gebruiken om pagina’s te creëren en te bewerken die er precies uitzien zoals je wilt — zonder themabewerking vereist.

Om deze plugin te gebruiken, ga naar Plugins > Nieuwe Toevoegen en zoek naar “Elementor”.

Gebruik de Installeer Nu knop, en klik dan op Activeer om Elementor in de zijbalk van je WordPress dashboard aan te zetten.

We raden je aan de stapsgewijze “Aan de slag” handleiding van Elementor te volgen om de functies en mogelijkheden van deze tool te leren, aangezien het indrukwekkend krachtig is. Zodra je de basis kent, kun je de Elementor plugin gebruiken om prachtige individuele berichten en pagina’s te ontwerpen.

Hoewel Elementor niet echt een themabewerkingstool is in de traditionele zin, kan het nog steeds ongelooflijk voordelig zijn voor iedereen die zijn website wil aanpassen zonder te coderen.

En als je ervoor kiest om te betalen voor Elementor Pro, kun je daadwerkelijk je thema ontwerpen binnen Elementor Theme Builder.

Kunnen We Je Helpen Om WordPress Te Ontcijferen?

De complexiteit van WordPress is praktisch eindeloos — maar dat betekent niet dat je geen volledig voordeel kunt halen uit de software met de juiste begeleiding.

Blijf op de hoogte via de DreamHost-blog voor al het laatste WordPress nieuws en ontdek hoe onze WordPress Hosting en Professionele Diensten je kunnen helpen om het meeste uit je site te halen.