Dit artikel is een gelokaliseerde versie van het Japanse origineel. Lees het Japanse origineel
Blocksy is een veelzijdig WordPress-thema dat je gratis kunt gebruiken. De meeste instellingen doe je onder "Weergave" → "Aanpassen" (Appearance → Customize, de Customizer) met een voorbeeld ernaast, en de header en footer stel je samen door te slepen en neer te zetten. In dit artikel loop je in de volgorde van de instellingen door de installatie van het thema en de hulpplugin "Blocksy Companion", de kleuren en lettertypen die je als eerste vastlegt, het opbouwen van de header, de weergave van het blogoverzicht en berichten, en het maken van een child-thema.
Zo is Blocksy opgebouwd
Blocksy bestaat uit de volgende drie onderdelen.
- Blocksy (het thema zelf): gratis te verkrijgen via WordPress.org. Het heeft ontwerpinstellingen in de Customizer en een header- en footerbuilder
- Blocksy Companion (gratis plugin): laadt starter sites (demogegevens) en voegt extensies toe
- Blocksy Pro (betaald): voegt extra headerelementen, voorwaardelijke weergave, fijnere opmaakmogelijkheden en dergelijke toe
Het is verstandig om te beginnen met het thema zelf plus Companion en pas Pro te overwegen als blijkt dat de functies in het gratis deel tekortschieten (de indeling van functies en de prijzen kunnen veranderen, dus controleer ze op de officiële site, zoals die in oktober 2026 stond).
Blocksy is bovendien eerder een klassiek thema en ondersteunt ook de blokeditor. De plek waar je dingen bedient verschilt van die bij een blokthema, waarbij je alles opbouwt in de site-editor ("Weergave" → "Editor"). Onthoud daarom: "het algehele ontwerp doe je in de Customizer, de inhoud van berichten en pagina's in de blokeditor".
Installeren en Companion toevoegen
- Zoek onder "Weergave" → "Thema's" → "Nieuw thema toevoegen" (Appearance → Themes → Add New Theme) naar "Blocksy", installeer het en activeer het
- Installeer en activeer Blocksy Companion via de melding die na het activeren verschijnt, of via het Blocksy-dashboard dat aan het beheer wordt toegevoegd
Met WP-CLI installeer je het zo.
wp theme install blocksy --activate
wp plugin install blocksy-companion --activateWissel je het thema van een bestaande site, maak dan vooraf een back-up van de hele site. Bij het wisselen van thema worden shortcodes, widgets en menupositie-instellingen van het vorige thema soms niet overgenomen.
Een starter site gebruiken of niet
Als je Companion installeert, kun je vanuit het Blocksy-dashboard "starter sites" laden. Daarmee komen kant-en-klare pagina's, Customizer-instellingen en de benodigde plugins in één keer binnen, zodat je bij een nieuwe site snel een beeld krijgt van het eindresultaat.
Laad ze liever niet op een site met bestaande berichten. Er komen demopagina's, afbeeldingen en menu's bij en ook de Customizer-instellingen worden overschreven, waardoor je niet meer weet wat de oorspronkelijke instellingen waren. Gebruik je ze, doe dat dan aan het begin van een nieuwe site, of probeer ze in een staging-omgeving uit en neem daarna alleen de instellingen over die je nodig hebt.
De algemene instellingen die je als eerste vastlegt
Open je "Weergave" → "Aanpassen", dan zie je de instellingen van Blocksy. Hoewel de namen van de onderdelen vaak vertaald zijn, kunnen ze per versie anders heten. Je begint met de volgende twee, omdat die overal doorwerken.
Kleuren (kleurenpalet)
In de kleurinstellingen binnen de algemene instellingen leg je het palet met de basiskleuren van de site vast. In Blocksy verwijzen tekstkleur, linkkleur en knopkleur naar de kleuren van dit palet, dus als je het palet wijzigt, verandert het kleurenschema van de hele site in één keer.
Geef je op losse plekken rechtstreeks een kleur op, dan moet je ze later een voor een aanpassen als je het kleurenschema wilt veranderen. Het is handiger om de kleuren in het palet vast te leggen en alleen waar je echt een andere kleur wilt een afzonderlijke kleur op te geven.
Lettertypen (typografie)
In de typografie-instellingen leg je het lettertype, de lettergrootte en de regelafstand van lopende tekst en koppen vast. Voor een Japanse site is het van belang dat een Latijns lettertype niet wordt toegepast op Japanse tekens. Japanse tekst wordt weergegeven met het lettertype op het apparaat van de bezoeker, dus laat het lettertype van de lopende tekst op de standaard staan, bijvoorbeeld "systeemlettertype", of geef een lettertype op dat Japans ondersteunt.
Laad je een Japans lettertype als weblettertype, dan worden de bestanden groot en kan dat de laadsnelheid beïnvloeden. Gebruik je het toch, beperk dan het aantal diktes en controleer het effect op de laadsnelheid met bijvoorbeeld PageSpeed Insights.
De header opbouwen
Open je in de Customizer het onderdeel Header, dan verschijnt onderaan het scherm de headerbuilder. De header is verdeeld in een bovenste, een middelste en een onderste rij, en je sleept elementen zoals het logo (de sitetitel), het menu, zoeken en knoppen naar het linker-, middelste of rechterdeel van elke rij.
Wat je makkelijk over het hoofd ziet, is dat de header voor computers en die voor smartphones apart worden ingesteld. Schakel je de weergave van de builder om naar smartphone, dan zie je een andere indeling. Op de smartphone zet je het menu in principe in het "off-canvas"-paneel dat opent via het hamburgerpictogram (de trigger). Stel je alleen de computerweergave in en publiceer je, dan kan het gebeuren dat het menu op de smartphone niet verschijnt, dus controleer beide weergaven.
Klik je op een element, dan verschijnen aan de linkerkant de instellingen van dat element (lettergrootte, kleur, marges enzovoort). De items die in het menu verschijnen maak je zelf onder "Weergave" → "Menu's" (Appearance → Menus) en je wijst ze toe aan het menu-element van de header.
De footer bouw je op dezelfde manier met de footerbuilder. Wil je de plaatsing van widgetgebieden of de copyrightvermelding wijzigen, bewerk die dan onder het onderdeel Footer.
De weergave van het blogoverzicht en van berichten
De Customizer heeft per paginatype instellingen, zoals voor het berichtenoverzicht (blog), afzonderlijke berichten en pagina's.
- Berichtenoverzicht: de rangschikking (kaarten, lijst en dergelijke), het aantal kolommen per rij, de beeldverhouding van de uitgelichte afbeelding (Featured image), de lengte van het uittreksel (Excerpt) en welke berichtgegevens worden getoond (publicatiedatum, categorie enzovoort)
- Afzonderlijke berichten: de breedte van het inhoudsgebied, of er een zijbalk is en waar, hoe het titelgedeelte wordt weergegeven, en de weergave van gerelateerde artikelen en auteursgegevens
- Pagina's: net als bij afzonderlijke berichten stel je de breedte en de aanwezigheid van een zijbalk in
Wat de leesbaarheid van een artikelpagina sterk bepaalt, is de breedte van de tekst. Lange Japanse tekst leest slecht als een regel te lang is. Gebruik je geen zijbalk, stel de tekstbreedte dan smaller in en controleer of de tekst op een smartphone niet te klein wordt.
Wil je de opmaak van slechts één bericht wijzigen, dan kun je dat via de Blocksy-instellingen in de zijbalk van het bewerkscherm van het bericht doen, bijvoorbeeld door alleen bij dat bericht de zijbalk weg te laten.
Een child-thema maken
Bewerk je de bestanden van het thema rechtstreeks, dan verdwijnen je wijzigingen bij een update van het thema. Wil je alleen wat CSS toevoegen, dan volstaat "Extra CSS" in de Customizer. Heb je PHP-aanpassingen of het overschrijven van templates nodig, dan maak je een child-thema.
Op de officiële site van Blocksy wordt een sjabloon voor een child-thema verspreid. Maak je het zelf, zet dan in wp-content/themes/blocksy-child/ de volgende style.css,
/*
Theme Name: Blocksy Child
Template: blocksy
*/en laad de stijlen van het child-thema in de functions.php in dezelfde map.
<?php
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style(
'blocksy-child-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get( 'Version' )
);
}, 20 );Wissel je naar een child-thema, dan worden de Customizer-instellingen apart van die van het parent-thema opgeslagen, waardoor wat je in het parent-thema had ingesteld soms niet meer zichtbaar is. Als je Companion hebt geïnstalleerd, kun je de Customizer-instellingen met de export- en importfunctie overzetten. Exporteer ze dus voordat je naar het child-thema wisselt, dan hoef je niets over te doen.
Aandachtspunten bij updates en beheer
Blocksy en Companion worden vaak bijgewerkt. Maak vóór een update een back-up en controleer na de update de header, de artikelpagina en de smartphoneweergave. Gaat de weergave mis, leeg dan de cache van cacheplugins en van de CDN en controleer opnieuw. Gebruik je een snelheidsplugin die CSS combineert en comprimeert, dan kan oude CSS blijven staan waardoor het er kapot uitziet.
Samenvatting
- Begin met Blocksy zelf plus Blocksy Companion en overweeg Pro pas als blijkt welke functies je mist
- Gebruik starter sites bij een nieuwe site of in een staging-omgeving, en let bij een bestaande site op het overschrijven van instellingen
- Leg met het kleurenpalet en de typografie het geheel vast. Een Latijns lettertype werkt niet voor Japanse tekst
- De headerbuilder heeft aparte instellingen voor computer en smartphone. Controleer beide weergaven en gebruik een child-thema als je PHP aanpast
Vragen over WordPress? De uitgever van deze site zit in Japan en antwoordt in het Japans. Contact (Japans)