Decoderen van WordPress: Nieuwe Themaconfiguratieopties met Theme.JSON-bestand

Nieuwe themaconfiguratie-opties in WordPress maken het gemakkelijker dan ooit om het uiterlijk van je site aan te passen aan je specifieke en unieke behoeften. Bovendien maakt de mogelijkheid om klassieke thema’s om te zetten naar blokthema’s de functionaliteit nog gebruiksvriendelijker.

In deze blogpost, de vierde in onze serie “WordPress decoderen”, bespreken we beide ontwikkelingen, inclusief wat ze zijn en hoe ze het voor jou gemakkelijker kunnen maken om een prachtige, op maat gemaakte site te hebben, of je nu beginnende of gemiddelde WordPress-ontwikkelvaardigheden hebt.

Een Overzicht van WordPress Thema’s en Sjablonen

Voordat we de nieuwste opties voor het configureren van je thema bekijken met behulp van een bestand genaamd theme.json, zullen we eerst begrijpen wat het daadwerkelijk betekent om een thema te configureren. Om dit te begrijpen, laten we eerst het verschil tussen een thema en een sjabloon in WordPress verduidelijken, aangezien er vaak enige verwarring over bestaat, vooral als je een beginner bent.

Een thema is het complete ontwerp en de basis voor de samenhangende uitstraling van je site. Het omvat zaken zoals kleurenpaletten, typografie, paginalay-outs, marges, regelafstand, koppen en voetteksten, positionering van zijbalken en andere elementen. Wanneer je een thema kiest en installeert, worden al deze elementen ook automatisch geïnstalleerd. Er zijn vrijwel ontelbare aantallen gratis en betaalde thema’s beschikbaar.

Een template is echter een lay-out voor één pagina binnen een sitewide thema. En hoewel er wijzigingen aangebracht kunnen worden aan een template, worden deze alleen toegepast op de pagina’s die die template gebruiken, niet op de gehele site. Elementen zoals het aanpassen van de lay-out van je blog, het bouwen van landingspagina’s, en het geven van een onderscheidende look aan andere content zijn voorbeelden van wat je kunt bereiken met templates.

Dus, Wat Zijn Thema Configuratieopties Dan?

Thema-configuratieopties zijn beheerpagina’s die bij sommige WordPress-thema’s worden geleverd. Deze beheerpagina’s stellen je in staat om de instellingen van je geïnstalleerde thema aan te passen zonder themabestanden te hoeven wijzigen of verstrikt te raken in het aanpassen van code. Sommige van deze beheerpagina’s kunnen een paar opties bieden, terwijl andere er veel meer kunnen hebben. Als je een beginner bent, kan de relatieve eenvoud van een beheerpagina versus de meer gecompliceerde route een welkome tijds- en gezondheidsbesparing zijn.

Als je doel alleen is om functionaliteiten binnen een thema te verbeteren of te wijzigen, kun je de zaken aanzienlijk vereenvoudigen door een plugin te installeren in plaats van het hele thema opnieuw te configureren. Als je echter de stijlen en blokinstellingen van het thema over je hele site wilt wijzigen, is het nodig om dingen aan te passen door te customizen.

Wat Is JSON Eigenlijk?

Om je WordPress-thema aan te passen als er geen beheerpagina bij zit, moet je een aanmaken en een theme.json configuratiebestand aan het thema toevoegen. Maar wat is JSON? De afkorting staat voor JavaScript Object Notation, wat een open, tekstgebaseerd uitwisselingsformaat voor gegevens is dat zowel door mensen als machines gelezen kan worden en niet gekoppeld is aan een specifieke programmeertaal. Het meest voorkomende gebruik is voor het overdragen van gegevens in webtoepassingen.

theme.json ondersteuning is toegevoegd aan WordPress in versie 5.8, en werkt niet met oudere versies van WordPress tenzij je de Gutenberg plugin activeert. (De Gutenberg editor is officieel uitgebracht in 2018 samen met WordPress 5.0.)

Enkele van de aanpassingsopties die je kunt kiezen binnen theme.json zijn onder andere:

• Inschakelen of uitschakelen van functies zoals kapitalen, blokpadding, marges en aangepaste regelhoogtes
• Toevoegen van meerdere kleurenpaletten, verlopen en duotoonfilters voor foto’s
• Aanpassen van lettergrootte
• Standaardbreedtes voor inhoud toevoegen
• Beheren van aangepaste CSS (cascading style sheet) eigenschappen. CSS wordt gebruikt om visuele verschijning en opmaak van HTML-documenten te definiëren.
• Toewijzen van sjabloononderdelen aan gebieden voor sjabloononderdelen

Naarmate de ontwikkeling van Gutenberg vordert, verschillen de opties die beschikbaar zijn met theme.json in WordPress tussen versie 5.8 (waar versie 1 van theme.json wordt gebruikt) en versie 5.9+ (waar versie 2 van theme.json wordt gebruikt) evenals de Gutenberg-plugin.

Opties Uitgelegd

Met deze meer gedetailleerde aanpassingsopties nu binnen handbereik van beginnende en gemiddelde WordPress-ontwikkelaars, laten we het hebben over zowel wat ze zijn als waarom ze voordelig voor je kunnen zijn.

Inschakelen of uitschakelen van functies zoals initiaalletters, blokpadding, marges en aangepaste regelhoogtes

Initiaalletters (een stijltechniek waarbij de eerste letter van een alinea een groter lettertype heeft), blokpadding (de ruimte binnenin het blok die ligt tussen het element/de inhoud en de rand van het blok, en die alle kanten van het element omringt), marges en aangepaste regelhoogtes kunnen je pagina’s een meer onderscheidende en zelfs formele uitstraling geven, afhankelijk van hoe je ze weet te stylen.

Toevoegen Van Meerdere Kleurenpaletten, Gradiënten En Duotone Filters Voor Foto’s

Het juiste kleurenpalet – of meerdere paletten – kan helpen om de herkenbare identiteit van zowel je merk als je website te definiëren en te verbeteren, en verlopen (achtergronden van twee kleuren die in elkaar overgaan) kunnen je site een dynamischere identiteit geven dan alleen het gebruik van effen kleuren voor de pagina’s op je site. Duotoonfilters kunnen worden toegepast op foto’s die je naar je site hebt geüpload, en verminderen het aantal kleuren in de foto tot slechts twee – één voor de donkere delen van de foto, een andere voor de lichte delen. Door deze middelen te gebruiken binnen de instellingen van je WordPress-thema, kunnen de algehele kleurenschema’s van je site formeel, gematigd of avant-gardistisch zijn – alleen beperkt door je verbeelding.

Lettergroottes Aanpassen

Soms kunnen de lettertypen in je gekozen thema passen bij de specifieke identiteit, toon of houding die je wilt overbrengen, maar de beschikbare lettergroottes zijn dat misschien niet. Ze kunnen te klein of te groot zijn. Door de mogelijkheid te hebben om de groottes aan te passen, kun je elk aspect van het uiterlijk van de tekst op je site afstemmen op het imago van je merk.

Standaardbreedtes voor inhoud toevoegen

Contentbreedte is een themafunctie waarmee je de standaard of maximaal toegestane breedte (grootte) voor alle inhoud in het thema kunt instellen, zoals embeds en afbeeldingen die aan berichten zijn toegevoegd. Wanneer je standaardbreedtes instelt, kan WordPress embedcodes schalen naar specifieke maten in de frontend en grote afbeeldingen invoegen zonder het hoofdinhoudgebied te breken.

Het Beheren Van Aangepaste CSS (Cascading Style Sheet) Eigenschappen.

Als je enige tijd hebt besteed aan het werken met CSS, vragen we ons af waarom je jouw aangepaste CSS zelfs in het radicaal andere JSON-formaat zou willen schrijven. In één woord: flexibiliteit.

Stel je hebt gekozen voor een kleur, bosgroen, voor je site die je echt mooi vindt. Met CSS zou je de kleurcode moeten toevoegen aan alle plekken waar je die kleur wilt gebruiken. Niet echt een probleem, toch?

Laten we nu zeggen dat je een paar weken later een iets donkerdere tint bosgroen vindt die je veel liever zou gebruiken. Met CSS moet je teruggaan en alle instanties van de “oude” bosgroene kleurcode vinden en vervangen door de nieuwe.

Maar, door theme.json te gebruiken, hoef je de kleurdefinitie slechts één keer bij te werken in het JSON-bestand, om deze over je hele site te wijzigen.

Template-onderdelen toewijzen aan template-deelgebieden

Paginasjablonen zijn bestanden die bepalen hoe een specifieke pagina eruitziet, en ze kunnen worden gebruikt om bepaalde paginalay-outs toe te passen op verschillende pagina’s op je site. In WordPress zijn er ook sjabloondelen, die functioneren als kleinere structurele secties van een paginasjabloon.

Als je door de bestanden van je thema kijkt, zie je meestal sjabloondelen voor dingen zoals kopteksten of voetteksten. theme.json stelt je in staat om sjabloondelen toe te wijzen aan de drie beschikbare plaatsingsgebieden binnen een sjabloon: Algemeen, Koptekst en Voettekst.

Te Converteren of Niet Te Converteren – Dat is de Vraag

Nu je een begrip hebt gekregen van de configuratieopties van het WordPress-thema die beschikbaar zijn dankzij het theme.json bestand, willen we nog één laatste ding aanstippen: het omzetten van een klassiek thema naar een blokthema, en de kwesties die je moet overwegen bij het omzetten.

Blokthema’s in WordPress hebben een aantal voordelen, aangezien ze zijn ontworpen om zowel schaalbaarheid als prestaties te verbeteren.

• Blokthema’s verbeteren de laadprestaties door alleen de stijlen te laden voor de blokken die aan een pagina zijn toegevoegd.
• Voor blokthema’s is het niet nodig om handmatig stylesheets in de wachtrij te zetten voor zowel de frontend als de editors.
• theme.json regelt alle aspecten van add_theme_support(), wat resulteert in minder tijd besteed aan PHP.
• Toegankelijkheidsfuncties zoals Overslaan naar inhoud, toetsenbordnavigatie en landmarks worden automatisch gegenereerd zonder extra code toe te voegen.
• Met een blokthema kan een eindgebruiker alle delen van hun website bewerken zonder enige code aan te raken.
• Door gebruik te maken van de Stijlen-interface kunnen gebruikers kleuren en typografie aanpassen voor de website en voor alle blokken die ze gebruiken.

Echter, het omzetten van een klassiek thema naar een blokthema is niet zonder risico’s.

• Het omzetten van een klassiek thema naar een blokthema kan invloed hebben op child-thema’s die een klassiek thema verwachten. Overweeg de mogelijke gevolgen — of het creëren van een nieuw project met een nieuwe themanaam — voordat je converteert.
• theme.json vereist WordPress versie 5.8 of later. Daarom verviel de ondersteuning voor Internet Explorer 11 toen WordPress 5.8 werd uitgebracht. Dus, als je klassieke thema IE11 ondersteunt — of je hebt bezoekers die IE11 gebruiken — kan het omzetten naar een blokthema mogelijk invloed hebben op de ervaring van je bezoekers.

Professionele Hulp Beschikbaar!

Hoewel het aanpassen van je WordPress-thema’s met opties via een theme.json bestand redelijk goed te doen is als je een beginner of gemiddelde WordPress-ontwikkelaar bent, ben je misschien nog niet 100% zeker of het een stap is waar je je comfortabel bij voelt om alleen te nemen. Maar vrees niet, want als je je aanmeldt voor een van de drie DreamPress beheerde WordPress-hostingplannen van DreamHost, krijg je automatisch toegang tot ons elite team van volledig in-house WordPress-experts, die 24/7 beschikbaar zijn om je te helpen met dit en alle andere onderdelen van je ontwikkelingsreis!