{"id":23925,"date":"2020-08-18T10:28:28","date_gmt":"2020-08-18T08:28:28","guid":{"rendered":"https:\/\/www.strato.nl\/blog\/?p=23925"},"modified":"2022-12-27T14:43:08","modified_gmt":"2022-12-27T13:43:08","slug":"gutenberg-tweaken-live-preview-in-de-wordpress-backend","status":"publish","type":"post","link":"https:\/\/www.strato.nl\/blog\/gutenberg-tweaken-live-preview-in-de-wordpress-backend\/","title":{"rendered":"Gutenberg tweaken: live-preview in de WordPress backend"},"content":{"rendered":"\n

Als jouw blog een eigen vormgeving heeft, is de opmaak van een artikel in de WordPress editor nogal verschillend van de opmaak die je lezers op je blog zien. Deze workshop laat zien je hoe je dit aanpast. Je kunt de nieuwe Gutenberg-editor namelijk instellen om de weergave te laten aansluiten op het design van je blog.<\/strong><\/p>\n\n\n\n

Met WordPress kun je eigen\nCSS-stylesheets voor de backend defini\u00ebren, de zogenaamde \u2018editor styles\u2019. Met\neen paar trucjes kun je lettertypes, kleuren, kolombreedtes en dergelijke overzetten\nvan de frontend naar de backend.<\/p>\n\n\n\n

\"Gutenberg
Ter vergelijking (van links): de oorspronkelijke backend, aangepast en in frontend-design. <\/em><\/figcaption><\/figure>\n\n\n\n

Betaalde premium-thema’s hebben vaak “editor-styles” ge\u00efntegreerd. Gebruik je zo\u2019n thema, dan heb je deze workshop waarschijnlijk niet nodig of kun je in ieder geval de eerste stappen voor het instellen van de editor-styles overslaan.<\/p>\n\n\n\n

Als je thema overweg kan\nmet editor-styles, maak je de nodige wijzigingen rechtstreeks in het\nCSS-bestand voor de editor in de backend. Hoe dit werkt, verschilt per thema.\nMeestal wordt het bestand opgeslagen in de hoofdmap van het thema of in een\nsubdirectory genaamd css<\/em> of css\/admin<\/em> en heeft het een naam zoals editor-style.css<\/em> of custom-editor-style.css<\/em>. Raadpleeg in geval van twijfel de documentatie voor je thema.<\/p>\n\n\n\n

Heb je de juiste\nbestanden gevonden? Dan kun je direct verder gaan met het hoofdstuk \u2018Backend-opmaak\naanpassen\u2019 en de hieronder beschreven voorbereidingen overslaan.<\/p>\n\n\n\n

Voorbereidingen<\/h2>\n\n\n\n

Deze workshop gaat ervan\nuit dat je met de nieuwe Gutenberg-editor werkt en dat je thema niet al een\nconfiguratie voor editor-styles heeft.<\/p>\n\n\n\n

Voordat je wijzigingen aanbrengt in je thema, moet je een child-theme maken<\/a>, als dat nog niet bestaat. Op deze manier blijven de veranderingen bewaard bij een volgende theme-update.<\/p>\n\n\n\n

Editor-styles in WordPress aanmaken<\/h2>\n\n\n\n

In het bestand functions.php<\/em> van je child-thema voegt je de volgende regels toe:<\/p>\n\n\n\n

\/* Editor CSS *\/\n add_theme_support('editor-styles');\n add_editor_style( 'mijn_editor-style.css' ).<\/code><\/pre>\n\n\n\n
Dit integreert de editor-styles in het WordPress systeem. In de hoofddirectory van je child-thema, waar je de style.css kunt<\/em> vinden, maak je een nieuw bestand aan met de naam mijn-editor-style.css.<\/em> Voeg nu alle CSS-instructies toe aan dit bestand, die gebruikt moeten worden in de artikel-editor.<\/p>\n\n\n\n
\nOm te testen of alles werkt, voer je bijvoorbeeld dit hier in:\n\n<\/p>\n\n\n\n
p { color: red; }<\/code><\/pre>\n\n\n\n
Als de doorlopende tekst van een artikel in de Gutenberg-editor nu in het rood wordt weergegeven, heb je alles goed gedaan.<\/p>\n\n\n\n
\"Gutenberg
  De test is geslaagd als de tekst in het rood wordt weergegeven.  <\/figcaption><\/figure>\n\n\n\n
Let op: om deze wijziging\nin de Gutenberg-editor te zien, moet je de pagina volledig herladen in je browser.\nAlleen het artikel opslaan werkt niet. Je kunt de herlaadknop van de browser gebruiken\nof onder Windows de toetsencombinatie Shift – F5<\/em>.<\/p>\n\n\n\n
Nu kun je naar de\neigenlijke aanpassingen gaan. Verwijder eerst de testinvoer die je daarnet hebt\ngemaakt – tenzij je de tekst echt in het rood wilt zien.<\/p>\n\n\n\n
Editor-opmaak aanpassen<\/h2>\n\n\n\n
Het zou natuurlijk leuk zijn als je alleen de opmaakinstructies van style.css <\/em>hoeft te kopi\u00ebren, die het ontwerp voor de frontend bepalen. Helaas is dit niet direct mogelijk. De Gutenberg-editor gebruikt namelijk andere CSS-klassen dan de frontend.<\/p>\n\n\n\n
In plaats daarvan gaan we\nvoor elk van de formaten in drie stappen te werk:<\/p>\n\n\n\n
    \n
  1. Bepaal de juiste opmaak in de frontend voor de elementen die je wilt zien in de backend – met name koppen en alineaopmaak.<\/li>\n\n\n\n
  2. Zoek de corresponderende klassennamen in de backend.<\/li>\n\n\n\n
  3. Plaats de opmaakinstructie onder 1. samen met de klassennamen die je in 2. hebt ingesteld in het style-bestand van de editor (in ons voorbeeld: mijn-editor-style.css)<\/em><\/li>\n<\/ol>\n\n\n\n
    1. De opmaak bepalen<\/h2>\n\n\n\n
    Om de vereiste opmaakinstructies te bepalen, gebruiken we de inspectiefunctie van de browser. Google Chrome is hier erg gemakkelijk te gebruiken, maar Firefox werkt op een vergelijkbare manier. Je vindt de inspector…<\/p>\n\n\n\n