Een korte geschiedenis van ontwerpen en layouts maken binnen WordPress<\/h2>\n
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<\/a>.<\/p>\n 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<\/a> nog steeds verkrijgen omdat het een commerci\u00eble tool is:<\/p>\n 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<\/a> van StudioPress is er nog steeds, maar er waren nog een paar andere, zoals Thesis<\/a>.<\/p>\n 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<\/a>, ondersteuning van templates<\/a> en meer.<\/p>\n Dit was echter nog steeds niet erg toegankelijk voor een doorsnee gebruiker en daarom werden page builder plugins<\/a> 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<\/a> en Beaver Builder<\/a> voeren nog steeds de boventoon, hoewel Elementor<\/a> ook een kolos is:<\/p>\n Je zult de volgende paragraaf willen lezen om te begrijpen waarom we alternatieven hebben voor de TinyMCE Editor en een page builder plugin.<\/p>\n WordPress is nummer \u00e9\u00e9n<\/a> 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.<\/p>\n Squarespace<\/a>, 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.<\/p>\n Dit was een grote zorg<\/a> 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.<\/p>\n 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\u00e8re waar het WordPress team een oplossing voor heeft.<\/p>\n WordPress Full Site Editing (Full Site Editing) is de nieuwste manier om je site te ontwikkelen<\/a>. 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\u00eftieve interface.<\/p>\n Dit is nu dus de ‘offici\u00eble’ manier om je site te bewerken. Het brengt alle aspecten van je site onder zijn vleugels:<\/p>\n Gezien de evolutie van de editor verdwijnt er ook wat functionaliteit. Je hebt bijvoorbeeld geen widgetgebieden<\/a> meer nodig, hoewel WordPress ze nog wel gebruikt als oude functionaliteit voor niet-block thema’s.<\/p>\n 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.<\/p>\n 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.<\/p>\n Het is moeilijk te begrijpen waarom het zo lang heeft geduurd om ons te laten werken aan templatestyles<\/a> 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.<\/p>\n 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<\/a> van het ene scherm naar het andere.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n WordPress webontwikkelaars zouden bijvoorbeeld beweren dat het een goed idee is om het ontwerp van je thema<\/a> 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.<\/p>\n 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:<\/p>\n 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<\/a> die de Block Editor mist. Divi, Elementor, Beaver Builder, Brizy<\/a> en nog veel meer hebben geweldige features en maken diepere aanpassingen en ontwikkeling mogelijk:<\/p>\n 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<\/a>.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n Het overzicht van hoe FSE werkt is eenvoudig:<\/p>\n 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.<\/p>\n Gelukkig vereist het kiezen van een blokthema<\/a> 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:<\/p>\n 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<\/a>:<\/p>\n De ’traditionele’ of ‘klassieke’ versie van het thema gebruikt de oude Customizer van de Appearance <\/b>scherm. Deze versie bevat de Site Editor volledig en biedt betere subjectieve prestaties.<\/p>\n Er zijn nog andere Block thema’s om naar te kijken, zoals Portfolio WP<\/a> en Mugistore<\/a>. Maar Ollie<\/a> is misschien wel de beste van het stel:<\/p>\n 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.<\/p>\n Zelfs het standaardthema Twenty Twenty-Four<\/a> is nu een haalbare keuze voor je site:<\/p>\n 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.<\/p>\n Om de Site Editor te vinden, navigeer je naar Appearance > Editor <\/strong>binnen WordPress:<\/p>\n 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.<\/p>\n 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<\/strong>:<\/p>\n Nu dit achter de rug is, gaan we FSE gebruiken.<\/p>\n Tijd om elke pagina van de site editor bekijken in de volgorde waarin het verschijnt in de navigatie.<\/p>\n De navigatiepagina vervangt het scherm Appearance > Menus<\/strong>. Zodra je deze opent, zie je een lijst met berichten en pagina’s op je site:<\/p>\n 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<\/strong>. Dit geeft je opties om het menu te bewerken, de naam te veranderen, te verwijderen of te dupliceren:<\/p>\n Als je op Edit <\/b>klikt, wordt een versie van de Block Editor geopend die je menu als Navigation blok bevat:<\/p>\n 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:<\/p>\n 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:<\/p>\n 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 <\/strong>pictogram en selecteer je je bericht of pagina:<\/p>\n 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<\/strong>\u00a0gebruiken op de navigatiepagina.<\/p>\n Met de Styles<\/strong> pagina <\/b>bepaal je het uiterlijk van je site op een globaal niveau. De zijbalk biedt een paar verschillende paletten en typografie-instellingen voor verschillende ontwerpen:<\/p>\n Als je op een van deze paletten klikt, zie je het ontwerp op je site. Er staat echter een ‘potlood’<\/strong> pictogram bovenaan de zijbalk om verdere wijzigingen aan te brengen in de Site Editor:<\/p>\n 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:<\/p>\n Als je dieper in de menu’s gaat, krijg je vaak meer opties om mee te spelen, zoals spati\u00ebring, kleuren en meer. In het gedeelte Layout <\/strong>kun je de afmetingen van je hoofdinhoudsgebied aanpassen, samen met opvulling en blokafstand:<\/p>\n 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:<\/p>\n 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.<\/p>\n Voordat je naar het volgende FSE scherm gaat, moet je het theme.json<\/strong> bestand<\/a> kennen. Dit is in wezen de ontwikkelaarsversie<\/a> van de Styles schermen.<\/p>\n Hiermee kun je de standaard stijlen voor je site en de blokken defini\u00ebren, en je gebruikt het als een configuratiebestand. Bovendien maakt het gebruik van het JSON format<\/a>, dus het biedt een minder code-heavy ervaring dan in het verleden.<\/p>\n Uiteindelijk moet je weten dat wat je ook in theme.json<\/strong> kunt doen, je ook in de Site Editor kunt doen.<\/p>\n De Pages<\/strong> 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<\/strong><\/strong><\/strong>, Scheduled<\/strong><\/strong><\/strong>, Drafts <\/strong><\/strong><\/strong>en andere:<\/p>\n Elke pagina heeft extra acties, zoals Edit<\/strong>, View<\/strong><\/strong>, Rename <\/strong>en Delete<\/strong><\/strong><\/strong><\/strong>. Je kunt een pagina ook bewerken met het ‘potlood’ pictogram. Bovenaan de lijst vind je de optie Add New Page <\/strong><\/strong><\/strong><\/strong><\/strong>knop, die een nieuwe pagina toevoegt.<\/p>\n 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<\/a> 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:<\/p>\n E\u00e9n daarvan – het Query Loop blok<\/a> – 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.<\/p>\n Templates<\/a> 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\u00ebren. Normaal gesproken is er kennis met PHP voor nodig, maar je kunt ze allemaal aanpassen (en nieuwe maken) zonder code binnen de Site Editor.<\/p>\n 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.<\/p>\n Om een nieuwe template te maken, klik je op de knop Add New Template<\/strong>:<\/p>\n 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.<\/p>\n 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:<\/p>\n Het maken ervan<\/a> is eenvoudig, hoewel je zonder de Site Editor deze patterns zou moeten registreren met PHP. Nu kun je echter de pagina Patterns <\/strong>gebruiken:<\/p>\n 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.<\/p>\n De knop Add New Pattern <\/strong>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.<\/p>\n 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.<\/p>\n 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 <\/strong>in de bovenste werkbalk. Kies in het vervolgkeuzemenu Export:<\/strong><\/strong><\/p>\n Dit geeft je een ZIP bestand van je thema en als je het moet importeren<\/a>, kun je dat doen met de WordPress Importer<\/a> plugin.<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/classic-editor_1.png\")
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/tinymce-editor.png\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/genesis-framework_1.png\")
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/elementor-page-builder_1.png\")
De Block Editor en WordPress Full Site Editing<\/h2>\n
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/wix-editor_1.png\")
Wat WordPress Full Site Editing (FSE) is<\/h3>\n
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/full-site-editing.png\")
\n
Waarom FSE in WordPress zit<\/h2>\n
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/templates-pages.png\")
De alternatieven voor FSE<\/h3>\n
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/theme-development.png\")
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/block-editor-1.png\")
![\"The](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/page-builder-screen.png\")
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/classicpress-homepage.png\")
Hoe WordPress Full Site Editing werkt<\/h2>\n
\n
Een geschikt FSE thema kiezen<\/h3>\n
\n
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/neve-fse.png\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/ollie-theme.png\")
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/twenty-twenty-four_1.png\")
Rondleiding door de hoofdinterface van FSE<\/h3>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/editor-link.png\")
![\"Het](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/back-arrow.png\"){kind=icon}
De 5 pijlers van WordPress Full Site Editing<\/h2>\n
1. Navigation<\/h3>\n
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/navigation-screen.png\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/nav-more-items.png\")
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/nav-block-editor.png\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/nav-sidebar.png\")
![\"The](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/page-link-block.png\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/add-page-nav.png\")
2. Styles<\/h3>\n
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/styles-screen.png\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/styles-editor.png\")
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/typography-settings.png\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/layout-tab.png\")
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/style-book.png\")
Het bestand theme.json gebruiken met WordPress voor Full Site Editing<\/h4>\n
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/theme-json.png\")
3. Pages<\/h3>\n
![\"Het](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/pages-screen.png\")
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/theme-blocks.png\")
4. Templates<\/h3>\n
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/add-template.png\")
5. Patterns<\/h3>\n
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/block-pattern.png\")
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/patterns-page.png\")
Tips om WordPress Full Site Editing te gebruiken om ontwerpen te maken<\/h2>\n
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/options-export.png\")
![\"Het](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/command-palette-search.png\")