{"id":7,"date":"2024-11-08T21:58:28","date_gmt":"2024-11-08T21:58:28","guid":{"rendered":"https:\/\/wpskool.nl\/?page_id=7"},"modified":"2024-11-09T12:49:05","modified_gmt":"2024-11-09T12:49:05","slug":"full-site-editing","status":"publish","type":"page","link":"https:\/\/wpskool.nl\/?page_id=7","title":{"rendered":"Full Site Editing"},"content":{"rendered":"\n

Sinds enkele jaren biedt WordPress met de Gutenberg-editor een krachtige tool om de opmaak van pagina’s en berichten te beheren met zogenaamde blokken. Blokken zijn losse elementen zoals kolommen, tekstgebieden en afbeeldingen, waarmee je de inhoud en layout van elk bericht of pagina flexibel kunt aanpassen.<\/p>\n\n\n\n

Onlangs heeft WordPress deze functionaliteit uitgebreid met Full Site Editing (FSE). Met FSE, ook wel ‘Site-editor’ genoemd, kun je complete website-templates maken voor een uniforme vormgeving van je site, van pagina’s en berichten tot aan de homepage en archiefpagina’s. In een template bepaal je de plaatsing van onderdelen zoals de header met het menu, de titel, de content, en de footer. Ook kun je elementen zoals social media iconen of een lijst van recente berichten opnemen.<\/p>\n\n\n\n

Deze templates zijn niet alleen toe te passen op standaardpagina’s, maar ook op maat gemaakte berichttypes (custom posts). Hiermee kun je dus voor elk type webpagina een specifiek template ontwerpen. Dankzij FSE en blokken kun je, zonder enige programmeerkennis, zelf bepalen hoe je website eruitziet. Bovendien helpt het gebruik van templates om de inhoud en vormgeving van je site beter te scheiden, wat bijdraagt aan een strakker en professioneler webontwerp.<\/p>\n\n\n\n

Speciale thema’s voor FSE<\/h2>\n\n\n\n

Om FSE te kunnen gebruiken voor het maken van je eigen templates, moet je een thema installeren dat daarvoor geschikt is. Want WordPress heeft nu twee soorten thema’s: voor klassieke thema’s en voor de Site-editor.<\/p>\n\n\n\n

Een FSE thema heeft vaak al instellingen meegekregen zoals lettertypen, kleuren, patronen en templates die je kunt aanpassen naar eigen wens. Met een passend FSE thema kun je zo een snelle start maken. Je kunt echter ook met een leeg thema beginnen en alles zelf opbouwen en instellen. Als je aanpassingen doet aan je thema, dan worden die opgeslagen in de database.<\/p>\n\n\n\n

WordPress levert nu bij een nieuwe installatie altijd een paar eigen FSE thema’s mee. Via Admin > Weergave >Thema’s > Nieuw thema toevoegen<\/em> kun je andere thema’s downloaden en installeren. Gebruik het eigenschapfilter ‘Site-editor’ om andere FSE thema’s te vinden.<\/p>\n\n\n\n

Structuur FSE thema<\/h2>\n\n\n\n

Een thema dat geschikt is voor de Site-editor moet minimaal bestaan uit een style.css en thema.json bestand en de directory ’templates’ met een leeg index.html bestand. Deze bestanden zijn geplaatst in een directory met de slug van het thema (naam zonder spaties). Van deze directory wordt een zip-bestand gemaakt, dat daarna ge\u00efnstalleerd kan worden op elke website.<\/p>\n\n\n\n

thema-slug\/          (directory voor thema)\n   style.css         (bestand met naam thema)\n   theme.json        (bestand met instellingen)\n   templates\/        (directory voor templates)\n      index.html     (leeg template voor alle pagina's)  <\/code><\/pre>\n\n\n\n
style.css<\/h3>\n\n\n\n
\/*\nTheme Name: Themanaam\nAuthor: Auteursnaam\nDescription: Korte beschrijving\nVersion: 0.0 of 0.0.0\nText Domain: De string voor vertalingen: de thema-slug\n*\/<\/code><\/pre>\n\n\n\n
theme.json<\/h3>\n\n\n\n
{\n\t\"settings\": {\n\t\t\"appearanceTools\": true,\n\t\t\"layout\": {\n\t\t\t\"contentSize\": \"700px\",\n\t\t\t\"wideSize\": \"1100px\"\n\t\t}\n\t},\n\t\"version\": 3,\n\t\"$schema\": \"https:\/\/schemas.wp.org\/wp\/6.7\/theme.json\"\n}<\/code><\/pre>\n\n\n\n
In het theme.json bestand zie je t\u00f3ch twee instellingen staan:<\/p>\n\n\n\n
    \n
  • appearanceTools<\/strong>: de instelling ’true’ zorgt ervoor dat je in de Site-editor de standaard aanpassingen kunt doen aan kleuren, marges en dergelijke.<\/li>\n\n\n\n
  • layout<\/strong>: met deze instelling kun je de breedte van een webpagina en de inhoud op die pagina vaststellen. En je kunt hem ook wijzigen in de Site-editor. <\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Sinds enkele jaren biedt WordPress met de Gutenberg-editor een krachtige tool om de opmaak van pagina’s en berichten te beheren met zogenaamde blokken. Blokken zijn losse elementen zoals kolommen, tekstgebieden en afbeeldingen, waarmee je de inhoud en layout van elk bericht of pagina flexibel kunt aanpassen. Onlangs heeft WordPress deze functionaliteit uitgebreid met Full Site […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpskool.nl\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpskool.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpskool.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpskool.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpskool.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":14,"href":"https:\/\/wpskool.nl\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/wpskool.nl\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/wpskool.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}