Het heeft even geduurd voordat WordPress volwassen werd, maar het is uitgegroeid van een eenvoudig blogplatform tot een robuust Content Management Systeem (CMS) dat bijna het hele web bestuurt. De grootste vooruitgang is geboekt bij het maken van siteontwerpen. WordPress Full Site Editing (FSE) is een ambitieuze manier iedereen complexe tools te geven.
Deze uitgebreide gids verkent de geschiedenis en functionaliteit van WordPress Full Site Editing. Het uiteindelijke doel is om je te laten zien hoe FSE werkt en je je eigen siteontwerpen te laten ontwikkelen, net als de professionals.
Een korte geschiedenis van ontwerpen en layouts maken binnen WordPress
Begrijpen hoe het ontwerpen van sites en layouts binnen WordPress is veranderd, is een essentieel onderdeel van het waarderen van FSE. De belangrijkste tool die centraal staat in waar we nu zijn, is de Classic Editor.
Natuurlijk was dit niet altijd “klassiek” Het was altijd de TinyMCE Editor – de standaard sinds de eerste versie van WordPress tot ongeveer 2018. Dit is een eenvoudige What You See Is What You Get (WYSIWYG) teksteditor waarmee je content en basic HTML kunt invoeren, samen met enkele opmaakstijlen. Je kunt de TinyMCE Editor nog steeds verkrijgen omdat het een commerciële tool is:
De belangrijkste nadelen van de TinyMCE Editor zijn een gebrek aan front-end preview opties en minder flexibiliteit dan je soms zou willen. Themaframeworks werden een haalbaar en krachtig alternatief. Het Genesis Framework van StudioPress is er nog steeds, maar er waren nog een paar andere, zoals Thesis.
Je kunt hier zien hoe we overstappen van tekst bewerken naar visueel webdesign. Het framework geeft je opties aan de achterkant van WordPress, waardoor je aspecten van de voorkant kunt veranderen. Daarnaast krijg je meer ‘bare metal’ functionaliteit om verdere wijzigingen aan te brengen, zoals hooks en filters, ondersteuning van templates en meer.
Dit was echter nog steeds niet erg toegankelijk voor een doorsnee gebruiker en daarom werden page builder plugins populair. Je gebruikt ze naast de TinyMCE/Classic Editor om je een drag-and-drop systeem te geven voor het ontwerpen van je site. Deze plugins zijn nog grotendeels hetzelfde als rond 2011. Divi en Beaver Builder voeren nog steeds de boventoon, hoewel Elementor ook een kolos is:
Je zult de volgende paragraaf willen lezen om te begrijpen waarom we alternatieven hebben voor de TinyMCE Editor en een page builder plugin.
De Block Editor en WordPress Full Site Editing
WordPress is nummer één in populariteit, maar om daar te komen heeft het zijn titel moeten verdedigen. In de loop der jaren hebben veel andere platforms de markt verzadigd.
Squarespace, Wix, Medium en vele anderen willen allemaal hetzelfde publiek en dezelfde gebruikersbasis als WordPress, en tot aan de Block Editor ze allemaal een veel betere bewerkingservaring.
Dit was een grote zorg voor het management van WordPress, omdat andere platforms op dat moment zichtbaarder tractie kregen. De concurrentie had ook moderne, visuele, krachtige interfaces, zelfs voor eenvoudige lay-outcontrole.
De Block Editor is een modulaire manier om de berichten en pagina’s van je site op te bouwen, hoewel dit ook nadelen heeft. Om te beginnen betekent de beperkte reikwijdte dat je waarschijnlijk een plugin voor paginabouwers nodig hebt als je ‘diepere’ wijzigingen wilt aanbrengen. Je hebt ook nog steeds kennis van ontwikkeling nodig om een complete site te bouwen, en dat is een creatieve barrière waar het WordPress team een oplossing voor heeft.
Wat WordPress Full Site Editing (FSE) is
WordPress Full Site Editing (Full Site Editing) is de nieuwste manier om je site te ontwikkelen. Het bouwt voort op het gebruik van blokken om je ontwerp samen te stellen, en gaat verder dan afzonderlijke berichten en pagina’s. In de kern kun je met FSE elk aspect van het ontwerp van je WordPress website beheren via een uniforme en intuïtieve interface.
Dit is nu dus de ‘officiële’ manier om je site te bewerken. Het brengt alle aspecten van je site onder zijn vleugels:
- Navigatie bewerken. De oude methode via het scherm Appearance > Menus builder is nu opgenomen in de Site Editor.
- Globale stijlen. Je hebt meer controle over het uiterlijk van je hele site. Dit omvat kleuren, typografie, spatiëring en nog veel meer.
- Templates bewerken. Hiervoor was vroeger kennis nodig van ontwikkeling en codering, zoals PHP, HTML en CSS. Nu kun je de Site Editor gebruiken om templates voor de verschillende onderdelen van je site te maken en aan te passen zonder dat je code nodig hebt.
- Blokpatterns. Beschouw dit als herbruikbare ontwerpelementen met behulp van verzamelingen blokken die je in je layouts kunt invoegen.
Gezien de evolutie van de editor verdwijnt er ook wat functionaliteit. Je hebt bijvoorbeeld geen widgetgebieden meer nodig, hoewel WordPress ze nog wel gebruikt als oude functionaliteit voor niet-block thema’s.
We komen later terug op wat je met WordPress Full Site Editing kunt bereiken. Voor het zover is, gaan we eerst dieper in op waarom we FSE nodig hebben.
Waarom FSE in WordPress zit
Het WordPress team heeft een paar redenen om FSE te introduceren. Sommige daarvan zijn technische overwegingen. De Block Editor laat ons bijvoorbeeld niet alle aspecten van de site bewerken, terwijl die functionaliteit er eigenlijk al zou moeten zijn.
Het is moeilijk te begrijpen waarom het zo lang heeft geduurd om ons te laten werken aan templatestyles zonder dat we code nodig hebben. In de Classic Editor, frameworks, page builder plugins en de Block Editor hebben we nooit de mogelijkheid gehad. FSE lost dit op een native manier op voor WordPress.
Deze vereenvoudiging verenigt de bewerkingservaring en brengt deze onder controle van het kernteam van WordPress in plaats van externe ontwikkelaars. Het betekent ook dat de leercurve consistent is. Tussen content, layout en ontwerp heb je een vertrouwde ervaring van het ene scherm naar het andere.
Deze ervaring is belangrijk. De Full Site Editing van WordPress zal niet verdwijnen; het zal na verloop van tijd gewoon evolueren. Dit geeft het platform een basis om zich aan te passen aan alles wat het kernontwikkelingsteam naar WordPress wil brengen.
Over het algemeen strekt deze verbetering zich uit van de ontwikkelaars tot de eindgebruikers. WordPress Full Site Editing iedereen meer controle over de ontwerpwijzigingen die ze willen maken zonder afhankelijk te zijn van ontwikkelaars, complexe aanpassingen of kennis van codering.
De alternatieven voor FSE
Voor het WordPress team is FSE niet alleen het heden, maar ook de toekomst van het platform. Je hebt echter wel een compatibel thema nodig om het te kunnen gebruiken (waarover later meer). Bovendien zijn sommige WordPress bedrijven het daar misschien niet mee eens, vooral die met concurrerende producten.
WordPress webontwikkelaars zouden bijvoorbeeld beweren dat het een goed idee is om het ontwerp van je thema toe te vertrouwen aan iemand met expertise. Daar zijn we het in veel gevallen mee eens, vooral als je complexe behoeften, het juiste budget en tijd hebt.
Natuurlijk is de Block Editor nog steeds bruikbaar voor de meeste content die je maakt en aanpast. De sprong van deze naar Full Site Editing is maar een kleine stap, en je gebruikt hem waarschijnlijk al:
Veel gebruikers zullen voor het grootste deel gebruik maken van de Block Editor en dan een andere oplossing toevoegen. Het toevoegen van een page builder plugin biedt een deel van de functionaliteit die de Block Editor mist. Divi, Elementor, Beaver Builder, Brizy en nog veel meer hebben geweldige features en maken diepere aanpassingen en ontwikkeling mogelijk:
Voor een tegenovergestelde ervaring van het volledig bewerken van WordPress en een terugkeer naar waar dit allemaal begon, kun je kiezen voor een geheel nieuw CMS: ClassicPress.
De filosofie van het project is dat de evolutie van WordPress een geweldig idee is, afgezien van de Block Editor en, in het verlengde daarvan, FSE. Daarom bevat de ClassicPress fork deze niet. In plaats daarvan maak je sites met de Classic of TinyMCE Editor, net als vroeger.
Het is in wezen een oplossing voor de onvolwassenheid van de Block Editor bij de eerste release. Destijds was het concept theoretisch logisch. Maar gezien de huidige bewerkingservaring van WordPress is er weinig reden om voor ClassicPress te kiezen.
Hoe WordPress Full Site Editing werkt
In een notendop breidt WordPress Full Site Editing de functionaliteit van de Block Editor uit over je hele site. Om FSE te kunnen gebruiken, heb je een ‘Block theme’ of ‘FSE theme’ nodig dat dit ondersteunt. Hierover later meer.
Het overzicht van hoe FSE werkt is eenvoudig:
- FSE gebruikt blokken. Net als de huidige versie van de WordPress editor, gebruikt je hele site Blocks voor elk onderdeel. Hier zullen zowel losse content-elementen als grotere structurele onderdelen (zoals header en footer) Blocks gebruiken.
- Je kunt paginatemplates bewerken binnen WordPress. Je hebt geen PHP kennis meer nodig om templatebestanden te wijzigen. In plaats daarvan kun je ze maken en bewerken vanuit de Site Editor.
- Er is toegang tot site-brede ontwerptools. We zullen later kijken naar het Global Styles panel, maar hiermee kun je ontwerpelementen beheren die van invloed zijn op je hele site. In veel gevallen heb je geen custom CSS nodig om je visie te implementeren.
- Met blokpatterns kun je snel bouwen. Net als bij de Block Editor zijn er layouts voor veelvoorkomende siteonderdelen die je zonder beperkingen kunt invoegen en aanpassen.
- Het bestand theme.json staat centraal in FSE. Dit configuratiebestand definieert de fundamentele stijlen en instellingen voor je thema. Het is een startpunt voor het verder aanpassen van je site, maar het kan ook de ‘hub’ zijn voor je ontwikkeling.
De meeste gebruikers zullen geen versie van WordPress ouder dan 5.9 gebruiken, maar als dat wel het geval is, moet je updaten om gebruik te kunnen maken van FSE. Zoals we schetsen, heb je ook een ondersteunend thema nodig. Laten we dit snel bespreken.
Een geschikt FSE thema kiezen
Gelukkig vereist het kiezen van een blokthema dezelfde mate van zorgvuldigheid als elk ander type thema. Je moet naar een paar objectieve facetten kijken om er zeker van te zijn dat je een sterke oplossing downloadt:
- Controleer of de codebase van het thema regelmatig wordt bijgewerkt.
- Zoek uit wat andere gebruikers van het thema vinden door middel van beoordelingen en recensies.
- Zorg ervoor dat de ontwikkelaar het juiste niveau van ondersteuning biedt voor jouw behoeften.
Omdat de Full Site Editing van WordPress nieuw is op het platform, zijn er minder thema-opties beschikbaar. Dit betekent echter niet dat kwaliteit moeilijk te vinden is. Veel grotere ontwikkelaars hebben een FSE/Block thema. Een van de eerste was ThemeIsle’s FSE versie van Neve:
De ’traditionele’ of ‘klassieke’ versie van het thema gebruikt de oude Customizer van de Appearance scherm. Deze versie bevat de Site Editor volledig en biedt betere subjectieve prestaties.
Er zijn nog andere Block thema’s om naar te kijken, zoals Portfolio WP en Mugistore. Maar Ollie is misschien wel de beste van het stel:
Dit thema zet zich zonder aarzelen in voor Full Site Editing met WordPress. Het heeft een handige onboarding wizard en er is zelfs een premium versie met veel Pattern Library elementen en templates.
Zelfs het standaardthema Twenty Twenty-Four is nu een haalbare keuze voor je site:
De mogelijkheden en diepgang van de Site Editor stellen ons in staat om bovenop thema’s te bouwen (en ze uit te breiden) die vaak veel code en middelen vereisen. Het democratiseert de mogelijkheid om thema’s te bouwen en te ontwikkelen, en de hoofdinterface is hiervoor het eerste aanspreekpunt.
Rondleiding door de hoofdinterface van FSE
Om de Site Editor te vinden, navigeer je naar Appearance > Editor binnen WordPress:
Dit scherm is eenvoudig. Aan de rechterkant zie je een preview van de layout. Je kunt hierop klikken om de Site Editor interface voor je startpagina te openen. Aan de linkerkant zie je een aantal links naar andere bewerkingspagina’s voor specifieke taken. We zullen deze schermen verderop nader bekijken.
Voordat we ingaan op elk van de vijf pagina’s van FSE, moet je weten dat je de Site Editor kunt afsluiten met het WordPress logo in de linkerbovenhoek van het scherm. Als alternatief kun je op de ’terug’-pijl klikken op de hoofdpagina Design:
Nu dit achter de rug is, gaan we FSE gebruiken.
De 5 pijlers van WordPress Full Site Editing
Tijd om elke pagina van de site editor bekijken in de volgorde waarin het verschijnt in de navigatie.
1. Navigation
De navigatiepagina vervangt het scherm Appearance > Menus. Zodra je deze opent, zie je een lijst met berichten en pagina’s op je site:
Als dit een nieuwe site is, zie je hier al je berichten en pagina’s staan. Dit kan verwarrend zijn omdat dit je primaire navigatiemenu is. Open naast de kop Navigatie het menu Actions. Dit geeft je opties om het menu te bewerken, de naam te veranderen, te verwijderen of te dupliceren:
Als je op Edit klikt, wordt een versie van de Block Editor geopend die je menu als Navigation blok bevat:
In de zijbalk heb je opties om elk item omhoog of omlaag te verplaatsen, uit het menu te verwijderen of er een submenu van te maken:
Elk item in het menu maakt gebruik van een Page Link Block, dat zijn eigen opties heeft. Je hebt tweaks voor opmaak in de regel, samen met instellingen voor de stijl van de zijbalk:
Merk op dat je hier inline afbeeldingen, submenu’s en meer kunt toevoegen. Het is flexibeler dan de klassieke manier om navigatie te maken. Om eenvoudig een item aan het menu toe te voegen, klik je op het Plus pictogram en selecteer je je bericht of pagina:
Zodra je je wijzigingen hebt opgeslagen, zie je dat de navigatie je aanpassingen weerspiegelt. Om nog meer menu’s te maken, kun je de link Actions > Duplicate gebruiken op de navigatiepagina.
2. Styles
Met de Styles pagina bepaal je het uiterlijk van je site op een globaal niveau. De zijbalk biedt een paar verschillende paletten en typografie-instellingen voor verschillende ontwerpen:
Als je op een van deze paletten klikt, zie je het ontwerp op je site. Er staat echter een ‘potlood’ pictogram bovenaan de zijbalk om verdere wijzigingen aan te brengen in de Site Editor:
Elk van de opties in de zijbalk heeft betrekking op kleuren, layouts, typografie en zelfs schaduwinstellingen. Je kunt bijvoorbeeld lettertypen voor de hele site selecteren en deze toepassen op verschillende elementen van je ontwerp:
Als je dieper in de menu’s gaat, krijg je vaak meer opties om mee te spelen, zoals spatiëring, kleuren en meer. In het gedeelte Layout kun je de afmetingen van je hoofdinhoudsgebied aanpassen, samen met opvulling en blokafstand:
Als je wilt zien hoe deze wijzigingen eruit zien zonder door je site te bladeren, kun je het ‘oog’ pictogram gebruiken om het Style book te openen. Het is een handig visualisatiehulpmiddel waar ontwerpers dol op zullen zijn:
Tot slot, hoewel we ons er hier niet op zullen richten, kun je ook het uiterlijk van elk blok voor je site aanpassen. Je kunt bijvoorbeeld voortbouwen op de globale styling van een Paragraph blok. Nogmaals, als je klaar bent, kun je je wijzigingen opslaan en ze zullen van toepassing zijn op je site.
Het bestand theme.json gebruiken met WordPress voor Full Site Editing
Voordat je naar het volgende FSE scherm gaat, moet je het theme.json bestand kennen. Dit is in wezen de ontwikkelaarsversie van de Styles schermen.
Hiermee kun je de standaard stijlen voor je site en de blokken definiëren, en je gebruikt het als een configuratiebestand. Bovendien maakt het gebruik van het JSON format, dus het biedt een minder code-heavy ervaring dan in het verleden.
Uiteindelijk moet je weten dat wat je ook in theme.json kunt doen, je ook in de Site Editor kunt doen.
3. Pages
De Pages pagina dupliceert de functionaliteit van de klassieke Post en Page pagina’s in het WordPress dashboard. Je ziet bijvoorbeeld een lijst met statussen die je pagina’s filteren in Published, Scheduled, Drafts en andere:
Elke pagina heeft extra acties, zoals Edit, View, Rename en Delete. Je kunt een pagina ook bewerken met het ‘potlood’ pictogram. Bovenaan de lijst vind je de optie Add New Page knop, die een nieuwe pagina toevoegt.
Als je de Blok-editor al gebruikt, zullen deze schermen je het meest thuis voelen. Hoewel je hier dezelfde functionaliteit hebt als normaal, geeft de Site Editor je een aantal extra Theme Blocks om je te helpen bij het bouwen van je site. Deze dekken typische gebruikssituaties zoals het toevoegen van een sitelogo, navigatie, auteurs, opmerkingen en meer:
Eén daarvan – het Query Loop blok – kan je helpen om taken uit te voeren waarvoor je vaak PHP nodig hebt. Omdat je er bijvoorbeeld berichten mee kunt weergeven op basis van specifieke parameters, kun je je nieuwste berichten weergeven of zelfs een portfolio opbouwen. Dit alles kan echter niet zonder de laatste twee pagina’s van de Site Editor.
4. Templates
Templates zijn een belangrijk onderdeel van de ontwikkeling van WordPress. Het zijn herbruikbare layouts waarmee je de structuur van de verschillende onderdelen van je site kunt definiëren. Normaal gesproken is er kennis met PHP voor nodig, maar je kunt ze allemaal aanpassen (en nieuwe maken) zonder code binnen de Site Editor.
Het werken met templates gaat op dezelfde manier als met berichten en pagina’s: je gebruikt de Site Editor om blokken toe te voegen aan de template en slaat vervolgens de wijzigingen op. Natuurlijk zijn deze van toepassing op elke pagina die de betreffende template gebruikt.
Om een nieuwe template te maken, klik je op de knop Add New Template:
Dit leidt je door een snelle wizard om het type template te selecteren dat je wilt maken en een geschikt blokpattern om het ontwerp te starten. Deze patterns staan centraal in onze laatste paragraaf.
5. Patterns
Blokpatterns zijn gerelateerde verzamelingen van blokken die specifieke rollen vervullen op je site. Je kunt bijvoorbeeld een headerpattern invoegen, compleet met logo, navigatie en sitetitel:
Het maken ervan is eenvoudig, hoewel je zonder de Site Editor deze patterns zou moeten registreren met PHP. Nu kun je echter de pagina Patterns gebruiken:
Aan de linkerkant zie je alle beschikbare patterns opgesplitst in mappen met de naam ’types’ Deze zijn een geweldige manier om snel een siteontwerp op te bouwen en zien er vaak fantastisch uit.
De knop Add New Pattern opent de editor en laat je deze secties zelf maken. Hierdoor kun je herbruikbare elementen voor je site maken, wat een duurzame en zelfvoorzienende manier is om sites te ontwikkelen voor jezelf en iedereen met wie je samenwerkt.
Tips om WordPress Full Site Editing te gebruiken om ontwerpen te maken
Er is genoeg om in te duiken als het gaat om WordPress Full Site Editing, en we kunnen niet alles behandelen wat je ermee kunt doen. We kunnen echter wel een paar tips geven om het meeste uit FSE te halen.
Je kunt bijvoorbeeld je templates en stijlen exporteren voor hergebruik op andere sites. Om dit te doen, ga je naar de Site Editor voor een bericht of pagina en klik je op het menu Options in de bovenste werkbalk. Kies in het vervolgkeuzemenu Export:
Dit geeft je een ZIP bestand van je thema en als je het moet importeren, kun je dat doen met de WordPress Importer plugin.
Via het pictogram Search in de Site Editor schermen en de zoekbalk in de werkbalk van de Block Editor krijg je toegang tot het WordPress Command Pallette of Command Center. Als je code-editors gebruikt, zul je begrijpen hoe dit werkt. Het is een manier om bijna overal in de Site Editor te komen met behulp van een contextuele query en zelfs om commando’s uit te voeren:
Hiermee kun je je ontwikkeling versnellen en het aantal toetsenbord- en muisacties dat je moet uitvoeren verminderen. Je kunt vanaf hier allerlei site-elementen toevoegen, verwijderen en bewerken, verschillende weergaven wisselen en met patterns werken.
Samenvatting
WordPress Full Site Editing is de huidige manier om je site te ontwerpen zonder code. Het is een grote stap vooruit ten opzichte van de vorige versies van het bewerken van inhoud en geeft je een uitgebreide set opties om mee te spelen.
We houden van de flexibiliteit: typische site-eigenaren hoeven geen regel code aan te raken en kunnen werken in de schermen van de Site Editor. Ontwikkelaars hebben toegang tot het theme.json bestand, dat we in een toekomstig artikel zullen behandelen. Op dit moment is dit de beste manier voor het maken van een WordPress website volgens jouw exacte specificaties.
Wil jij WordPress Full Site Editing gaan gebruiken voor je WordPress projecten? Laat ons weten wat je ervan vindt in de comments hieronder!
Laat een reactie achter