Decoderen van WordPress: Een Introductie tot Wereldwijde Stijlen

WordPress-blokken en Volledige Sitebewerking (FSE) functies maken het bouwen en stylen van een succesvolle website snel en eenvoudig.

Wereldwijde stijlen kunnen je helpen de uitstraling van je WordPress-site te verenigen zonder dat je afzonderlijke blokken of pagina’s hoeft te bewerken. Dus of je nu je achtergrondkleur wilt veranderen of de typografie van koppen wilt aanpassen, je kunt je wijzigingen op één plek doorvoeren, wat resulteert in een meer samenhangende en algeheel betere Gebruikerservaring (UX).

In deze post nemen we je mee door Global Styles. We leggen uit wat ze zijn, wat de voordelen zijn en hoe de nieuwe functies werken. Vervolgens bespreken we hoe je ze kunt gebruiken om je WordPress-website te stylen. Begin nu!

Een Overzicht van WordPress Globale Stijlen

Voordat je aan de slag gaat met Global Styles, is het belangrijk om te begrijpen wat ze zijn en hoe ze werken. Deze functie werkt samen met theme.json, een nieuw thema-instellingenbestand. Ontwikkelaars kunnen theme.json gebruiken om standaardinstellingen voor een site en individuele blokken te definiëren. Gutenberg past deze JSON automatisch toe wanneer je het bestand in de hoofddirectory van een blokgebaseerd thema plaatst.

Dit bestand is een van de nuttigste hulpmiddelen van de nieuwe volledige site-editor in WordPress 5.9. Het bestand stelt thema-auteurs in staat om Globale Stijlen en Globale Instellingen te delen. WordPress herformatteert de gegevens die uit deze JSON-objecten worden gehaald en zet ze om in CSS. Vervolgens kunnen gebruikers de stijlen verder aanpassen in de WordPress-editor.

In eerdere versies van de Gutenberg plugin, moest je ondersteuning voor de stijleigenschappen van een blok registreren voordat je ermee kon werken in theme.json. Ook moest je in klassieke thema’s en oudere versies PHP gebruiken om zaken zoals je kleurkeuzes en lettertypen te definiëren. Vervolgens moest je stijlen toevoegen voor de frontend en backend kanten van je thema.

Echter, met de nieuwste versie, wanneer je een thema gebruikt met het theme.json bestand op zijn plaats, voegt WordPress automatisch de daar gedefinieerde stijlen toe aan je stylesheet. Je kunt dit systeem gebruiken om volledig nieuwe kleurenpaletten toe te voegen, de typografie van thema’s te wijzigen, en meer.

Waarom WordPress Globale Stijlen Gebruiken

Ongeacht je vaardigheidsniveau, zul je waarschijnlijk merken dat het gebruik van Global Styles een intuïtieve en toegankelijke ervaring is. Over het algemeen kan het het webdesign-proces stroomlijnen door het makkelijker te maken om het uiterlijk en gevoel van je site te veranderen. Als je een WordPress-beginner bent, kan het benutten van deze Global Styles betekenen dat je geen ontwikkelaar hoeft in te huren om je website te ontwerpen. Sorry, ontwikkelaars.

Aan de andere kant kan deze nieuwe functie bijzonder nuttig zijn voor thema-ontwikkelaars. Dat komt omdat Global Styles WordPress-ontwikkelaars helpt bij het stylen van blokken binnen de Block Editor. Dit kan zeer voordelig zijn, vooral voor nieuwe thema-auteurs. Het biedt een verscheidenheid aan bedieningselementen die de noodzaak om aangepaste oplossingen te creëren voor het stylen van een site minimaliseren.

Met andere woorden, Global Styles vereenvoudigt themaontwikkeling in hoge mate. Als gevolg hiervan kan het ontwikkelaars helpen om schadelijke ontwerpfouten te vermijden.

Het Aanmaken van het theme.json Bestand

Het theme.json-bestand bevat twee belangrijke onderdelen: instellingen en stijlen. Instellingen verwijzen naar een lijst van globale of contextuele configuratiewaarden die bepalen hoe de editor en blokken zich gedragen. Bijvoorbeeld, het beïnvloedt welke bedieningselementen standaard ingeschakeld zijn, welke bedieningselementen verborgen zijn voor de Gebruikersinterface (UI), het beschikbare kleurenpalet, typografie-instellingen, enz.

Styles regelt de ontwerptaal van het thema en stelt thema-auteurs in staat om elementen te definiëren zoals:

• Lettergrootte
• Regelhoogte
• Achtergrondkleuren
• Linkkleuren

Als je een theme.json-bestand wilt aanmaken, kun je een nieuw bestand met die naam maken en het vervolgens in de rootmap van je thema plaatsen. Alle inhoud van je bestand moet tussen twee accolades worden geplaatst: { }.

Hierna gebruik je eigenschapsnamen en waarden binnen dubbele aanhalingstekens en gescheiden door een dubbele punt, bijvoorbeeld:

{

"eigenschapsnaam": "waarde"

}

De eigenschapsnaam kan zowel een instelling als een bloknaam zijn. Hieronder staat een voorbeeld van een zeer basaal theme.json bestand:

{

    "versie": 1,

    "instellingen": {},

    "stijlen": {},

    "aangepasteSjablonen": {},

    "sjabloonOnderdelen": {}

}

Versie 1 van het theme.json-formaat is de vroegste, meest stabiele versie. Echter, versie 2 wordt gebruikt vanaf WordPress 5.9. Terwijl de versiesectie de eerste moet zijn die het openingshaakje volgt, kunnen de volgende secties in willekeurige volgorde geplaatst worden.

Zoals we al zeiden, bestaan de twee hoofdsecties van het bestand uit Instellingen en Stijlen. Laten we dus eens nader kijken naar de presets voor elk.

Instellingen Voorinstellingen

Presets verwijzen naar de standaardinstellingen evenals eventuele aangepaste CSS-eigenschappen en worden gegenereerd door de waarden in theme.json. Enkele van de belangrijkste categorieën van presets zijn:

• Kleur
• Typografie
• Indeling
• Afstand

Categorieën kunnen ook subcategorieën hebben. Bijvoorbeeld, een subcategorie van Kleur kan Kleurenpalet zijn:

{

"version": 2,

"instellingen": {

"kleur": {

"palet": [

{

Elke voorinstelling creëert ook een aangepaste CSS-eigenschap met behulp van de “–wp–preset–{preset-category}–{preset-slug}” naamgevingsconventie.

Er zijn een heleboel voorinstellingen en voorbeelden die je kunt gebruiken om je theme.json bestand te creëren, dus we zullen ze hier niet allemaal bespreken. Je kunt echter verwijzen naar de WordPress-handleiding voor meer gedetailleerde begeleiding.

Stijlvoorinstellingen

Stijlvoorinstellingen beheersen de stijlen van objecten binnen blokken. Bijvoorbeeld, de volgende zou een manier zijn om de hex-waarde voor een achtergrond te gebruiken en een wereldwijde stijlvoorinstelling voor de tekstkleur:

{

        "versie": 2,

"instellingen": { ... },

"stijlen": {

"kleur": {

"achtergrond": "#FBF",

"tekst": "var(--wp--preset--color--purple)"

}

}

}

Als we de kopkleur van een blok wilden veranderen, zou het er ongeveer zo uitzien:

{

        "version": 2,

"instellingen": {...},

"stijlen": {

...,

               "blokken": {

             "core/heading": {

     "kleur": {

      "tekst": "var(--wp--preset--kleur--blauw)"

     }

Opnieuw zijn er bijna oneindig veel voorbeelden en manieren om presets te gebruiken voor blokstijlen. Je kunt verwijzen naar de WordPress-documentatie voor een volledige uitleg.

Er zijn ook Sjablonen en sjabloononderdelen-secties. Deze bevatten de basisbestanden van je thema, zoals index.html, evenals secties om je thema te organiseren en te structureren.

Hoe Je WordPress-Site Te Stijlen Met Globale Stijlen

Als je een beginner-vriendelijke manier zoekt om Globale Stijlen te gebruiken om je website vorm te geven, kun je de Global Styles interface gebruiken met een WordPress blokthema. Let op dat je alleen toegang hebt tot de Stijlen interface met WordPress 5.9 of hoger.

Een Blokgebaseerd Thema Kiezen

Eerst heb je een blokgebaseerd thema nodig. Om er een te vinden, kun je navigeren naar de WordPress Theme Directory vanuit je beheerdersdashboard door te bladeren naar Weergave > Thema’s > Nieuw toevoegen. Vervolgens kun je klikken op de Feature Filter en Volledige Site Bewerking selecteren, gevolgd door Toepassen:

Zodra je een WordPress-thema vindt dat je leuk vindt, kun je je muis eroverheen bewegen, vervolgens Installeren selecteren gevolgd door Activeren. We zullen Twenty Twenty-Two gebruiken, wat mogelijk al geïnstalleerd is als je WordPress 5.9 of later gebruikt.

Toegang Tot De Stijleninterface

Hierna ga je naar je Theme Editor (Appearance > Editor). In de rechterbovenhoek van het scherm zie je een half afgeschaduwde cirkel, die het Styles panel vertegenwoordigt:

Wanneer je er voor het eerst op klikt, wordt een Stijlen Welkomstgids gepresenteerd. Als je hier in de toekomst toegang tot nodig hebt, kun je het vinden door op de drie verticale puntjes in de rechterbovenhoek te klikken en Welkomstgids te selecteren.

Het voorbeeldvenster laat zien hoe de huidige stijl van je thema eruitziet. Onder het paneel Stijlen vind je instellingen voor:

• Typografie
• Kleuren
• Indeling
• Blokken

Laten we elk van hen eens nader bekijken.

Typografie

Onder Typography kun je de typografie-instellingen beheren voor twee elementen: Text en Links.

Je kunt het lettertype en de grootte veranderen:

Je kunt ook de regelhoogte aanpassen en een lettergewicht selecteren. Je hebt dezelfde opties voor je links. Als je klaar bent, vergeet dan niet je wijzigingen op te slaan.

Kleuren

Onder Kleuren vind je de standaard kleurvoorinstellingen die bij je thema horen. Om je eigen kleurenpaletten te maken, kun je de HEX-waardenummers invoeren of de slepen-en-neerzetten kleurenkiezer gebruiken om je voorkeurskleuren te genereren:

Je kunt de kleuren ook hernoemen naar iets herkenbaarders of beschrijvenders dan de standaard hexadecimale alfanumerieke waarden. Je kunt aangepaste verlopen toevoegen, duo-toonfilters toepassen op afbeeldingen en meer.

Hierna kun je de kleuren voor drie hoofdelementen wijzigen: Achtergrond, Tekst en Links. Je kunt ook een van deze elementen selecteren om de stijl aan te passen. De wijzigingen worden direct toegepast tijdens het bewerken.

Indeling

Onder Layout kun je de padding en andere elementen aanpassen. Dit is eenvoudig en kan zeer nuttig zijn wanneer je een kleine aanpassing moet maken (bijvoorbeeld voor de symmetrie van de pagina).

Blokken

Ten slotte kun je het uiterlijk van afzonderlijke blokken wijzigen. Nadat je Blokken hebt geselecteerd uit het Stijlenpaneel, vind je een lijst van blokken op je site.

Stel je wil de stijl van je Heading-blok wijzigen. Je kunt Heading uit de lijst selecteren en vervolgens de Colors en Typography instellingen aanpassen:

Als je klaar bent, kun je op Opslaan klikken. Als je ooit terug wilt naar de themastijlen die je had voordat je wijzigingen aanbracht, kun je naar het Stijlenpaneel navigeren, op de drie verticale puntjes klikken en vervolgens Herstellen naar standaardinstellingen selecteren.

Een Betere Manier Om WordPress Te Gebruiken En Vorm Te Geven

WordPress werkt continu aan het verbeteren van de ervaring voor zijn gebruikers. Nu, dankzij Global Styles, is themaontwikkeling net dat beetje eenvoudiger geworden voor zowel beginners als ervaren professionals.

Zoals besproken in deze post, kun je een theme.json bestand creëren om Globale Stijlen configuraties toe te passen op je thema. Je kunt ook de Stijlen-editor gebruiken met een blok-gebaseerd thema om het uiterlijk van je site aan te passen. Dit alles maakt het ontwerpen van een succesvolle website een fluitje van een cent.

DreamHost is een team van ervaren webexperts. Wij begrijpen het belang van het optimaliseren van je WordPress-ervaring. We beloven je inspanningen te ondersteunen met de nieuwste open-source technologie en bekroonde ondersteuning. Bekijk vandaag nog onze beheerde WordPress-hostingplannen om meer te leren!