Obs: I nästa ämne du kommer att läsa kommer du att lära dig om: Min guide till WordPress Gutenberg Visual Editor [WITH PICTURES]
Så har du hört talas om Gutenberg, den nya visuella WordPress-redigeraren för den vanliga HTML-redigeraren?
Om inte, kommer du att ha det snart för när version 5.0 WordPress släpps kommer Gutenberg att ersätta den nuvarande editorn.
Gutenberg är mer än bara en estetisk designuppdatering.
Det nuvarande fokuset kan ligga på innehållsskapande, men det slutliga målet är att Gutenberg ska erbjuda fullständig webbplatsanpassning och konkurrera med fantastiska sidbyggare.
Slutligen kommer du att kunna bygga hela din webbplats med hjälp av Gutenberg.
Är Gutenberg bra mot dig?
Det är verkligen spännande tider att vara en WordPress-bloggare.
Den här artikeln kommer att ge dig en mycket enkel Gutenberg-handledning som ger dig några grunder för att komma igång och visa dig vad som är bra och dåligt just nu med den nya redigeraren.
Om du inte kan vänta på att Gutenberg ska blockera provkörningen kan du ladda ner den nu.
Hur man laddar ner Gutenberg
Gå till din instrumentpanel i WordPress och gå sedan till
- Ytterligare
- Välj “Lägg till ny”
- Sök Gutenberg Visual Editor
- Välj “Ladda ner” och aktivera sedan plugin.
Nu har du Gutenberg
Så låt oss sätta ihop en artikel från Gutenbergguiden och visa dig vad du kan och inte kan göra med Gutenberg och förhoppningsvis avslöja några tips och tricks på vägen.
Din Gutenberg-guide för att komma igång – Blockintroduktion
Gutenberg har en väldigt sidbyggande känsla när du först börjar skapa innehåll.
Varje objekt du lägger till på en sida eller ett inlägg kallas nu “Blockera”
Gutenberg-block låter dig skapa mer komplexa layouter än vad som är tillåtet i dagens WordPress-redigeringsmiljö
Du kan ha block för att:
- Dokumentera
- Bild
- Video
- Widgets (ja, du kan lägga till samma sidofältswidget på sidor och inlägg)
- Tabell
- etc
Detta är vad du ser när du startar ett nytt inlägg eller sida.
Den visuella/HTML-redigerare vi alla är bekanta med nu gynnar ett mycket minimalistiskt gränssnitt.
Så låt oss börja med min enkla Gutenberg-tutorial
Jag skapade den här fullständiga handledningen du läser med Gutenberg, och som nämnts ovan är det första gången jag använder den nya redigeringsmiljön.
Då kommer du genast att upptäcka med mig vad jag gillar med Gutenberg-block och vad jag hatar. Jag kommer också att förmedla alla tips och tricks du upptäcker på vägen, så se till att följa med.
Och jag kommer att uppdatera det här inlägget också, så se till att bokmärka eller länka till oss så att du enkelt kan hitta tillbaka.
Låt oss börja
Så när du presenteras med titelskärmen ovan, lägg gärna till din titel för ditt inlägg,
Jag kommer att använda den tillfälliga titeln “Gutenberg Komma igång”
Lägg sedan till ditt första intro till din artikel i ett textblock som visas på skärmdumpen nedan.
Lägg till bilder i Gutenberg
Efter att ha skrivit introt ville jag lägga till en bild till en bild, i det här fallet skärmdumpen du ser ovan.
Det finns tre sätt att lägga till en bild.
- Du kan lägga till dina bilder via verktygsfältet genom att klicka på plusknappen + och sedan välja bildblocket.
- Du kan också lägga till bilder med hjälp av genvägsknappen som finns under din textruta.
- Och självklart kan du lägga till källkoden. Genom att ändra blockredigeraren till kod.
När du har lagt till din bild kan du klicka på den för att visa justeringsalternativen.
Du kan justera vänster, flytta bilden till mitten eller till höger.
Det finns också möjlighet att redigera dina bilder genom mediebiblioteket, och det är här problemen med Gutenberg börjar.
Såvitt jag vet, när du redigerar en bild genom mediebiblioteket, redigerar du bilden så som den visas på bifogad sida eller med andra ord där bilden är lagrad. (Rätta mig om jag har fel i detta)
Bifogade sidor är en väldigt tunn sida med innehåll, det är i princip bara bilder och inget annat, och av SEO-skäl är bifogade sidor dåliga för SEO när Google tillkännager dem.
SEO Yoast hade nyligen ett problem med bifogade filer Det visade sig vara ett stort SEO-problem för vissa användare.
När jag arbetar med att skapa en artikel med Gutenberg, kan jag fortfarande inte hitta ett sätt att lägga till alt-textattribut eller en bildrubrik på annat sätt än att gå tillbaka till källkoden för att lägga till den nödvändiga HTML-koden eller gå tillbaka till ordboken för lagerredigeraren.
Våra vänner på WPBeginner förklarar skillnaden mellan Image Alt Text och Image Title med en utmärkt artikel med titeln:
Lägg till beskrivning och alt-tagg är en bildredigeringsfunktion som är tillgänglig vid knappklick i den inbyggda bildredigeraren.
Detta är inte goda nyheter för SEO-bildoptimering.
Det finns för närvarande inte heller något enkelt sätt du kan hitta för att bifoga en länk till en bild, vilket gör den klickbar.
Om du till exempel vill lägga till en banner måste du lägga till bannern som ett bildblock enligt ovan, gå sedan tillbaka till källkoden och lägg till URL:en som HTML-kod.
Lägg till citat och länkar
Som du kan se ovan länkade jag till en resurs (WPBeginner) i ett blockcitat.
Citatblock är bra för att bryta upp stora textblock som gör en artikel lättare att läsa.
De ger ett bra visuellt element för artiklar.
Så här gjorde jag:
- Klicka på +-knappen för att öppna blockområdet.
- Välj ett blockcitat
- Lägg till din citattext
- Lägg till en länk om det behövs
Du kommer att märka om du är en observatör att exemplet med blockquote-skärmdump ovan skiljer sig från det faktiska blockquote-citatet som visas i det här inlägget.
Det sista citatet har en ankartext med titeln h3 bifogad av SEO-skäl.
För att lägga till h3-taggen måste du gå tillbaka till den råa källkoden och applicera h3-taggen på blockcitatets ankartext.
Som du kan se i skärmdumpen ovan finns det en knapp märkt genväg H (titel), men om du klickar på denna öppnas ett nytt block för att tillämpa titeln.
Du kan för närvarande inte använda en titel inom ett budgetblock.
Om du skapar en textblogg kan du inte heller lägga till en titel i mitten av textblocket, du måste skapa ett nytt textblock så att du kan lägga till titeln i början av det nya blocket och sedan fortsätta skriva din artikel .
Alla länkar du lägger till är som standard stretchlänkar och det finns för närvarande inget sätt att hindra dem från att fortsätta utan att lägga till attributet don not track som kod.
Du får möjlighet att öppna en länk i ett nytt fönster genom att lägga till en länk.
Lägger till inbäddade innehållsblock till Gutenberg
För att lägga till inbäddat innehåll i inlägget, klicka på blockområdet och scrolla ner till Bädda in. Då kommer du att se blockskärmen nedan
Klicka på den typ av inlägg du vill använda. En länkruta finns för att lägga till din kod.
Jag valde YouTube-alternativet eftersom det är mest det du kommer att använda när du skapar innehåll bara för att visa dig processen att lägga till videor.
Lägg bara till webbadressen till din YouTube-video och du kommer att ha videofunktionalitet i ditt inlägg.
Så vad tycker vi om WordPress Gutenberg?
Gutenberg kommer att skrämma bort några bloggare vid dagens ljus. Men ju mer jag använder blocksystemet, desto mer gillar jag det.
Jag använde nyligen innehållshanteringssajten Wakelet för att skapa väldigt enkla blogginlägg för att säkerhetskopiera min Infobunny-sajt och det du märker när du använder Wakelet är att du kan skapa en blogg på ett väldigt liknande sätt.sidan du skapar med Gutenberg-block.
Med Wakelet Du kan lägga till text, video, auktoritetslänkar för att betygsätta ditt innehåll, bilder och till och med PDF-filer.
Lägg bara till allt som individuella inlägg till Wakelet och ordna sedan om efter behov för att skapa ditt kompletta inlägg och det är i princip hur Guttenberg Lock fungerar.
Här är ett exempel från en av mina Wakelet-bloggar: Hur viktiga är följare på sociala medier?
Om du är van att använda sidbyggare När du skapar inlägg och sidor bör du inte ha några problem med att använda Gutenberg.
Gutenberg blir inte riktigt en sidbyggare, eftersom den inte kan dra och släppa block tillsammans med andra saknade funktioner som professionella sidbyggare erbjuder.
Ärligt talat gillar jag den gamla HTML-redigeraren, men det är för att jag är van vid den.
Förhoppningsvis kommer vi att ges möjligheten att klicka mellan Gutenberg och den nuvarande HTML-redigeraren WYSIWYG, och att kunna komma åt båda systemen kommer att ge webbansvariga det bästa av två världar.
Genom att läsa om Gutenberg förstår jag att den vanliga redaktören kommer att finnas tillgänglig som ett tillägg.
Denna Gutenberg-handledning skapades för att ge mig en uppfattning om hur Gutenberg fungerar.
Jag vill göra mig redo för den oundvikliga lanseringen av det nya blocksystemet när WordPress 5.0 landar.
Och så här lär du dig ett nytt system genom bara första hoppet.
Gutenberg är designad för att göra innehållsskapande enkelt.
Och jag är säker på att det kommer att vara för enkla innehållsskapare. Men för de som vill göra lite mer kommer det att finnas en större inlärningskurva och det kommer säkert att finnas några lösningar för deras SEO-älskare.
SEO-bildoptimering är för närvarande ett problem.
Förhoppningsvis blir det mycket lättare när Gutenberg kommer med bildoptimeringsprocessen.
Och om Gutenbergs utvecklarteam inte tillhandahåller en bättre lösning, är jag säker på att det inte kommer att finnas några tredjepartsutvecklare som är villiga att tillhandahålla några riktigt coola blockverktygslösningar.
En stor fråga jag har är “Är Gutenbergs sidor och inlägg kompatibla med AMP – Accelerated Mobile Pages?
Eller mer komplex funktionalitet kommer att läggas till till förmån för hastighet.
