Utvecklarguide: Använda WordPress Gutenberg för startsida och målsidor

I det här inlägget kommer vi att titta på hur man använder Gutenberg-redigeraren för att skapa snygga och moderna framsidor eller målsidor. Vi kommer särskilt titta på hur du som utvecklare kan justera din temakod för att stödja detta. Den här guiden är perfekt för dig som vill anpassa ett äldre tema för att stödja Gutenberg, eller vill lära dig att utveckla nya teman optimerade för Gutenberg.

När WordPress introducerade den nya Gutenberg-redigeraren i WordPress 5.0 (släpptes runt december 2018) gjorde det oftast användningen av en separat sidbyggarplugin onödig. Gutenberg-redaktören ger WordPress-författaren mycket flexibilitet och möjlighet att skapa rikt innehåll och design som inte var lätt förut – om inte temat eller ett plugin tillhandahöll funktionaliteten för dem med t.ex. kortkoder.

Du får mycket styling för Gutenberg-block ur lådan i WordPress, men med lite arbete i ditt tema och kunskap om blocken kan du lägga till så mycket mer till Gutenberg-upplevelsen. Låt oss ta en titt på hur!

Aktiverar breda och fullbreddsblock

De flesta block låter dig välja blockjusteringar. När du arbetar i Gutenberg i ett tema som inte utvecklats för Gutenberg får du valet mellan "Align Left, "Align Center" och "Align Right".

Men visste du att det faktiskt finns två till? De andra två, "Wide Width" och "Full Width" är perfekta för att göra en förstasida eller landningssida. Vi kommer att titta närmare på hur du optimerar din temalayout och design för att fullt ut stödja breda och fullbreddsblock senare. Först måste du berätta för WordPress att lägga till stöd för dessa två blockanpassningar i ditt tema.

I en funktion kopplad till after_setup_themeringer du helt enkelt add_theme_support('align-wide'). Du har förmodligen redan en "setup"-funktion i ditt tema, eller om inte – lägg till detta i ditt tema functions.php:

add_action('after_setup_theme', function() {
    add_theme_support('align-wide');
});

Med denna kod aktiv i ditt tema bör du nu få totalt fem alternativ för blockjusteringar. För vissa block, till exempel Kolumner, får du bara de två nya.

Det finns vissa blocktyper där du kan ställa in blockjusteringar – oftast är det sådana som stöder kapslade block, dvs. ett block som låter dig lägga till block inuti. Sådana populära block är Cover, Columns, Image, inbäddningsblock och så vidare. Omslagsblocket är ett bra block för att bygga framsidor eller landningssidor, som vi kommer att se i det här inlägget.

Använda täckblocket

Omslagsblocket är definitivt det bästa blocket när du vill bygga en förstasida eller landningssida uppdelad i sektioner. Du kan lägga till vilken typ av block som helst och hur många block du vill inuti ett täckblock. Med ett täckblock kan du ställa in en bakgrundsfärg, en bakgrundsbild eller en bakgrundsbild med en färgöverlagring.

I kombination med möjligheten att ställa in blockets justering till bred eller full bredd (som vi gjorde ovan), är Cover blocket ett kraftfullt verktyg. Du kan skapa en sida där allt innehåll finns i täckblockssektioner med full bredd med var sin bakgrundsfärg eller bakgrundsbild. Med rätt stil och layout i ditt tema har du en fullskalig modern förstasidesbyggare.

I WordPress 5.3 kom en viktig förbättring för Cover-blocket: Ett inre HTML-omslag. Detta innebär att Cover-blocket har ett HTML-element för själva sektionen – med sin bakgrundsfärg eller bakgrundsbild, och sedan ett annat HTML-element där allt innehåll finns. Kombinera detta med en blockjustering i full bredd: stil det yttre elementet (med bakgrundsfärgen eller bilden) så att det blir helt i full bredd och stil sedan det inre HTML-elementet med innehållet så att det passar i behållaren för ditt tema.

Anta till exempel att ditt tema har en behållare med maxbredd på 1200px. Du har förmodligen redan en specifik HTML-klass som är utformad med maxbredd, vilket säkerställer att ditt innehåll inte bara blåser full bredd oavsett skärmstorlek. Lägg till din maxbreddsstil till omslagets inre HTML; klassnamn wp-block-cover__inner-container. Som ett exempel:

.wp-block-cover-image.alignfull .wp-block-cover__inner-container, 
.wp-block-cover.alignfull .wp-block-cover__inner-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
}

I CSS-koden ovan riktar jag mig mot två Cover-förälderklasser. Den överordnade Cover-blockklassen ändras beroende på om du väljer en bakgrundsbild eller inte. Omslagsblock med en bakgrundsbild får klassen " wp-block-cover-image" och omslagsblock med bakgrundsfärg får klassen " wp-block-cover". Dessutom riktar jag också in blockjusteringen "Full Width" med klassen " alignfull". Blockjusteringen "Wide Width" får klassen " alignwide". Lägg till CSS för att rikta in den här blockanpassningen också – beroende på vad du vill göra.

Om du har börjat leka med detta kan du ha stött på problem med den allmänna layouten i temat. Ditt tema tvingar förmodligen dina täckblock i full bredd att inte gå i full bredd alls. Låt oss titta på detta härnäst.

Temalayout och stil i full bredd

Hittills har vi lagt till stöd för breda och fullbreddsblock och lärt oss hur man använder och optimerar Cover-blocket för att fungera som förstasida eller målsidesavsnitt. Men i de flesta teman kan din HTML och layout hindra ditt inläggsinnehåll från att bli fullbredd.

Ditt tema har förmodligen en höger sidofält i enstaka inlägg eller sidvy. Det finns förmodligen ytterligare HTML-omslag, inklusive ett containerelement med maxbredd, som förhindrar att dina fullbreddsblock faktiskt blir fullbredd. Dina omslag har förmodligen också en hel del marginaler eller stoppning som återigen hindrar blocken i full bredd att helt vidröra kanterna på skärmen. Men du måste få enstaka inlägg eller sida att se bra ut för inlägg där användaren inte också använder Cover-block. Du måste tänka på dina omslag när du utvecklar för Gutenberg med stöd för breda och fullbreddsblock. Allt beror på ditt temas design, HTML och stil – men låt oss titta på några idéer för att lösa detta.

En bra lösning skulle vara att lägga till inläggsalternativ; anpassade metainställningar för inlägg och sidor som påverkar layouten på den sidan. Du kan göra en inställning för att dölja sidofältet eller för att tvinga ditt inläggsinnehåll att bli helt i full bredd. Skapa inläggsinställningar manuellt själv genom att lägga till metaboxar, eller använd avancerade anpassade fält för att göra processen enklare. Och sedan i ditt tema hämtar du postinställningarna och hanterar HTML-utmatningen på motsvarande sätt.

Andra bra inläggsalternativ är att dölja sidtiteln och/eller dölja den utvalda bilden. Detta gör att du kan skapa innehåll normalt, men för specifika sidor kan du enkelt skapa en målsida helt med täckblock i full bredd. Genom att dölja standardsidans rubrik kan du skapa en snyggare rubrik eller en uppmaningssektion för att fungera som sidrubriken istället.

Skapa blockstilar

Det finns en föga känd funktion i WordPress Gutenberg; block kan ha olika stilar. Du kan se blockstilar i aktion med Quote-blocket. Lägg till blocket i din editor och ta en titt på Inspektören (höger sidofält). Du hittar ämnet "Stilar" och två alternativ mellan olika stilar.

Skapa anpassade stilar som gör det enklare att bygga framsida och målsidor. Jag föreslår åtminstone att du lägger till anpassade blockstilar till rubrikblocket, så att du kan skapa anpassade stilar utan att avbryta rubriker för vanliga inlägg. Gör en blockstil för avsnittstitlar med extra stort teckensnitt och extra utfyllnad.

När du försöker skapa framsidor, notera vad du måste anpassa upprepade gånger – det här kan passa bra för en blockstil.

Att lägga till anpassade blockstilar är faktiskt väldigt enkelt och kräver inga Javascript-kunskaper. Jag har en separat handledning om hur du gör detta om du vill lära dig mer om detta.

PS: Om du inte ser blockstilar kan ditt tema sakna stöd för detta. Processen är densamma som vi gjorde för bred- och fullbreddsblockjusteringar; i kroken after_setup_themelägger du till add_theme_support('wp-block-styles'):

add_action('after_setup_theme', function() {
    add_theme_support('wp-block-styles');
});

Använda temafärger som färgpalett

Om du har lekt med Gutenberg har du förmodligen märkt att Gutenberg erbjuder dig en viss uppsättning färger för text eller bakgrundsfärg. Om du till exempel lägger till ett täckblock kommer du att uppmana dig att välja en färg från en färgpalett.

Du har möjlighet att använda en färgväljare för att välja eller ange hex-färgen till den exakta färg du vill ha. Du kan komma åt detta genom att klicka på länken "Anpassad färg". Men om du använder samma uppsättning färger i ditt tema och vill hålla det konsekvent, kan det vara besvärligt att hela tiden komma ihåg och ange samma hexadecimala färgkoder varje gång.

Som tur är låter WordPress Gutenberg dig definiera färgpaletten! Det här är ännu en add_theme_support()där du tillhandahåller en rad färger du vill ha i paletten. I en funktion kopplad till after_setup_themegör du så här:

I koden ovan lägger vi till temastöd för ‘ editor-color-palette‘, och som andra parameter till funktionen definierar vi en array av alla färger vi vill ha. Varje färg kräver attributen name, slugoch color. nameär vad som visas när du för musen över färgen i paletten. slugär klassnamnet som kommer att läggas till i blockelementet. Och colordefinierar hex-koden för din färg.

Tänk på att du måste lägga till stilar i din CSS riktad mot var och en av dessa klasser (definierad av slug). WordPress applicerar inte automatiskt hex-färgen på dina block även om vi berättar för WordPress vad färgkoden är.

Som ett exempel är bilden till höger min färgpalett som jag har definierat för den här webbplatsens tema – för A White Pixel:

Det här är mina temafärger och i 95 % av fallen kommer jag att använda en av dessa färger – antingen som bakgrund eller som textfärg. I sällsynta fall kan jag dra ut colorpickern, men att ha de vanliga misstänkta redan definierade i färgpaletten gör livet mycket lättare.

Ett tips är att alltid se till att lägga till rent svart (#000000) och rent vitt (#FFFFFF) i din färgpalett. Det är nog också en bra idé att ha en eller två ljusgrå färger.

Använda en statisk framsida och optimera framsidesmallen

Du vet säkert redan om detta, men jag nämner det ändå. I WordPress kan du ställa in en statisk sida som förstasida genom att gå till Inställningar > Läsa.

Som standard visar WordPress förstasidan en lista över de senaste inläggen. Men om du väljer "En statisk sida" och väljer en sida från rullgardinsmenyn, kommer WordPress att visa den här sidan som förstasidan till din webbplats.

Det här är lätt att skapa en förstasida för din WordPress-webbplats. På den valda sidan kan du bygga framsidan med alla knep som nämns ovan. Du kan till exempel ha avmarkerade inläggsalternativ för att visa sidrubrik, sidofält och utvald bild. Och sidan är helt byggd med omslagsblock och innehåll i full bredd. Däremot kan du välja att inte gå inläggsalternativen (dölj sidofältet etc) vägen och helt enkelt skapa en förstasidesmall för att ersätta eller använda dessa.

När din WordPress är inställd som en statisk sida som förstasida kommer WordPress att leta efter mallen front-page.phpi ditt tema. Detta kommer att användas istället för page.php. Detta gör att du kan skapa och justera en separat mall som endast används för din förstasida.

I den front-page.phpmallen kan du redan definiera HTML för att säkerställa att alla block går helt i full bredd, har ingen sidofält, ingen sidtitel eller utvald bild. Du kanske vill helt enkelt bara göra the_content()för att mata ut sidans innehåll i sin helhet.

Till exempel, det här är vad jag har i det här webbplatstemans front-page.php. Medan jag i alla andra mallar, som page.php, har massor av utdata för sidofält, inläggstitel och så vidare, är detta hela omfattningen av min loop i front-page.php:

while (have_posts()): the_post();
    the_content('');
endwhile;

Det är allt. Min inpackning av HTML och mina klasser säkerställer att inläggets innehåll är helt i full bredd.

Kom ihåg att detta är en bra lösning om du som användare av temat förstår hur dina mallar fungerar. Jag vet att allt mitt innehåll på min förstasida måste vara helt insvept i omslagsblock. Jag litar på Cover-blockets inre behållare-HTML för att säkerställa att mitt innehåll ser bra ut och faller i en behållare med maxbredd. Om jag skulle lägga till ett enkelt Paragraph-block utan ett omslagsblock skulle det inte se bra ut eftersom det skulle sakna stoppning på sidorna.

Gör din sidas rubrik genomskinlig vid första omslagsblocket

En mycket vanlig funktion på moderna webbplatser är att göra rubriken transparent på förstasidan. När användaren börjar scrolla ner på sidan ändras rubriken till en fast stil och får en bakgrund. Men att ha en genomskinlig rubrik kan se riktigt snygg ut när vi kan se färgerna eller bilden bakom det första avsnittet.

Jag gör detta på den här webbplatsens förstasida. Ta en titt! Högst upp på sidan har min rubrik ingen bakgrund och visar bakgrunden för den lila gradientdelen (ett omslagsblock) bakom. När du väl börjar scrolla får den en fast solid bakgrund.

Tänk på att du måste vara medveten om färgerna i din rubrik och den första omslagsbakgrunden. Om din rubrik består av vit logotyp och vita menyalternativ (som min gör), kan du inte använda det här tricket med ett Cover-block som har en ljus bakgrund. Det skulle göra din rubrik oläslig!

Om du vill göra detta tänk på att det kräver lite Javascript-kunskaper. Men det är faktiskt väldigt enkelt. Jag ska gå igenom grunderna för dig:

Hela mitt rubrikelement är alltid position: fixed. Eftersom jag normalt inte vill att mitt innehåll ska försvinna bakom rubriken, har jag lagt till en stoppning på body-elementet som trycker ner innehållet under rubriken. Däremot har jag lagt till en regel om att om vi är på förstasidesmallen kommer denna utfyllnad inte att läggas till. Det säkerställer att endast på förstasidan kommer kroppsdelen att synas bakom rubriken. Jag riktar sedan in det första omslagsblocket på framsidan och lägger till en extra utfyllnad topp för att säkerställa att innehållet i detta första block inte stöter upp bakom rubriken – vilket ger det en bra bra utfyllnad efter rubriken.

Och sedan har jag lagt till en mycket enkel Javascript-kod med jQuery:

Vad den här koden gör är att lägga till en klass ‘ navbar-fixed‘ när sidan rullas längre än 60px ner på sidan. Och i min CSS riktar jag mig helt enkelt mot den här klassen och lägger till en fast bakgrundsfärg. Utan denna klass är rubrikens bakgrund transparent på framsidan.

Det är grunderna i det. Lek med CSS – justera Javascripts "tipspunkt" och använd till exempel transitionegendom för att göra en mjukare övergång när bakgrundsfärgen appliceras.

Bra block för förstasidor och landningssidor

WordPress erbjuder ett komplett utbud av block redo för dig att använda. Vissa av dem är särskilt användbara när du bygger en förstasida eller målsida. Om du redan är bekant med alla tillgängliga block vet du förmodligen redan om dessa.

• Kolumner. Ett block som tillåter kapslade block, vilket innebär att du kan lägga till alla block i varje kolumn. Du kan också lägga till kolumner i ett täckblock. Perfekt för att strukturera innehåll i kolumner. Du kan bestämma antalet kolumner och för varje kolumn kan du bestämma deras bredd. De kan alla vara lika breda eller anpassade bredder.
• Grupp. Ett annat block som tillåter kapslade block. Perfekt för att sätta en färgad bakgrund runt ett gäng andra block (som en titel och ett par stycken).
• Knapp. Det finns ingen framsida utan några knappar. Knappar är utmärkta som uppmaning och för att styra dina besökare dit du vill att de ska gå. Du kan anpassa knappens utseende och design. Kombinera detta med anpassade blockstilar för knappar!
• Spacer. Om du känner att du saknar utrymme i dina sektioner, lägg till ett Spacer-block – som helt enkelt bara är utrymme utan något innehåll. Du kan definiera höjden på distansen.
• Separator. Liknar Spacer-blocket, men lägger till en fin linje. Ett annat alternativ för att tydligt separera innehåll. Anpassa designen på linjen i ditt temas CSS eller lägg till anpassade blockstilar.
• Galleri. Utmärkt för att visa upp bilder. Har stöd för blockjustering i full bredd, så att du kan skapa ett bildgalleri i full bredd på din förstasida.
• Media & text. Ett trevligt enkelt sätt att justera en bild eller media bredvid text. Kan vara ett bättre alternativ än kolumner i vissa fall.
• Bädda in: Youtube ++. WordPress erbjuder ett gäng inbäddningar för media. Du kan till exempel spela upp en fullbredds Youtube-video på din förstasida.
• Widgets: Sökfält, senaste inlägg, kalender++. WordPress erbjuder några trevliga standardinnehållselement. Om du ville visa en lista över senaste inlägg eller ett sökfält på din målsida, gör det.

Om du däremot känner att du saknar block för att göra vad du vill, är lösningen att skapa dina egna anpassade block.

Skapa anpassade block

En mycket vanlig funktion på en förstasida eller landningssida är ett "genvägs"-element; där du väljer ett inlägg eller sida, och det matar ut ett block som länkar till inlägget, som innehåller den utvalda bilden, inläggets titel, eventuellt utdraget. I skrivande stund finns det inget sådant alternativ i standard WordPress. Du måste manuellt göra den här genvägen själv, manuellt infoga samma utvalda bild som inlägget, manuellt skriva in inläggets titel och utdrag och slå in allt i en länk.

Andra exempel på block som är mycket användbara för att bygga framsida och landningssidor är skjutreglage/karuseller, prisjämförelsetabeller och omdömen.

För att optimera för den här typen av block måste du antingen hitta ett plugin som ger dig detta (jag har inte utforskat det här alternativet), eller göra dem själv. Att göra dina egna anpassade block kräver betydande kunskaper om Javascript och React och en hel del kodning. Jag rekommenderar dock att gå den här vägen om du menar allvar med att vara en WordPress-utvecklare.

Om du är intresserad av att lära dig hur man skapar anpassade block för Gutenberg har jag en handledningsserie som går igenom detta i detalj.

Du kan också välja en enklare väg och köpa Advanced Custom Fields Pro (ACF). Med detta plugin kan du skapa anpassade Gutenberg-block utan någon Javascript-kunskap. Du styr bara PHP-utgången för blocken och låter ACF hantera Javascript-delen. Men kom ihåg att detta skapar ett beroende av ditt tema till en licensierad plugin.

Slutsats

Jag hoppas att detta inlägg har varit lite hjälp för dig att vidareutveckla dina färdigheter och kunskaper med WordPress Gutenberg! I skrivande stund finns det verkligen en brist på information och erfarenhet av hur du kan optimera ditt tema till Gutenberg. Jag hade särskilt svårt att hitta något om hur man snyggt bygger en förstasida. Så det här är vad jag har lärt mig genom att experimentera och leka mycket.