Hur man förbereder din webbplats för WordPress Gutenberg

Gutenberg kommer snart till WordPress. Är din hemsida redo? Medan vi fortfarande inte vet exakt vilken form det tar kommer detta nya innehållssystem att läggas till i WordPress-kärnan i framtiden. Låt oss ta en titt på de potentiella effekter som detta kan ha på din webbplats, och sätt som du kan bestämma och fixa, problemområden före tid.

Vad är Gutenberg?

Gutenberg är ett WordPress-projekt som syftar till att ge användarna större flexibilitet vid utformningen av innehållet. I huvudsak syftar projektet till att ersätta den nuvarande redaktören, som oftast utförs som en ordbehandlare, med ett mer visuellt och strukturerat gränssnitt. För närvarande är Gutenberg ett plugin och det ger användarna möjligheten att ändra innehållet på samma sätt som Visual Composer eller andra drag-och-släpp redaktörer gör - om än på ett förenklat och mycket intuitivt sätt.

Om du vill lära dig mer om vad Gutenberg är specifikt, ta en titt på mitt tidigare inlägg "Vad är WordPress Gutenberg?"

Styckena på din webbplats

Gutenberg är ett omfattande företag och kommer troligen att röra ett stort antal slutpunkter inom din webbplats. Det här är de tre områden som vi kommer att skura för problem:

  • Ditt tema: Gutenberg kommer med sin egen uppsättning stilar för innehåll. Är ditt tema kompatibelt? Vad kommer det att se ut med Gutenberg aktiv?

  • Dina pluggar: Det är möjligt att Gutenberg kan interagera med dina andra plugins på oväntade sätt. Vi tittar på vad de kan vara, och vad ska vi göra om några problem som uppstår.

  • Ditt innehåll: Gutenberg kommer att påverka hur ditt innehåll visas. Vi undersöker hur det kan ändra hur dina sidor ser ut, och gå över några möjliga korrigeringar om du har problem.

Ställa in ett testområde

Innan vi börjar, är det en bra idé att skapa ett testområde där du kan experimentera med Gutenberg utan att bryta din levande webbplats. Helst bör du skapa ditt eget testområde eller skapa en lokal kopia av din webbplats. För mer om hur du utför någon av dessa uppgifter, se följande handledning:

Om ingen av dessa är möjliga kan du göra testningen direkt på din webbplats. Observera att det här kan vara riskabelt, eftersom vi aktiverar och inaktiverar ett antal delar av din webbplats. Om du gör testningen bor, var noga med att skapa en säkerhetskopia av din webbplats innan du börjar.

När du väl vet var du ska testa, gå till plugins katalogen och hitta Gutenberg. När det är installerat och aktiverat, läs vidare.

Sätt ditt tema genom sina steg

Nu när du har installerat Gutenberg, låt oss ta en titt på den första delen av din webbplats som kan påverkas: dess tema. Om det redan finns stora problem vid denna punkt, till exempel databasfel eller problem med WordPress admin, hoppa ner till Vad ska man göra när det finns för många problem sektion.

Eftersom Gutenberg interagerar huvudsakligen med innehållet på webbplatsen behöver vi bara testa en smal uppsättning saker - lyckligtvis för oss.

Det första är att Gutenberg kommer med sitt eget stilark och uppsättning stilar. Kontrollera var och en av de olika sidtyper och mallar som används på din webbplats för att se till att de fortfarande visas korrekt. Huvudfokus här kommer att vara element inom huvudinnehållet på dina sidor - särskilt innehåll och bildblock. Om du ser några problem är det troligt att Gutenbergs stilar har företräde framför din webbplats.

För att rätta till det måste du identifiera var problemet kommer ifrån. Vanligtvis kommer det att vara en CSS-väljare som är inriktad på ett HTML-element, eller det kan vara en prioritet i Gutenberg-stilar över dina egna klasser. Oavsett fallet kan du försöka identifiera var felet inträffar. Därefter bestämma varför Gutenberg-stilar överstyrer din, och korrigera din kod så att den får företräde.

Försök att göra några korrigeringar inom ditt eget tema (eller ännu bättre, i ett barntema eller ett specifikt område för CSS i ditt tema), istället för att ändra Gutenberg. Om du ändrar någon av filerna i Gutenberg direkt kommer det sannolikt att skrivas över när plugin uppdateras.

På ett liknande sätt vill du ge ditt administratörsområde en gång över för eventuella stylingproblem. Temaalternativ och andra anpassade sektioner som genereras av ditt tema verkar vara de största synderna hittills. När du har identifierat stylingproblem i dessa områden kan du vanligtvis korrigera dem genom att ändra eller skapa ett barntema och justera CSS där.

Gör dina plugins arbete?

När ditt tema är kvadrerat, är nästa webbplats din plugin. Speciellt hålla koll på alla plugins som innehåller kortnummer som du använder i ditt innehåll (t.ex. Gravity Forms), plugins som påverkar utseendet på ditt innehåll (t.ex. åtkomstpluggar som påverkar textstorlek) och plugins som direkt sätter in element i din sida (t.ex. avancerade anpassade fält).

Titta på kortnummer

För att granska detta område, först samla en lista över eventuella kortkoder som du kan använda, tillsammans med vilka sidor de finns på. Med din lista i hand, besök varje av dessa sidor för att se om de fungerar som avsedda. Om du stöter på problem med styling är det troligt att du upplever samma problem som ovan och behöver justera dina stilar.

Men om du får den fruktade gjorda shortcode-det vill säga att din sida visar [Kortkod] istället för att göra vad det borde - det finns en annan lösning. I det här fallet kan du titta på blocket där kortkoden är och bekräfta att den inte anses vara text (letar efter och tar bort oönskade taggar runt kortnumret). Om problemet fortfarande kvarstår, måste du få allt tillbaka igång om du flyttar kortkoden till en mer lämplig blocktyp.

Innehållsutseende

Problemet härrör från samma problem som vi tidigare har täckt: stilöverstyrningar. Identifiera de element som påverkas och korrigera CSS.

Element Creation

Det slutliga området som vi ska titta på för motstridiga problem gäller elementskapande. Varje plugin som infogar HTML-element i en sida utan att använda kortkoder är misstänkt här, till exempel när PHP drar i anpassade fält från plugin Advanced Custom Fields.

Den vanligaste slip-up med elementskapande kretsar kring block som inte matchar varandra. Eftersom Gutenberg ger sina egna stilar finns det risk att om dina element skapas inuti ett oavsiktligt block, kan de göra felaktigt. Korrigeringen för detta är att din kod lägger till element i blocket där du vill att de ska vara.

Visas ditt innehåll som nödvändigt?

Det här är inte lika brådskande som de andra problemen vi har diskuterat, men det kan finnas några komplikationer med hur innehållet görs. De flesta av dessa problem kommer att vara från mindre stylingändringar eller hur block är organiserade. För att rätta till det måste du leka med blocksystemet tills du får din sida hur du vill ha den.

Vad ska man göra när det finns för många problem

Fick du ett problem som du inte kunde lösa med förslaget i den här artikeln? Var inte panik! Det finns fortfarande en tid innan Gutenberg träffar WordPress Core.

Först registrera vad felet är och vilka steg som ledde till felet. Ju mer information du kan samla, desto bättre. Skicka all denna information vidare till Gutenberg-laget. Med tur kommer de att kunna avgöra problemet och fixa det i en framtida release.

Om du arbetade på en scenplats, så är det här allt du kan göra för nu. Fortsätt att kontrollera frigöringsanvisningarna för att se om ditt problem är löst, eller kanske arbeta med att lösa det själv.

Om du arbetade på din levande webbplats, måste deaktivera Gutenberg sätta allt tillbaka till det normala. Om inte, då är det dags att återgå till den säkerhetskopiering du gjorde!

Lycka till din installation!

Gutenberg har som mål att vara en stor förändring av WordPress-miljön, en som ser ut att förändra innehåll till det bättre. Innan den träffar huvudgrenen, se till att din webbplats fungerar med de nya ändringarna. Om du har andra problem än vad som listas här, bättre lösningar eller korrigeringar för vad som helst i den här artikeln, vänligen lämna en kommentar nedan!