Nybörjarguide: Hur man använder WordPress blockmönster

Att bygga WordPress-webbplatser har aldrig varit enklare, och blockmönster är en stor del av det. När vi först upptäckte dem såg vi deras potential att snabba upp vårt arbetsflöde.

Vi använder nu blockmönster som återanvändbara block för CTA:er och kupongerbjudandeknappar – de har blivit avgörande för hur vi skapar innehåll.

Blockmönster gör det enkelt att få professionellt utseende designer utan att behöva kodnings- eller webbdesignkunskaper.

De är förbyggda kombinationer av block som du snabbt kan infoga och anpassa, vilket ger dig en bra start istället för att börja från noll varje gång.

Oavsett om du bygger din första WordPress-webbplats eller vill arbeta snabbare, kommer den här nybörjarguide att visa dig hur du hittar, använder och skapar blockmönster som sparar tid på varje projekt.

Här är de ämnen vi kommer att täcka i den här guiden:

• Vad är WordPress blockmönster?
• Hur man använder blockmönster i WordPress
• Hur man skapar mönster i blockredigeraren
• Hur man skapar mönster i webbplatsredigeraren
• Hantera mönster i WordPress
• Hitta fler blockmönster att använda på din webbplats
• Hur man skapar och delar dina blockmönster
• Skapa WordPress blockmönster manuellt
• Hur man tar bort ett blockmönster i WordPress
• Vad hände med återanvändbara block?
• Vanliga frågor
• Ytterligare resurser

Vad är WordPress blockmönster?

WordPress blockmönster är fördesignade samlingar av block som hjälper dig att snabbt och effektivt skapa anpassade layouter. De har varit en spelväxlare för oss när vi bygger sidor med snäva deadlines.

Blockredigeraren i WordPress är intuitiv och låter användare designa vackra layouter med innehållsblock. Dessa inkluderar text, bilder, knappar och andra element som du kan arrangera efter dina behov.

Alla användare har dock inte tid eller designkunskaper för att skapa layouter från grunden varje gång. Vi har själva ställts inför denna utmaning, vilket är anledningen till att blockmönster har varit ett så värdefullt verktyg i vårt arbetsflöde.

Blockmönster erbjuder en enkel lösning. WordPress inkluderar en mängd förbyggda mönster som standard, vilket gör det enkelt att lägga till professionellt utseende layouter på några sekunder.

Populära WordPress-teman inkluderar ofta sina egna anpassade mönster. Dessa mönster sparar ännu mer tid genom att ge dig färdiga designer anpassade till ditt tema.

Mönster kan inkludera layouter som flerkolumndesign, kombinationer av media och text, sektioner för uppmaningar till handling, rubriker och anpassade knappar. Denna flexibilitet gör dem lämpliga för en mängd olika innehållstyper.

Du kan också hitta fler blockmönster på WordPress.org-webbplatsen. Om du gillar att designa kan du till och med skapa och dela dina egna mönster med WordPress-communityt.

Därefter visar vi dig hur du använder blockmönster i WordPress för att skapa fantastiska layouter för din webbplats.

Hur man använder blockmönster i WordPress

Som standard kommer WordPress med flera användbara blockmönster som du kan använda på din webbplats. Ditt WordPress-tema och vissa plugins kan också lägga till sina egna mönster.

För att använda blockmönster måste du redigera WordPress inlägg eller sida där du vill använda blockmönstret.

På skärmen för inläggsredigering, klicka på knappen Lägg till block [+] för att öppna blockinfogaren. Härifrån, byt till fliken 'Mönster' för att se tillgängliga blockmönster.

Du kan scrolla ner för att se tillgängliga blockmönster.

Du kan också se blockmönster i olika kategorier, som utvalda, knappar, kolumner, rubriker och mer.

Alternativt kan du också klicka på knappen 'Utforska alla mönster' för att se blockmönster.

Här kan du se större förhandsgranskningar i ett popup-fönster.

När du hittar ett mönster du vill prova, klickar du bara för att infoga det i innehållsområdet i ditt inlägg eller din sida.

Mönstret visas i innehållseditor med platshållarinnehåll som du kan redigera och ersätta med ditt eget.

Klicka och dra helt enkelt på valfri block inuti mönstret för att redigera och ändra dess innehåll enligt dina krav.

Du har fortfarande alla alternativ som du normalt har för varje block. Om det till exempel är ett omslagsblock kan du ändra färgen på omslaget eller bakgrundsbilden.

Du kan lägga till så många mönster som du behöver för ditt blogginlägg eller din sida. Du kan också ta bort ett mönster för att ta bort det från ett inlägg eller en sida, precis som du skulle ta bort vilket WordPress-block som helst.

Med hjälp av blockmönster kan du snabbt skapa vackra layouter för dina artiklar och din WordPress-webbplats.

I slutändan hjälper blockmönster dig att spara tid som du annars skulle lägga på att manuellt arrangera block varje gång du behöver lägga till en rubrik, ett galleri, knappar och mer.

Hur man skapar mönster i blockredigeraren

WordPress gör det superenkelt att skapa mönster i blockredigeraren som du kan återanvända senare.

När du redigerar ett inlägg eller en sida, välj helt enkelt de block du vill inkludera i ditt mönster och klicka på ‘Skapa mönster’.

Du kan välja flera block genom att hålla nere skift-tangenten på ditt tangentbord och klicka på dem.

Men om dina block är arrangerade på ett sätt som gör dem svårare att välja, kan du använda Listvyn under fliken Dokumentöversikt.

Att skapa ett mönster öppnar ett popup-fönster.

Du måste ange ett namn för ditt mönster och välja en kategori.

Nedanför det ser du en växlingsknapp för att hålla mönstret Synkroniserat eller Osynkroniserat.

Synkroniserade mönster: När du eller andra användare redigerar mönstret sparas dessa ändringar nästa gång mönstret används.

Osynkroniserade mönster: Ändringar som görs i dessa mönster efter att de har infogats i ett inlägg eller en sida påverkar inte originalmönstret.

Klicka på knappen 'Skapa' för att spara ditt mönster.

Nästa gång du vill använda det mönstret behöver du bara leta efter dess namn eller kategori i blockinfogaren.

Hur man skapar mönster i webbplatsredigeraren

Om du använder ett blocktema med stöd för fullständig webbplatsredigering, kan du också skapa mönster i webbplatsredigeraren.

Öppna webbplatsredigeraren genom att besöka sidan Utseende » Redigerare.

Du kommer nu att hamna i webbplatsredigeringsgränssnittet.

Klicka på ‘Mönster’ i sidofältet till vänster för att fortsätta.

Du kommer att se alla tillgängliga mönster och kategorier.

För att skapa ett nytt mönster, klicka på knappen Lägg till [+] och välj sedan ‘Skapa mönster’.

Detta öppnar ett popup-fönster där du behöver ange ett namn för ditt mönster, välja en kategori och bestämma om du vill att mönstret ska vara synkroniserat eller osynkroniserat.

Klicka på 'Skapa' för att fortsätta.

WordPress skapar en tom duk för dig att skapa ditt mönster.

Härifrån kan du lägga till block för att designa ditt mönster.

När du är klar, glöm inte att klicka på knappen ‘Spara’ för att lagra ditt mönster.

Hantera mönster i WordPress

Om du använder ett blocktema med stöd för redigeraren för hela webbplatsen kan du hantera mönster i webbplatsredigeraren.

Öppna webbplatsredigeraren genom att besöka sidan Utseende » Redigerare.

På skärmen Mönster kan du klicka på ett mönster för att redigera det. Du kan också klicka på menyn med tre punkter bredvid ett mönster för att duplicera, exportera eller ta bort det.

För att hantera alla dina mönster, klicka på fliken 'Hantera alla mina mönster' i sidofältet.

Detta visar dig en lista över alla dina mönster. Nu kan du redigera, exportera eller ta bort dem.

Om du använder ett klassisk tema (WordPress-teman som inte stöder hela webbplatsredigeraren), kan du hantera mönster genom att besöka sidan Utseende » Mönster.

Här kan du lägga till, ta bort och exportera dina blockmönster.

Tänk på att även vissa klassiska teman som Hestia nu hanterar mönster på ett liknande sätt som teman för hela webbplatsredigering, medan andra fortfarande använder det äldre gränssnittet som visas i skärmdumpen nedan.

Så, hur du hanterar blockmönster beror verkligen på temat du använder.

Hitta fler blockmönster att använda på din webbplats

Som standard kommer WordPress med några vanliga blockmönster. WordPress-teman kan också lägga till sina egna mönster på din webbplats.

Du kan dock hitta betydligt fler blockmönster än de som är tillgängliga via blockinfogaren på din webbplats.

Gå helt enkelt till webbplatsen WordPress Patterns Directory för att se många fler blockmönster.

Här hittar du blockmönster som skickats in av WordPress-communityt.

För att använda ett av dessa blockmönster, klicka bara för att se mönstret och klicka sedan på knappen ‘Kopiera mönster’.

Därefter behöver du gå tillbaka till din WordPress-blogg och redigera inlägget eller sidan där du vill infoga detta blockmönster.

På redigeringsskärmen, högerklicka helt enkelt och välj 'Klistra in' i webbläsarens meny eller tryck CTRL+V (Command + V på Mac).

Hur man skapar och delar dina blockmönster

Vill du skapa egna WordPress-blockmönster och dela dem med världen?

WordPress gör det superenkelt att skapa blockmönster och använda dem på dina egna webbplatser eller dela dem med alla WordPress-användare över hela världen.

Besök helt enkelt WordPress Pattern Directory-webbplatsen och klicka på länken 'New Pattern'.

Obs! Du behöver logga in eller skapa ett gratis WordPress.org-konto för att spara dina mönster.

När du har loggat in kommer du till sidan för blockmönsterredigering. Den är identisk med standard WordPress blockredigerare, och du kan använda den för att skapa ditt mönster.

Lägg helt enkelt till block för att skapa din mönsterlayout.

Du kan använda layoutblock som grupp, omslag, galleri och mer för att organisera din layout.

Det finns också royaltyfria bilder tillgängliga att använda i dina mediablock. WordPress mediebibliotek gör det enkelt att hitta och använda dessa bilder i dina mönster.

När du är nöjd med ditt blockmönster kan du spara det som ett utkast eller skicka in det till mönsterkatalogen.

Innan du kan skicka ditt blockmönster till mönsterkatalogen, se till att du har läst block mönsterkatalogens riktlinjer.

Du kan hantera alla dina blockmönster genom att klicka på länken 'Mina mönster'. Den visar alla blockmönster du har delat, utkastmönster och mönster du har markerat som favoriter.

Om du bara vill skapa blockmönster för eget bruk kan du spara dem som utkast. Kopiera och klistra sedan in dem från sidan Mina mönster till din WordPress-webbplats.

Skapa WordPress blockmönster manuellt

Du kan också skapa blockmönster manuellt och lägga till dem i ditt WordPress-tema eller ett anpassat kodavsnitt-plugin som WPCode.

Skapa helt enkelt ett nytt inlägg eller en ny sida i WordPress. Använd block i innehållsområdet för att skapa en anpassad layout eller blocksamling som du vill spara som ett mönster.

Byt sedan till läget Kodredigerare.

Härifrån behöver du kopiera allt innehåll du ser i kodredigeraren.

Öppna sedan en vanlig textredigerare som Anteckningar och klistra in den koden. Du behöver den i nästa steg.

Nu är du redo att registrera dina block som ett mönster.

För att göra det, kopiera och klistra bara in följande kod i din temas functions.php-fil eller ett kodsnutt-plugin som kostnadsfria WPCode-plugin (rekommenderas).

För mer information, här är den kompletta guiden för att lägga till anpassad kod i WordPress.

function wpb_my_block_patterns() {
    register_block_pattern(
        'my-plugin/my-awesome-pattern',
        array(
            'title'       => __( 'Two column magazine layout', 'my-theme'),
            'description' => _x( 'A simple magazine style two-column layout with large image and stylized text', 'my-theme' ),
            'categories'  => array( 'columns' ),
            'content'     => ' Your block content code goes here'
            )
    );
}
add_action( 'init', 'wpb_my_block_patterns' );

Kopiera och klistra nu in de råa blockdata som du kopierade tidigare som värde för parametern content. Med andra ord, du måste ersätta texten som säger, ”Din blockinnehållskod går här” med din blockkod. Se till att lämna enkelanföringstecknen runt texten kvar.

Slutligen, glöm inte att ändra titeln och beskrivningen till din egen och spara dina ändringar.

Du kan nu besöka din webbplats och redigera ett inlägg eller en sida. Ditt nyregistrerade blockmönster kommer att visas i blockinfogaren.

Hur man tar bort ett blockmönster i WordPress

Du kan enkelt ta bort eller avregistrera vilket blockmönster som helst i WordPress. Låt oss säga att du vill ta bort blockmönstret du skapade i exemplet ovan.

Allt du behöver göra är att kopiera och klistra in följande kod i ditt temas functions.php-fil eller WPCode:

function wpb_unregister_my_patterns() {
  unregister_block_pattern( 'my-plugin/my-awesome-pattern' );
}
add_action( 'init', 'wpb_unregister_my_patterns' );

I det här exemplet är 'my-plugin/my-awesome-pattern' namnet på mönstret vi använde när vi registrerade det.

Du kan använda den här koden för att avregistrera alla blockmönster som skapats av ditt tema eller ett plugin. Allt du behöver veta är namnet som används för att registrera mönstret.

Ta bort kärnmönster i WordPress

Kärnmönstren i WordPress är tillgängliga för alla WordPress-användare. Det innebär att de kan vara överanvända och kanske inte ens matcha resten av ditt WordPress-tema.

Om du inte vill använda ett mönster kan du helt enkelt undvika att lägga till det i ditt innehåll. Men om du driver en WordPress-sida med flera författare, kanske du vill förhindra alla användare från att använda dessa kärnmönster.

För att ta bort alla kärn-WordPress-mönster måste du lägga till följande kod i ditt temas funktioner-fil eller WPCode:

remove_theme_support( 'core-block-patterns' );

Vad hände med återanvändbara block?

Blockmönster och återanvändbara block syftade båda till att lösa ett liknande problem: att ge användarna alternativ för att enkelt lägga till vanliga block.

För att åtgärda detta slog kärnteamet för WordPress samman återanvändbara block till mönster.

För att få samma funktionalitet som återanvändbara block kan du nu använda Synkroniserade mönster. När du eller andra användare redigerar mönstret sparas dessa ändringar nästa gång mönstret används.

Vanliga frågor

Här är några frågor som våra läsare ofta ställer om blockmönster.

Var kan jag hitta ytterligare blockmönster?

Förutom standardmönstren i WordPress kan du utforska WordPress Mönsterkatalog online för ännu fler alternativ skapade av communityn.

Kan blockmönster sakta ner min webbplats?

Nej, blockmönster i sig påverkar inte din webbplats hastighet. De är ett sätt att strukturera innehåll, men se till att du använder optimerade bilder och block för bästa prestanda.

För tips, se vår ultimata guide om WordPress hastighet och prestanda.

Ytterligare resurser

Om du vill anpassa designen på din WordPress-webbplats, kommer du att finna följande resurser användbara:

• Hur du enkelt skapar ett anpassat WordPress-tema (utan kod)
• Hur man designar om en WordPress-webbplats (nybörjarguide)
• Vanliga problem med WordPress blockredigerare och hur du löser dem
• Hur man stylar WordPress-kommentarsformuläret (ultimat guide)
• Hur man anpassar bakgrundsfärgen för WordPress blockredigerare

Vi hoppas att den här guiden hjälpte dig att lära dig hur du använder WordPress blockmönster på din webbplats. Du kanske också vill se vår guide om att bemästra WordPress blockredigerare eller titta på dessa praktiska WordPress-genvägar för att vara mer produktiv.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.