Hoe Te Wisselen Van Een Klassiek Thema Naar WordPress Blokthema’s

Als je fan bent van Lego, dan zul je WordPress-blokthema’s geweldig vinden.

Vanaf versie 5.9 biedt WordPress volledige ondersteuning voor blokthema’s. Dit was een grote verandering voor de meeste sites, die gebouwd waren op wat nu bekend staat als “klassieke” thema’s.

Maar overstappen van een klassiek thema naar een thema gebaseerd op blokken vereist wel wat werk.

In dit artikel leggen we uit hoe ze werken en welke stappen je kunt nemen om van de oude stijl naar de nieuwe over te gaan.

Het zal niet helemaal zo leuk zijn als het in elkaar zetten van een 3.441-delig, verzamelaarsmodel Death Star uit 2005. Maar we doen ons best.

Wat Is Een WordPress Blokthema?

Blokthema’s stellen gebruikers en websitebeheerders in staat om de indeling van hun pagina’s en inhoud aan te passen met behulp van bewerkbare en herbruikbare inhoudsblokken.

Oorspronkelijk bekend als “full site editing” (FSE) of “site editing”, voegen deze thema’s modulaire, op blokken gebaseerde functionaliteit toe aan de lay-outs en sjablonen van je thema. Vergelijkbaar met hoe de Gutenberg editor blokken en bloksjablonen introduceerde die gebruikt kunnen worden binnen je pagina’s en berichtinhoud.

Maar nu kun je de lay-out en inhoud van je hele site (inclusief paginasjablonen en aangepaste sjablonen) aanpassen met behulp van visuele, slepen-en-neerzetten stijl blokken.

Deze nieuwe visuele bewerkingsfuncties maken het uiterst eenvoudig om nieuwe paginestructuren te bouwen of de inhoud van elke pagina aan te passen, verder dan alleen wat zich binnen het paginalichaam bevindt.

Dit betekent dat je niet afhankelijk bent van ontwikkelaars om je themabestanden aan te passen of aangepaste sjablonen te bouwen om dingen toe te voegen die verder gaan dan woorden en afbeeldingen in je inhoud. In plaats daarvan kun je de inhoud aanpassen met behulp van de editor.

Individuele blokken kunnen worden gemaakt en ontworpen om te passen binnen een responsieve lay-out en overeenkomen met de kleur en typografie van je website.

Daarnaast kun je deelbare blokpatronen aanmaken en gebruiken. Dit zijn vooraf gemaakte blokken die zijn gecreëerd door individuen, bedrijven en WordPress-ontwikkelaars.

Samengevat maken block-thema’s van WordPress een modulairder en flexibeler systeem. Het emuleert veel van de functionaliteit van andere websitebouwers met slepen-en-neerzetten die populair zijn gemaakt door bedrijven zoals Squarespace en Wix.

Thema’s gebaseerd op het block framework worden over het algemeen geleverd met vooraf gebouwde aangepaste blokken die passen bij het ontwerp en de stijl van de website. Je kunt deze blokken dan gebruiken op je site waar je ze nodig hebt.

Blokthema’s Vs. Klassieke Thema’s

Klassieke WordPress-thema’s zijn gebouwd om een consistente stijl en ontwerp te creëren.

De meeste sitegedeelten waren alleen bewerkbaar door het thema aan te passen of direct PHP-sjabloonbestanden te bewerken om specifieke functionaliteit aan de website toe te voegen.

Toen hadden de meeste sites een paar standaard sjablonen voor elk type inhoud. Bijvoorbeeld een paginasjabloon en een berichtsjabloon. Blokeditors hebben over het algemeen nog steeds dezelfde themastructuur, maar je kunt heel eenvoudig variaties creëren of elk sjabloon aanpassen met de editor.

Met de blokeditor heb je meer controle over de afzonderlijke onderdelen van elke pagina of bericht, en kun je ter plekke nieuwe sjablonen bouwen.

Bijvoorbeeld, je kunt een blok met sociale pictogrammen of een afbeeldingengalerij aan je paginasjablonen toevoegen om ze op elke pagina op je website te laten verschijnen of ze toevoegen aan een enkele post.

Er is ook een stijleditor waarmee je de blokinstellingen kunt aanpassen en de visuele elementen zoals kleurenpalet en lay-out kunt aanpassen. Je hoeft zelfs geen CSS te bewerken.

Naast de toegevoegde flexibiliteit en controle bieden blokthema’s veel voordelen.

Verwijder Shortcodes En HTML Code Bewerking

Met klassieke thema’s zijn veel WordPress-gebruikers gaan vertrouwen op aangepaste manieren om functionaliteit toe te voegen of de lay-out en het ontwerp van hun blogposts en pagina’s te bewerken.

Shortcodes en aangepaste HTML-snippets werden vaak gebruikt om nieuwe functies die niet in het thema van de website waren opgenomen te overschrijven of te injecteren.

Bijvoorbeeld, je hebt misschien een lang stuk code gekopieerd en geplakt in elke post om een oproep tot actie toe te voegen of een inschrijfformulier in te voegen.

Nu kun je eenvoudig een gesynchroniseerd patroon (herbruikbaar blok) voor deze inhoud creëren. Maak vervolgens een aangepaste postsjabloon voor elke relevante CTA. Selecteer ten slotte de postsjabloon voor elke post om de CTA te laten verschijnen.

Ontgrendel Native Paginabouwer Elementen

Voor veel gebruikers zal een thema gebaseerd op blokken de noodzaak voor paginabouwer-plugins, die populair zijn geworden in de WordPress-gemeenschap, elimineren.

Deze plugins dienden als een tijdelijke oplossing voor gebruikers die een modulair, blokgebaseerd systeem wilden voor het bouwen van hun website voordat dit beschikbaar was voor de meeste WordPress-thema’s.

Deze thema’s zijn natuurlijk nog steeds populair. Divi, Elementor, Gutenify en anderen waren pioniers op dit gebied, maar nu hoef je deze specifieke thema’s niet meer te gebruiken om modulaire sitebouwcapaciteiten te ontgrendelen.

Verbeter Siteprestaties

Een ander groot voordeel van het overstappen op blokthema’s is een verbetering in de laadsnelheid van de pagina en de prestaties van de site.

Veel sites vertrouwden op plugins van derden of het kopiëren en plakken van codefragmenten om de gewenste functionaliteit en ontwerp voor hun pagina’s te krijgen. Dit leidt vaak tot extra scripts en styling die aan de pagina’s worden toegevoegd. Elk van die bronnen kost tijd om te laden en vertraagt je website.

Dus, door over te stappen van een klassiek thema naar een blokthema, kunnen veel sites deze extra onderdelen verwijderen. Dit zal de code op de pagina vereenvoudigen en zou de laadsnelheid en prestaties van de pagina moeten verbeteren.

Wat op zijn beurt de SEO kan verbeteren, de betrokkenheid kan verhogen en de conversies kan verhogen.

Verminder Conflicten, Updates en Kwetsbaarheden

Met minder afhankelijkheid van plug-ins van derden zul je ook minder conflicten of vereiste updates ervaren voor je WordPress-site.

Naarmate sites complexer worden, kunnen de extra gebruikte plugins vaak met elkaar in conflict komen. Dit kan leiden tot site-breukproblemen zoals het beruchte White Screen of Death. En het updaten van plugins kan aanvoelen als een totale gok. (“Wordt dit degene die mijn site breekt?!”)

Mogelijk nog belangrijker, minder afhankelijkheid van plugins van derden zal je website ook veiliger maken. Deze tools kunnen vaak kwetsbaarheden of exploits in je code introduceren. (Vooral als je ze niet bijwerkt omdat je bang bent iets belangrijks te breken.)

Moet Je Overschakelen Naar Een Blokthema?

Met al deze voordelen in gedachten, lijkt het duidelijk dat, in de meeste gevallen, upgraden naar een blokthema een slimme zet is.

De meeste bedrijven en websites zouden moeten overwegen over te stappen van een klassiek thema naar een blokthema.

Het introduceert veel verbeteringen in de kwaliteit van leven die het beheren van je website en je inhoud makkelijker maken en stelt je team in staat efficiënter te werken en inhoud aan te passen zonder toegewijde ontwikkeltijd door gebruik te maken van mogelijkheden voor het bewerken zonder code.

En het is een waardevolle stap naar het verbeteren van de prestaties en veiligheid van je website.

Wanneer moet je niet overstappen?

Kortom: Als je niet de tijd en middelen hebt om je aan de verandering te wijden. Het aanpassen van je WordPress-thema, vooral als het op maat gemaakt is of sterk aangepast, vereist veel werk.

Hoewel je inhoud, media en andere assets intact blijven, zal het algehele ontwerp van je website veranderen om overeen te komen met het nieuwe thema.

Als je de uitstraling van je huidige thema wilt behouden of een geheel andere look wenst, moet je het ontwerp dienovereenkomstig aanpassen.

Aan de positieve kant: Die aanpassingen zullen makkelijker zijn omdat je nieuwe thema blokgebaseerd zal zijn en je in staat stelt om de meeste themalayouts, elementen, kleuren en stijlen te bewerken zonder de code te hoeven aanpassen.

Laten we naar het proces kijken.

Hoe Over Te Schakelen Naar Een WP Blokthema

Stap 1: Maak Een Back-up Van Je Website

Maak altijd een back-up wanneer je grote updates aan je website uitvoert.

Het is zo belangrijk, dat we het gaan herhalen.

Maak een back-up. (Serieus.)

Als je een beheerde WordPress-hosting service gebruikt, moet je beschikken over automatische en handmatige back-up opties.

Als je dat niet bent, kijk dan naar een WordPress-plugin zoals BlogVault, UpdraftPlus, of Jetpack Backup om al je sitebestanden en inhoud op te slaan.

Zo heb je, als er iets misgaat, een manier om je website te herstellen.

Stap 2: Beoordeel Je Website

Het volgende dat we moeten doen, is een idee krijgen van wat er zal gebeuren als je de overstap maakt.

Het wijzigen van je thema heeft meestal twee directe gevolgen:

1. De algemene indeling, kleuren en stijlen van je website zullen veranderen.
2. Je verliest alle aangepaste code of wijzigingen die direct in de bestanden of sjablonen van je oude thema zijn toegevoegd.

Daarnaast zou je inhoud en alles wat aan de tekst van je berichten en pagina’s is toegevoegd, hetzelfde moeten blijven.

Bijvoorbeeld, als je een klassiek thema gebruikt en de lay-out van de kop van je site hebt aangepast, zullen die wijzigingen niet worden overgedragen.

Dus, wat zou je moeten doen?

Doorloop alle pagina’s van je website (of tenminste alle unieke sjablonen).

Zoek naar eventuele aangepaste inhoud, widgets, banners, grafische elementen, enz., die aan de themabestanden zijn toegevoegd. Deze verschijnen over het algemeen in de “statische” secties zoals je koptekst, zijbalk of voettekst.

Let op elke instantie die je vindt. Het is mogelijk om deze inhoud weer aan je site toe te voegen nadat je de overstap hebt gemaakt.

En maak je geen zorgen. Zelfs als je iets mist, kun je meestal teruggaan naar je oude thema om te zien wat er verscheen en nu ontbreekt op je nieuwe site.

Stap 3: Kies Een Thema

Het is nu tijd om je thema te kiezen.

Wat is je gewenste resultaat?

Wil je een thema dat nauw aansluit bij het ontwerp van je bestaande website? Of iets dat radicaal anders is? Een compleet nieuwe uitstraling.

In welke richting je ook gaat, je kunt beginnen met het bekijken van beschikbare thema’s in de WordPress themadirectory. (Klik op “Block Themes” om te filteren.)

Je kunt ook onze lijst van de 27 beste blokthema’s bekijken.

Houd er rekening mee dat de aanpassingsopties vrijwel onbeperkt zijn met alle blokthema’s. Het is alsof je een appartement of huis zoekt. Laat je niet hangen aan de verf op de muren. Je kunt altijd opnieuw schilderen. Hoewel je nog steeds op zoek bent naar thema’s die dicht bij de algemene stijl en designvoorkeuren liggen, kun je het thema aanpassen aan je behoeften.

Bijvoorbeeld, als je een minimalistisch ontwerp prefereert, wil je misschien beginnen met een eenvoudig thema. Een andere optie is om een complex thema te wijzigen om wat inhoud te verwijderen.

Ten slotte, bekijk de vooraf ontworpen blokken die in de thema’s zijn opgenomen.

Veel thema’s bevatten aangepaste blokstijlen die al zijn opgebouwd en beschikbaar komen als opties zodra je ze activeert. Dit kan een grote tijdsbesparing zijn in vergelijking met het handmatig moeten creëren van extra blokken na het instellen van het nieuwe thema.

Verken de “Patterns”-sectie van het thema om te zien hoe deze blokken worden gebruikt om aangepaste secties te maken. Veel thema’s bevatten voorbeelden van patronen voor kopteksten, patronen voor voetteksten en andere relevante secties of componenten die je mogelijk wilt gebruiken op je website.

Stap 4: Installeer En Activeer Thema

Zodra je een thema hebt gekozen, is het tijd om te installeren.

Je kunt het blokthema zip-bestand lokaal downloaden en vervolgens uploaden. Of, als het thema in de WordPress-directory staat, kun je het installeren vanuit je WP Admin.

Om dit te doen, ga naar Appearance > Themes, en klik op de “Nieuw toevoegen” knop.

Typ dan de naam van het thema in het zoekvak. Zoek het thema dat je wilt installeren en ga er met de muis overheen. Klik op “Installeren”.

Nu is je nieuwe thema geïnstalleerd!

Ga terug naar je Themes-pagina en zoek het thema. Je kunt het direct activeren door op “Activeren” te klikken.

Nerd Opmerking: Als je nog steeds niet zeker weet hoe je website eruit zal zien met het nieuwe thema, gebruik dan de optie “Live Voorbeeld” om te zien hoe het eruit zal zien. Of nog beter, installeer het thema en volg de volgende stappen op een stagingversie van je website. Op deze manier zullen de wijzigingen niet live zijn terwijl je jouw site bijwerkt en aanpast.

Stap 5: Pas De Lay-out En Het Ontwerp Aan

Zodra je het thema hebt geactiveerd, zal je website (waarschijnlijk) anders uitzien dan voorheen.

Nu is het jouw tijd om het uiterlijk aan te passen met jouw thema-instellingen. Je kunt opnieuw het vorige ontwerp gebruiken dat je voor je site gebruikte, of je kunt het in een totaal nieuwe richting nemen.

Hoe dan ook, je kunt de functionaliteit van het blokkeren van de volledige site gebruiken om aan te passen met slechts een paar klikken.

Normaal gesproken, als je thema de Site Editor kan gebruiken, zal het een nieuw bericht weergeven op de customize.php pagina, met de tekst “Hoera! Je thema ondersteunt sitebewerking met blokken! Vertel me meer. Gebruik de Site Editor.”

Als je deze boodschap om welke reden dan ook niet ziet, klik dan op “Aanpassen” op je nieuwe thema vanaf de Themes-pagina.

Je ziet nu het scherm van de Editor. Vanaf hier kun je duiken in en elke specifieke pagina of bericht op je site bewerken. Je kunt ook nieuwe sjablonen of patronen bewerken en creëren.

Hier wil je de meeste tijd besteden. Afhankelijk van je doelen voor het nieuwe thema wil je misschien elk standaard sjabloon en patroon doornemen om de inhoud en lay-out aan te passen.

Naast het wijzigen van de indeling en de blokken op je site, kun je ook de bewerkingsopties gebruiken om je stijlinstellingen aan te passen.

Onder “Blok” instellingen, zou je een aantal stijlopties moeten zien. Hier kun je de ontwerpelementen aanpassen zoals lettergrootte, uitlijning, afstand, en kleurenschema’s.

Je kunt ook aangepaste CSS-klassen toevoegen voor elk element onder Geavanceerd.

Stap 6: Controleer Op Gebroken Plugins Of Widgets

Niet elke plugin, widget of aanpassing werkt met blokthema’s.

Als je website een aantal plugins en widgets gebruikte (die je in stap 2 zou moeten hebben geïdentificeerd), dan moet je mogelijk enkele aanpassingen doen aan de backend.

Blok-plugins zijn compatibel met blok-thema’s, maar sommige oudere werken mogelijk niet.

Stel je wilt een sociaal widget toevoegen die je gebruikte met je oude thema. Als je de optie om dat specifieke widget vanuit de blokeditor toe te voegen niet ziet, dan moet je waarschijnlijk een nieuwe plugin vinden die ondersteund wordt.

Vind Het Perfecte Blokthema Voor Je Website

Nu je de stappen kent, is het tijd voor het leuke gedeelte.

Het vinden van het juiste blokthema voor je website, of het nu een persoonlijke blog, bedrijfssite of mediaplatform is, kan spannend zijn, met zoveel geweldige opties beschikbaar.

Enkele van onze favoriete populaire blokthema’s:

1. Twenty Twenty-Three
2. GeneratePress
3. Blockbase
4. SeedProd
5. Divi

Met het juiste thema ben je al goed op weg om een WordPress blocks meester te worden, DreamHost kan je helpen!

Vrolijk bouwen!