Welkom bij deel 3 van de artikelenreeks over het ontwikkelen van je eigen WordPress thema.
Inmiddels heb je geleerd over de algemene structuur en “the loop”, wat genoeg zou moeten zijn om al een 99% functionerend blog te krijgen. (Een homepage met je laatste artikelen, alleenstaande pagina’s, opvragen van informatie zoals de auteur en datum van een artikel.)
Maar natuurlijk zijn er vele randzaken die je (waarschijnlijk) wilt opnemen in je blog. Denk aan comments, of meerdere pagina’s op je homepage (met slechts een paar artikelen per pagina), of menu’s.
Daar gaat dit laatste deel over!
Moeite met menu’s
In deze sectie zal ik je uitleggen hoe je een menu kan inladen (die je hebt ingesteld middels de WordPress interface).
Maar vervolgens zal ik uitleggen waarom ik deze hele functionaliteit uiteindelijk weer heb weggegooid. Mijn blog gebruikt nu slechts een zeer minimaal menu, met de hand gemaakt, en alle andere navigatie of informatie staat in de footer.
Menu invullen
In deel 1 (in functions.php) hebben we al een menu geregistreerd met het systeem.
Daardoor kan je gewoon, in de WP interface, naar Weergave > Menu’s en direct werken aan je menu.
Het is vrij vanzelfsprekend. Links kan je berichten/pagina’s/wat dan ook selecteren om toe te voegen. Door te slepen en te klikken kan je de elementen anders rangschikken en invullen.
Vergeet het niet op te slaan als je tevreden bent.
Menu opvragen & stylen
Oké, het menu is bekend bij WP, en het heeft de juiste inhoud. Maar hoe laten we het zien? Hoe vragen we het op?
Daarvoor gebruik we de functie wp_nav_menu();
Afhankelijk van wat je in de functie stopt, kan je het alvast een bepaalde structuur of style geven. Alleen het eerste argument, welk menu je precies wilt laten zien, is vereist. (Zie zoals altijd de documentatie: wp_nav_menu.)
Waarom een menu?
Het idee van een menu is om mensen snel over de website te laten bewegen én de belangrijkste pagina’s/inhoud uit te lichten.
Het is ook best handig en logisch. Ik zeg zeker niet dat iedereen nu meteen het idee van een “menu in de header” moet weggooien.
Maar ik zie dit soort menu’s steeds simpeler worden en langzaam verdwijnen, en ik denk dat het een goede ontwikkeling is. Bijna elke website met een volwaardige menu is voor mij onbruikbaar op mobiel en compleet overweldigend op de computer.
Waarom géén menu?
Ook bij dit blog zijn er enkele problemen:
Probleem #1: Dit blog kent veel inhoud. Het oude menu had 10+ onderdelen, paste niet op één pagina (daarom moest je het eerst uitklappen door erop te klikken), en dat werd alleen maar erger. Met elk nieuw project wilde ik wéér een snelle link naar die pagina hebben.
Probleem #2: Als men op kleinere schermen kijkt, is er geen ruimte voor een menu. Je kan hoogstens enkele icoontjes of woorden laten zien, dan houdt het op.
Vrijwel iedereen lost dit op door het menu te vervangen door het “hamburgericoontje”. Als je daarop klikt, vouwt het hele menu uit.
Ik vind het een acceptabele oplossing, maar niet ideaal. Je moet als gebruiker extra klikken én het geeft je een excuus om niet minimalistisch te zijn en je menu gestroomlijnd te houden. Bovendien snapt niet iedereen wat elk icoontje betekent.
Probleem #3: Ik wil niet dat mensen constant langs het menu moeten scrollen. Het menu moet dermate klein zijn, dat hij binnen handbereik is zo nodig, maar dat je er nooit langs hoeft.
Mijn conclusie
Na lang nadenken en proberen, concludeerde ik dat dit blog het beste geen (groot) menu kan hebben.
Waarom? Alle projecten die ik doe staan al geregistreerd op mijn portfolio website (Rode Panda). Daar heb ik die website nou precies voor ontworpen! Het doet niks anders, het heeft geen bellen en toeters, het laat gewoon al mijn werk zien.
Ik vond het onnodig en verwarrend om constant alles dubbel in te voeren en te verwijzen. Dus er komt één knop bovenaan de website en die leidt direct naar mijn portfolio.
Daarnaast zie ik dat de “Over mij” pagina altijd vaak wordt bezocht op websites. Iedereen wil heel graag een gezicht bij een website hebben. Als ze een leuk artikel of twee hebben gelezen, willen ze kijken wie het eigenlijk heeft geschreven en of die misschien nog meer heeft gedaan. Dus dat is de tweede knop.
De laatste knop leidt je rechtstreeks naar de footer onderaan de pagina. Binnen een halve seconde ben je naar beneden gescrollt.
In die footer staan een handvol widgets: zoeken op de website, abbonneren, laatste berichten, belangrijke pagina’s, meer werk van mij, enzovoort. Uit de weg, maar makkelijk te vinden als je het nodig hebt.
Dus laten we nu eens praten over die widgets.
Sidebars & Widgets
Hopelijk zit mijn verhaal over sidebars nog vers in je geheugen: een sidebar is een plek die automatisch al je widgets laat zien.
Een sidebar moet je registreren in functions.php onder een zelfbedachte naam. Vervolgens kan je in de WP interface, bij “Widgets”, automatisch elementen erin plaatsen.
Als laatste moet je dan natuurlijk die sidebar oproepen op de juiste plek in je code.
Dit is mijn sidebar.php, die letterlijk alleen de widgets opvraagt:
En dit is een regeltje in mijn footer.php die deze sidebar oproept en laat zien:
Hartstikke simpel en klein!
sidebar-primary.php en sidebar-secondary.php) Maar dat is voor de meesten niet aan de orde.Pagination
Als je “the loop” gebruikt, zal WP ook meteen de pagina-navigatie voor je regelen. Immers, het systeem weet precies welke artikelen het nu moet laten zien, en of er nog artikelen daarvóór of daarná komen.
Dus als je onderaan de pagina knoppen wilt met “volgende pagina” en “vorige pagina”, hoef je dit slechts aan het systeem te vragen.
Thumbnails
WordPress werkt volgens het systeem van “vaste groottes”.
Eerst moet je in functions.php zelf een aantal groottes registreren.
Als je een plaatje uploadt, maakt WP automatisch een versie aan in elke geregistreerde grootte.
Vervolgens kan je een plaatje dus oproepen in je thema met een specifieke grootte.
Dit systeem is heel handig … als je het nodig hebt. Als je vooral blogt (en dus weinig featured images toevoegt aan je pagina’s), of je ontwerp wil alle plaatjes gewoon op ware grootte, dan kan je dit negeren.
In dat geval heeft WP één default size genaamd “full”. (Die laat een plaatje zien zonder te bewerken of wat dan ook.)
Dit is hoe je groottes registreert in functions.php:
En zo roep je ze op, bijvoorbeeld boven de titel van de blogpost die je laat zien. (Nog steeds binnenin the loop, natuurlijk, want dit is informatie die specifiek bij één artikel hoort.)
Reacties
Als laatste wil ik praten over reacties/comments. Deze zijn iets ingewikkelder, want je hebt natuurlijk meerdere stappen:
- Als er geen comments zijn, laat niks zien of een melding zoals “Nog geen reacties!”
- Zo wel, laat dan alle comments zien.
- Als het er veel zijn, geef de comments dan óók een eigen paginanavigatie.
- En laat daaronder altijd het formulier zien om een nieuwe reactie te plaatsen.
Gelukkig regelt WP dit ook grotendeels voor jou. Wederom kan je bij de instellingen neerzetten hoe reacties moeten worden weergegeven (hoeveel per pagina? profielfoto’s erbij?) … en dan hoef je het alleen nog op te vragen.
Ten eerste, maak het bestand comments.php aan en plaats dit erin:
Daarna kan je het overal waar je wilt opvragen! Waarschijnlijk wil je het laten zien onderaan een artikel, dus dan doe je dit:
Ik noem dit vooral “moeilijker” omdat je nog moet ontdekken hoe WP precies alles structureert en noemt. Pas als je dat exact weet, kan je het er mooi uit laten zien binnen jouw eigen ontwerp.
Opmerkingen over semantics
Zo, dat waren de belangrijkste onderdelen (in mijn ogen) en hoe je deze opzet!
WordPress heeft een prima documentation die vrijwel al je vragen zal beantwoorden, nu je weet hoe je moet beginnen.
Je wilt specifieke informatie hebben van een artikel? Kijk of er een standaardfunctie voor is. Zo niet, kijk naar alle eigenschappen die de $post variabele heeft.
Je wilt de zoekfunctie ondersteunen? Maak search.php aan. Vindt uit hoe je de zoekstring kan ophalen, zodat je kan laten zien “U zocht naar DITENDIT”. Plaats the loop in het bestand en WP regelt de rest!
Ik wil daarom alleen nog iets zeggen over semantics.
Wat betekent dat? Nou, dat de HTML-tags (en volgorde) die je gebruikt ook de structuur van je website weerspiegelen.
<header> voor de header. Gebruik <article> voor één artikel. Gebruik <aside> voor kleine opmerkingen of details aan de zijkant, niet de hoofdcontent. Gebruik <nav> voor navigatie.Waarom is dit belangrijk? Het zorgt dat zoekmachines je site véél beter kunnen lezen en categoriseren. Het zorgt tevens dat mensen met een handicap je site beter kunnen gebruiken.
WordPress regelt het hele systeem op de achtergrond, maar jij bent nog steeds verantwoordelijk voor een site die werkt, er mooi uitziet, en goed communiceert met computers/Google/browsers.
Het design van NDHU
Na al dat werk om een functionerend blog te krijgen, dat communiceert met WordPress en werkt op al mijn oude content, zou je bijna vergeten dat dit pas de helft van het werk is.
De andere helft is het ontwerpen van het thema zelf.
Aangezien dit niet direct gerelateerd is aan WordPress, en deze pagina al véél te lang is geworden, zal ik daar niks mee over zeggen. (Ik heb alleen een kort artikel over de update van het blog met een paar details over de stijl: Niet Dat Het Uitmaakt: Een grote update!)
Oftewel, hier houdt het op.
Ik hoop dat ik je heb geholpen om je eigen thema van de grond te krijgen en iets moois te maken!
Als iets nog onduidelijk is, laat het maar weten.
Als je iets moois hebt gemaakt aan de hand van deze handleiding, laat het maar zien.
Veel plezier met je zojuist verweven status van WordPress Wizard, vaarwel.