Wil Je Je Eigen Aangepaste WordPress-thema Bouwen?

Als je wilt dat iets op een bepaalde manier wordt gedaan — nou, dan moet je het misschien zelf doen. Hoewel er veel geweldige WordPress-thema’s beschikbaar zijn, kan het vinden van een thema dat aan je specifieke eisen voldoet moeilijk blijken. In je zoektocht naar de perfecte oplossing, kun je in de verleiding komen om je eigen aangepaste WordPress-thema te creëren.

Gelukkig is het maken van een aangepast thema voor WordPress een relatief eenvoudig proces. Verrassend genoeg vereist het niet veel technische kennis of ervaring met webontwikkeling. Bovendien kan het bouwen van je eigen thema zeer de moeite waard zijn, omdat je je site precies zo kunt krijgen zoals je wilt.

Het Ontwerpen Van Een Aangepaste WordPress Website

Je wilt dat je site er geweldig uitziet en alle functionaliteiten heeft die je nodig hebt, dus bekijk je de WordPress Theme Directory:

Helaas voldoet niets van wat je ziet aan je eisen, en je wilt geen compromissen sluiten over je visie. Misschien wil je iets unieks om je site te laten opvallen, maar je wilt geen geld uitgeven aan een premium thema.

Paginabouwers

Een optie is het gebruik van een page builder plugin. Deze hulpmiddelen stellen je in staat om een bestaand thema te nemen en de lay-out te herarrangeren naar je behoeften. De meeste populaire page builders bieden eenvoudige slepen-en-neerzetten bediening zonder dat er codeervereisten zijn. Bepaalde multifunctionele thema’s hebben deze functie ingebouwd.

Blokthema’s

Als je besluit de native WordPress-editor te proberen, is volledige sitebewerking een functieset in WordPress die verschillende hulpmiddelen bevat om het ontwerpproces toegankelijker te maken voor site-eigenaren.

Met deze nieuwe Site Editor kun je slepen-en-neerzetten blokken gebruiken om het grootste deel van je site aan te passen vanuit één interface, inclusief paginasjablonen, zonder code te gebruiken. Hier is onze complete gids voor Volledige Sitebewerking.

Thema Aanpassing

Als je een aanpasbaar thema kiest, kun je ook het uiterlijk van je site aanpassen zonder technisch te worden. Met behulp van de WordPress Customizer en het Theme Options panel, zou je in staat moeten zijn om verschillende ontwerpelementen aan te passen:

• Kleurenschema: Van de achtergrondkleur van je site tot de specifieke tint van je tekstkleur.
• Typografie: Dit omvat de lettertypen die op je site worden gebruikt en hoe tekst wordt weergegeven in verschillende soorten inhoud.
• Indeling: Bepaalde thema’s laten je schakelen tussen verschillende indelingen en kiezen hoe je site zich moet aanpassen aan verschillende schermgroottes.

De exacte keuze van opties hier hangt af van het thema dat je kiest en hoe dit aansluit bij de rest van je merkactiva en marketingcampagnes. Premium thema’s bieden doorgaans meer mogelijkheden voor aanpassing.

Een Child-thema Maken

Als je meer controle wilt, kun je overwegen om een child-thema te maken.

Gezien de hoeveelheid keuzes in de WordPress Themes Directory, zul je waarschijnlijk een thema vinden dat aan sommige (zo niet alle) van je behoeften voldoet. In plaats van te beginnen met een zeer basissjabloon, kun je het bestaande thema aanpassen om aan jouw visie te voldoen.

Op het eerste gezicht werkt een WordPress child-thema zoals elk ander thema. Het belangrijkste verschil is dat een child-thema kenmerken erft van een parent-thema (het oorspronkelijke thema dat je hebt gekozen om te gebruiken).

Deze relatie stelt het child-thema in staat om specifieke delen van het parent-thema te overschrijven terwijl het grootste deel van het uiterlijk en de functionaliteit van de parent behouden blijft.

Child-thema’s bieden een efficiënte methode om een bestaand thema aan te passen zonder de bestanden van het parent-thema te wijzigen. Het updaten van het parent-thema en child-thema voor beveiliging en bugfixes is essentieel. Meestal hoeft alleen het parent-thema bijgewerkt te worden.

Het gebruik van een child-thema is daarom een effectieve manier om een unieke online aanwezigheid te creëren zonder te diep in de wereld van ontwikkeling te duiken.

Volledige Controle

Soms is zelfs dit niet voldoende. Wanneer je iets echt unieks wilt bouwen, is het tijd om te overwegen je eigen thema te creëren.

Gelukkig is het ontwikkelen van een thema voor WordPress gemakkelijker dan je misschien denkt. Dankzij de gebruiksvriendelijke interface van het platform en de talrijke beschikbare tools, kan bijna iedereen een aangepast thema maken.

We gaan je door het proces leiden om je eerste thema te maken. Om te beginnen heb je twee dingen nodig:

• Je eigen WordPress website
• Een kwalitatief hostingplan

Je zult ook profiteren van ervaring met lokale staging of testomgevingen, aangezien je er een gaat gebruiken om je thema te creëren. Enige kennis van CSS en PHP zal ook nuttig zijn (hoewel niet strikt noodzakelijk).

Ten slotte is er één belangrijk hulpmiddel dat je wilt hebben, wat het proces veel gemakkelijker zal maken: een starterthema.

Wat Is Een Starterthema? (En Waarom Zou Je Het Moeten Gebruiken)

Een starterthema is een basaal WordPress-thema dat je kunt gebruiken als fundament om je eigen thema te maken. Hierdoor kun je bouwen op een solide raamwerk zonder je zorgen te maken over de complexiteiten van het coderen van een thema vanaf nul. Het zal je ook helpen om te begrijpen hoe WordPress werkt door je de basisstructuur van een thema te tonen en hoe alle onderdelen samenwerken.

Er zijn veel uitstekende starter-thema’s beschikbaar, waaronder Underscores, UnderStrap en Bones (om er maar een paar te noemen).

We gebruiken Underscores voor onze tutorial. Het is een solide keuze voor beginners omdat het alleen de basis bevat. Bovendien is dit startersthema ontwikkeld door Automattic (het team achter WordPress.com), wat betekent dat het waarschijnlijk veilig, compatibel en op lange termijn goed ondersteund is.

Hoe Je Je Eerste WordPress Thema Ontwikkelt (In 5 Stappen)

Nu de voorbereiding achter de rug is, ben je eindelijk klaar om je eerste thema te gaan maken. Zoals we eerder vermeldden, gebruiken we een starterthema voor deze uitleg.

Echter, als je alles zelf wilt proberen te creëren zonder sjabloon, kan dat, maar die aanpak vereist veel meer programmeervaardigheid.

Stap 1: Stel Een Lokale Omgeving In

Het eerste wat je moet doen is een lokale ontwikkelomgeving creëren. Dit is in feite een server die je op je computer installeert, die je kunt gebruiken om lokale WordPress-sites te ontwikkelen en te beheren. Een lokale site is een veilige manier om een thema te ontwikkelen zonder je live site te beïnvloeden.

Er zijn veel manieren om een lokale omgeving te creëren, maar wij gebruiken Local. Dit is een snelle, eenvoudige manier om gratis een lokale versie van WordPress te installeren en het is compatibel met zowel Mac als Windows:

Om te beginnen, selecteer de gratis versie van Local, kies je platform, voeg je gegevens toe en download de installatiebestanden. Wanneer de installatie is voltooid, kun je het programma op je computer openen.

Hier wordt je gevraagd om je nieuwe lokale omgeving te configureren:

Dit is een eenvoudig proces, en je zult je lokale WordPress-site binnen enkele minuten klaar hebben. Eenmaal opgezet, zal je nieuwe site er precies uitzien en werken zoals een live WordPress-website.

Stap 2: Download En Installeer Je Startthema

Zoals de meeste startthema’s, is Underscores heel gemakkelijk om mee te beginnen. Je hoeft eigenlijk alleen maar naar de website te gaan en je thema te benoemen:

Als je wilt, kun je op Geavanceerde Opties klikken om het basisthema verder aan te passen:

Hier kun je meer informatie invullen, zoals de naam van de auteur, en het thema een beschrijving geven:

Er is ook de _sassify! optie, die Syntactically Awesome StyleSheets (SASS) bestanden aan je thema zal toevoegen. SASS is een preprocessing taal voor CSS die het mogelijk maakt om variabelen, nesting, wiskundige operatoren, en meer te gebruiken.

Wanneer je je keuzes hebt gemaakt, kun je op Generate klikken, waarmee een .zip-bestand wordt gedownload dat je startthema bevat. Dit is het kernbestand waaromheen je je eigen thema gaat ontwikkelen, dus je moet het op je lokale site installeren.

Nadat je je thema hebt geïnstalleerd, kun je je site voorvertonen om te zien hoe deze eruitziet. Het is nu heel basaal, maar dat zal niet lang zo blijven!

Stap 3: Leer Over De Verschillende Componenten Van Een WordPress Thema

Voordat je jouw thema kunt aanpassen, moet je het doel van de onderdelen begrijpen en hoe deze in elkaar passen.

Eerst gaan we het hebben over templatesbestanden, die de belangrijkste bouwstenen van een WordPress-thema zijn. Deze bestanden bepalen de indeling en het uiterlijk van de inhoud op je site.

Bijvoorbeeld, header.php wordt gebruikt om een kop te maken, terwijl comments.php je in staat stelt om reacties te tonen.

WordPress bepaalt welke sjabloonbestanden op elke pagina gebruikt worden door de sjabloonhiërarchie te doorlopen. Dit is de volgorde waarin WordPress naar de overeenkomende sjabloonbestanden zal zoeken elke keer dat een pagina op je site wordt geladen.

Bijvoorbeeld, als je de URL http://example.com/post/this-post bezoekt, zal WordPress de volgende sjabloonbestanden in deze volgorde zoeken:

1. Bestanden die overeenkomen met de slug, zoals this-post
2. Bestanden die overeenkomen met de post-ID
3. Een algemeen enkel berichtbestand, zoals single.php
4. Een archiefbestand, zoals archive.php
5. Het index.php bestand

Aangezien het index.php bestand vereist is door alle thema’s, is het de standaardoptie als er geen ander bestand gevonden kan worden. Underscores bevat de meest voorkomende themabestanden, die direct uit de doos werken. Je kunt echter met het bewerken ervan experimenteren als je wilt voelen hoe ze samenwerken.

Belangrijke Themabestanden

Naast het index.php-bestand vind je de volgende bestanden in de meeste WordPress-thema’s:

• header.php: Hierin staat de HTML voor je aangepaste koptekstsjabloon, inclusief metadata en links naar stijlbladen. Let op dat menu’s meestal worden afgehandeld door de WordPress aangepaste menufunctie.
• footer.php: Dit bestand bevat de HTML voor het voettekstsjabloon van je website.
• sidebar.php: Als je wilt dat je website een zijbalk heeft, komt de code hiervandaan. Bedenk dat dit slechts de structuur is; widgets worden beheerd vanuit het beheergebied.
• single.php: Dit is het sjabloonbestand voor individuele blogposts. Als je verschillende posttypes wilt ondersteunen, kun je meer dan één bestand aanmaken.
• page.php: De standaard lay-out van individuele pagina’s komt uit dit bestand. Ook hier kun je meer dan één sjabloon aanmaken — bijvoorbeeld, je kunt een productpaginaontwerp voor een online winkel creëren.
• comments.php: Dit bestand regelt de weergave van reacties onder je blogposts en op pagina’s.
• search.php: Wanneer iemand de zoekfunctie op je website gebruikt, bepaalt dit sjabloon hoe de zoekresultaten worden weergegeven.

In het algemeen hoef je deze bestanden alleen te bewerken als je inhoud wilt toevoegen of de indeling van je site drastisch wilt wijzigen. De meeste andere aanpassingen kunnen worden gemaakt met behulp van aangepaste CSS in je stylesheet-bestand.

De Lus

Een ander belangrijk element dat je moet begrijpen is de Loop. WordPress gebruikt deze code om inhoud weer te geven, dus op veel manieren is het het kloppend hart van je site. Het verschijnt in alle sjabloonbestanden die berichtinhoud weergeven, zoals index.php of sidebar.php.

The Loop is een complex onderwerp waarover we je aanraden meer te lezen als je wilt begrijpen hoe WordPress berichtinhoud weergeeft. Gelukkig zal de Loop al in je thema geïntegreerd zijn dankzij Underscores, dus je hoeft je er voorlopig geen zorgen over te maken.

Stap 4: Configureer Je Thema

Het is makkelijk om te denken dat thema’s puur voor cosmetische doeleinden zijn, maar ze hebben eigenlijk een enorme invloed op de functionaliteit van je site. Laten we kijken hoe je een paar basisaanpassingen kunt maken.

Voeg Functionaliteit Toe Met Hooks

Hooks zijn codefragmenten die in sjabloonbestanden worden ingevoegd, waarmee je PHP-acties kunt uitvoeren op verschillende delen van een site, styling kunt invoegen en andere informatie kunt weergeven. De meeste hooks zijn direct geïmplementeerd in de WordPress core-software, maar sommige zijn ook nuttig voor themaontwikkelaars.

Laten we eens kijken naar enkele van de meest voorkomende hooks en waarvoor ze gebruikt kunnen worden:

• wp_head(): Toegevoegd aan het <head> element in header.php. Het activeert stijlen, scripts en andere informatie die draait zodra de site laadt. Dit wordt vaak gebruikt om Google Analytics code in te voegen.
• wp_footer(): Toegevoegd aan footer.php vlak voor de </body> tag.
• wp_meta(): Dit verschijnt meestal in sidebar.php om extra scripts te bevatten (zoals een tagwolk).
• comment_form(): Toegevoegd aan comments.php direct voor de sluitende </div> tag om commentaargegevens te tonen.

Deze hooks zijn al opgenomen in je Underscores-thema. Wij raden echter nog steeds aan om de Hooks Database te bezoeken om alle beschikbare hooks te zien en meer te leren over hen.

Stijlen Toevoegen Met CSS

Cascading Style Sheets (CSS) bepalen het uiterlijk van alle inhoud op je site. In WordPress wordt dit bereikt met behulp van het style.css bestand. Dit bestand is al in je thema opgenomen, maar bevat op dit moment alleen de basis, standaard styling:

Als je snel een voorbeeld wilt zien van hoe CSS werkt, kun je hier een van de stijlen bewerken en het bestand opslaan om de effecten te zien. Je kunt bijvoorbeeld de volgende code vinden (meestal op regel 485):

a {
color: royalblue;
}

Deze code bepaalt de kleur van nog niet bezochte hyperlinks, die standaard koningsblauw verschijnen:

Laten we eens kijken wat er gebeurt als we proberen dit te veranderen door het te vervangen met de volgende code:

a {
color: red;
}

Sla het bestand op en bekijk je lokale site. Zoals je misschien verwacht, zullen alle niet-bezochte links nu felrood verschijnen:

Je kunt opmerken dat de bezochte link bovenaan niet van kleur is veranderd. Dat komt omdat deze eigenlijk wordt beheerd door het volgende gedeelte in het stylesheet:

a:visited {
color: purple;
}

Dit is een zeer basaal voorbeeld van hoe het bewerken van style.css het uiterlijk van je site zal beïnvloeden. CSS is een uitgebreid onderwerp dat we aanraden verder te verkennen als je meer wilt leren over het creëren van webdesigns. Er zijn genoeg bronnen over het onderwerp voor beginners.

Stap 5: Exporteer Het Thema En Upload Het Naar Je Site

Wanneer je klaar bent met het aanpassen van je thema, is het tijd om te zorgen dat het goed werkt. Om dit te doen, kun je de Theme Unit Test gegevens gebruiken.

Dit is een set dummygegevens die je kunt uploaden naar je site. Het bevat veel verschillende variaties van stijlen en inhoud, en het stelt je in staat om te zien hoe je thema omgaat met onvoorspelbare gegevens.

Als je jouw thema grondig hebt getest en overtuigd bent dat het voldoet aan de vereiste normen, is het enige dat nu rest het exporteren ervan.

Allereerst moet je de locatie van je website op je lokale machine vinden. Je vindt deze waarschijnlijk in een map genaamd Websites, in je standaard Documenten map.

Open de map van de website en ga naar /wp-content/themes/, waar je jouw thema vindt:

Je kunt nu een compressietool gebruiken, zoals WinRAR, om een .zip bestand te maken op basis van de map. Klik gewoon met de rechtermuisknop op de map en selecteer de optie waarmee je deze kunt comprimeren, zoals Comprimeer “map.”

Wanneer de map is gecomprimeerd, is het klaar om geüpload en geïnstalleerd te worden op elke WordPress-site, net zoals je je Underscores-thema aan het begin hebt geïnstalleerd.

Tips Voor Het Ontwikkelen Van Je Eerste Aangepaste Thema

Wanneer je voor de eerste keer met code begint te knutselen, is het altijd mogelijk dat je een paar fouten maakt. Daarom is het een goed idee om de tijd te nemen voor het ontwikkelen van je eerste thema, en te experimenteren binnen je lokale omgeving.

Hier zijn een paar extra maatregelen die je kunt nemen om ervoor te zorgen dat je thema goed zal functioneren in de praktijk:

• Gebruik versiebeheer: Systemen zoals Git helpen je om veranderingen in je code over tijd bij te houden en bugs terug te draaien.
• Valideer je code: Gebruik hulpmiddelen zoals Theme Check en de W3C Validator om fouten in je code te vinden. Door regelmatig controles uit te voeren, kun je problemen vroegtijdig opsporen.
• Test je thema: Probeer je thema te laden op verschillende browsers en apparaten om lay-out- of renderingsproblemen te identificeren. Een ontwerp dat perfect werkt op je eigen computer kan uiteenvallen op een ander platform.
• Gebruik codecommentaar: Jezelf notities achterlaten die uitleggen wat alles doet, kan je helpen om later problemen op te lossen.

Maak Een Aangepast WordPress Thema

Het maken van een aangepast WordPress-thema vanaf nul is geen kleine prestatie. Het proces is echter misschien niet zo moeilijk als je denkt.

Om samen te vatten, hier is hoe je een WordPress-thema ontwikkelt in vijf eenvoudige stappen:

1. Richt een lokale omgeving in, met behulp van Local.
2. Download en installeer een startersthema, zoals Underscores.
3. Leer over de verschillende onderdelen van een WordPress-thema.
4. Configureer je thema.
5. Exporteer het thema en upload het naar je site.

Door de richtlijnen op de Codex documentatiesite te volgen, kun je een thema ontwikkelen dat voldoet aan de kwaliteitsnormen. Je zou zelfs kunnen overwegen om het in te dienen bij de WordPress Theme Directory!

Lanceer Je Unieke WordPress Site Met DreamPress

Het bouwen van een geweldig thema is de eerste stap naar het creëren van een succesvolle website. Wij hebben de tools om je te helpen met de rest.

Met DreamPress beheerde hosting kun je elk thema of plugin online testen met één-klik staging. We bieden ook kogelvrije back-ups, zodat je op elk moment wijzigingen kunt terugdraaien, en ingebouwde caching voor optimale prestaties.

Meld je vandaag nog aan om je WordPress-site operationeel te krijgen!