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.
![De TinyMCE rich text editor interface geïntegreerd in een website. Het toont een voorbeeld van een landingspagina voor evenementregistratie met bewerkingstools en een formulier voor gebruikers om zich te registreren voor een evenement.](https://kinsta.com/wp-content/uploads/2024/07/classic-editor_1.png)
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 TinyMCE rich text editor interface geïntegreerd in een website. Het toont een voorbeeld van een landingspagina voor evenementregistratie met bewerkingstools en een formulier voor gebruikers om zich te registreren voor een evenement.](https://kinsta.com/wp-content/uploads/2024/07/tinymce-editor.png)
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.
![Een blogpagina met het Genesis Framework. Het featuret een zwart-wit afbeelding van de Eiffeltoren in Parijs. Het bericht is getiteld April in Parijs - Ella Fitzgerald en gedateerd op 1 februari 2018. De zijbalk toont recente berichten met miniatuurafbeeldingen.](https://kinsta.com/wp-content/uploads/2024/07/genesis-framework_1.png)
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:
![De Elementor interface toont het ontwerp van de homepage van een meubelwinkel. De pagina featuret een Nieuwe Collectie sectie met productafbeeldingen en beschrijvingen, waaronder een tafellamp voor $200 en een ruimtebank voor $300. Rechts staat een grote paarse acryl bijzettafel. De interface bevat bewerkingstools en kleurkiezers aan de linkerkant.](https://kinsta.com/wp-content/uploads/2024/07/elementor-page-builder_1.png)
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.
![De interface van de Wix website builder toont een fotoportfolio pagina in de bewerkmodus. Het linkerpaneel toont opties om secties toe te voegen, terwijl het hoofdgedeelte een voorbeeldlay-out toont voor Edward's White Room Photography met een afbeelding van een vrouw die een camera vasthoudt. Verschillende bewerkingstools en publisher opties zijn zichtbaar in de bovenste menubalk.](https://kinsta.com/wp-content/uploads/2024/07/wix-editor_1.png)
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.
![De interface van de WordPress Site Editor. De afbeelding toont een lay-out van een template voor berichten met drie kolommen voor de titels van berichten, uittreksels en publicatiedata. Er is een contextmenu geopend met opties als Kopiëren, Toevoegen voor, Toevoegen na en meer.](https://kinsta.com/wp-content/uploads/2024/07/full-site-editing.png)
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.
![De WordPress Templates beheerinterface binnen de Site Editor. Het toont verschillende paginasjablonen zoals Alle archieven, Blog Home, Index en Pagina zonder titel met miniatuurvoorbeelden en beschrijvingen voor elke template.](https://kinsta.com/wp-content/uploads/2024/07/templates-pages.png)
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.
![Een code editor venster met PHP functies voor het registreren van aangepaste blokstijlen in WordPress. De code definieert stijlen voor een arrow-icon-details blok, inclusief CSS eigenschappen voor padding en list-style-type.](https://kinsta.com/wp-content/uploads/2024/07/theme-development.png)
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:
![De WordPress Block Editor interface voor een Privacy Policy pagina. Het content gebied toont secties over Reacties, Media en Cookies met voorgestelde tekst. Een zijbalk aan de rechterkant biedt blokbewerkingsopties voor typografie en styling.](https://kinsta.com/wp-content/uploads/2024/07/block-editor-1.png)
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:
![The Elementor interface within WordPress, with text editing tools on the left, in the middle a preview of the page's content with a landscape image of a mountain and on the right a structure panel with the page's layout elements.](https://kinsta.com/wp-content/uploads/2024/07/page-builder-screen.png)
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 homepage van de ClassicPress-website. Deze feature heeft een groenblauwe achtergrond met kleurverloop en witte tekst waarin ClassicPress wordt beschreven als het CMS voor ontwerpers. Er is een afbeelding van het ClassicPress dashboard en knoppen om te downloaden of over te stappen van WordPress.](https://kinsta.com/wp-content/uploads/2024/07/classicpress-homepage.png)
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 site van het Neve FSE-thema. De header bevat navigatiekoppelingen en de hoofdcontent featuret een kop (“Maak en groei je unieke website vandaag nog”) met een subkop en twee Call To Action knoppen. Hieronder staan drie feature pictogrammen voor het bouwen van sites, stijlvariaties en patroongereedheid.](https://kinsta.com/wp-content/uploads/2024/07/neve-fse.png)
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:
![Een reeks mockups voor websiteontwerp en UI-componenten weergegeven in een rasterlay-out van het Ollie-thema. Het toont verschillende elementen zoals headers, content secties, afbeeldingsgalerijen en Call To Action knoppen in donkere, lichte en kleurrijke thema's.](https://kinsta.com/wp-content/uploads/2024/07/ollie-theme.png)
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 startpagina van het thema Twenty Twenty-Four met een heldensectie inclusief een grote architectonische afbeelding van een modern gebouw met een kenmerkend schuin dak bedekt met houten latten. De header bevat navigatiekoppelingen voor een privacybeleid en een voorbeeldpagina.](https://kinsta.com/wp-content/uploads/2024/07/twenty-twenty-four_1.png)
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:
![A screenshot of the WordPress dashboard. The left sidebar displays the main WordPress admin menu options. The Appearance menu is expanded to show the Themes and Editor options. It also shows a Site Health Status warning.](https://kinsta.com/wp-content/uploads/2024/07/editor-link.png)
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:
![Het ontwerpscherm van de WordPress Site Editor. Er zijn opties voor Navigatie en Stijlen zichtbaar. Het WordPress logo en een pijl terug zijn gemarkeerd in de linkerbovenhoek.](https://kinsta.com/wp-content/uploads/2024/07/back-arrow.png)
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:
![Een volledige weergave van de Navigatie pagina in de WordPress Site Editor. De linker zijbalk toont een navigatiemenustructuur, terwijl het hoofdgedeelte van de content een websitevoorbeeld toont met plaatshoudertekst en het visuele navigatiemenu.](https://kinsta.com/wp-content/uploads/2024/07/navigation-screen.png)
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:
![Een deel van de navigatiepagina in de WordPress Site Editor. De titel van de site is bovenaan zichtbaar. De linker zijbalk toont navigatiemenu-items en een uitklapmenu in het midden biedt opties om een geselecteerd menu-item te hernoemen, bewerken, dupliceren of verwijderen.](https://kinsta.com/wp-content/uploads/2024/07/nav-more-items.png)
Als je op Edit klikt, wordt een versie van de Block Editor geopend die je menu als Navigation blok bevat:
![De navigatiemenu-interface van de site-editor. Het hoofdgedeelte van de content toont een lijst met items in het navigatiemenu met Lorem Ipsum-tekst. Aan de rechterkant staat een paneel Navigatiemenu met opties om de menustructuur te bewerken en te beheren.](https://kinsta.com/wp-content/uploads/2024/07/nav-block-editor.png)
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:
![Een close-up van de opties van het navigatiemenu in de site-editor. Het toont een vervolgkeuzemenu met opties voor het eerste menu-item om deze omhoog of omlaag te verplaatsen, submenulinks toe te voegen of items te verwijderen.](https://kinsta.com/wp-content/uploads/2024/07/nav-sidebar.png)
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:
![The Site Editor displaying the contents of a Navigation Menu Block. An inline menu displays a list of options to add new links, customize typography, adjust styles for the navigation elements, and more.](https://kinsta.com/wp-content/uploads/2024/07/page-link-block.png)
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:
![Een close-up van het navigatieblok in WordPress, met het menu Link toevoegen. Het menu toont een zoekbalk om een URL in te voeren en een lijst met pagina's, waaronder Privacybeleid en Voorbeeldpagina. Iconen voor het toevoegen van content en navigeren zijn zichtbaar in de bovenste werkbalk.](https://kinsta.com/wp-content/uploads/2024/07/add-page-nav.png)
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:
![De pagina Styles in de WordPress Site Editor. De kop luidt Een passie voor het creëren van ruimtes en gaat vooraf aan een beschrijving van de diensten. Hieronder staan zes categorieën van diensten: Renovatie en restauratie, Continue ondersteuning, Toegang tot apps, Consulting, Projectmanagement en Architectonische oplossingen. De linker zijbalk toont verschillende stijlvoorinstellingen en kleurenpaletten om het thema aan te passen.](https://kinsta.com/wp-content/uploads/2024/07/styles-screen.png)
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:
![Een close-up van een websiteontwerp in de Site Editor waarin de diensten van een architectenbureau worden getoond. De rechter zijbalk toont opties voor het aanpassen van de stijl voor typografie, kleuren, schaduwen en lay-out.](https://kinsta.com/wp-content/uploads/2024/07/styles-editor.png)
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:
![De interface van de Site Editor toont de globale typografie-instellingen. De linkerkant toont gedeeltelijke tekst over het maken van ruimtes, terwijl het rechterpaneel lettertype- en stijlopties toont, waaronder Cardo, Inter en Systeemlettertypen. Het kleurenschema gebruikt rode tekst op een lichte achtergrond.](https://kinsta.com/wp-content/uploads/2024/07/typography-settings.png)
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:
![Een screenshot van de interface van de WordPress Site Editor die de opties voor het aanpassen van de lay-out laat zien. Het hoofdgedeelte van de content toont een kopje “voor het maken van ruimtes” met wat beschrijvende tekst. De rechter zijbalk toont lay-out instellingen voor het aanpassen van content breedte, opvulling en blokafstand.](https://kinsta.com/wp-content/uploads/2024/07/layout-tab.png)
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:
![De WordPress Style Book interface, die typografische opties voor een website laat zien. De tekst “Code Is Poetry” wordt in verschillende groottes weergegeven om verschillende koppenstijlen te demonstreren. Een paragraaf met voorbeeldtekst en een opsommingsteken worden ook getoond. De rechter zijbalk biedt opties om typografie, kleuren, schaduwen en lay-out aan te passen.](https://kinsta.com/wp-content/uploads/2024/07/style-book.png)
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.
![Een code-editor die een deel van een WordPress theme.json bestand weergeeft. Het zichtbare gedeelte definieert kleurenpaletten en kleurverlopen, inclusief namen, hex kleurcodes en kleurverloopdefinities voor verschillende kleurenschema's.](https://kinsta.com/wp-content/uploads/2024/07/theme-json.png)
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:
![Het scherm Pagina's van de site-editor, met aan de linkerkant een lijst met gefilterde geplande pagina's. Aan de rechterkant zie je een voorbeeld van de startpagina van een website.](https://kinsta.com/wp-content/uploads/2024/07/pages-screen.png)
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:
![De interface van de WordPress Site Editor. De linker zijbalk toont verschillende blokopties zoals Navigation (navigatie), Site Logo (sitelogo) en Site Title (sitetitel). Deze zijbalk belicht het Query Loop Blok. Het hoofdbewerkingsgebied toont een paginalay-out met een hero image.](https://kinsta.com/wp-content/uploads/2024/07/theme-blocks.png)
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.
![De WordPress Templates beheerinterface binnen de Site Editor. Het toont verschillende page templateszoals All Archives, Blog Home, Index en Page No Title met thumbnail previews en beschrijvingen voor elke template.](https://kinsta.com/wp-content/uploads/2024/07/templates-pages.png)
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:
![Een nieuwe template toevoegen binnen de WordPress Site Editor. Het toont opties om templates toe te voegen voor verschillende paginatypes zoals Front Page, Pages, Author Archives, Category Archives en meer.](https://kinsta.com/wp-content/uploads/2024/07/add-template.png)
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:
![De WordPress Site Editor toont een header Block Pattern met menu-items, een sitetitel, een plaatshouder voor het logo en links naar een Privacybeleid, een voorbeeldpagina en twee andere Latijnse tekstitems. De bedieningselementen van de WordPress interface zijn zichtbaar bovenaan de afbeelding.](https://kinsta.com/wp-content/uploads/2024/07/block-pattern.png)
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:
![De WordPress Patterns beheerpagina in de Site Editor. De linker zijbalk toont categorieën van patterns. Het hoofdgebied toont miniatuurvoorbeelden van bannerpatronen, waaronder afbeeldingen van gebouwen en architectonische details.](https://kinsta.com/wp-content/uploads/2024/07/patterns-page.png)
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:
![De interface van de Site Editor toont het hoofdbewerkingsscherm, menuopties en een zijbalk met bewerkingstools. Onderaan is de functie Exporteren gemarkeerd.](https://kinsta.com/wp-content/uploads/2024/07/options-export.png)
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:
![Het Command Pallette in de Site Editor. Het vervolgkeuzemenu toont opties zoals onder andere Stijlen, Enkele berichten, Pagina's, Sidebar en Post meta.](https://kinsta.com/wp-content/uploads/2024/07/command-palette-search.png)
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