Guide för Beginnare: Så här använder du WordPress Block Patterns

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

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

Blockmönster gör det enkelt att få professionell design utan att behöva kunskaper i kodning eller webbdesign.

De är förbyggda kombinationer av block som du snabbt kan infoga och anpassa, vilket ger dig ett försprång i stället för att börja från början varje gång.

Oavsett om du bygger din första WordPress-webbplats eller vill arbeta snabbare, visar den här nybörjarguiden hur du hittar, använder och skapar blockmönster som sparar tid i varje projekt.

Här är de ämnen som vi kommer att täcka i denna guide:

Vad är WordPress blockmönster?

WordPress blockmönster är fördesignade samlingar av block som hjälper dig att skapa anpassade layouter snabbt och effektivt. De har varit en game-changer för oss när vi byggt sidor med korta deadlines.

Blockredigeraren i WordPress är intuitiv och gör det möjligt att utforma vackra layouter med innehållsblock. Dessa innehåller text, bilder, knappar och andra element som du kan ordna efter dina behov.

Men det är inte alla användare som har tid eller designkunskaper nog att skapa layouter från grunden varje gång. Vi har själva ställts inför den här utmaningen, och det är därför blockmönster har varit ett så värdefullt verktyg i vårt arbetsflöde.

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

Populära WordPress-teman innehåller ofta sina egna anpassade mönster. Dessa mönster sparar ännu mer tid genom att ge dig färdiga mönster som är skräddarsydda för ditt tema.

Mönstren kan innehålla layouter som flerkolumniga designer, kombinationer av media och text, sektioner med 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 tycker om att designa kan du till och med skapa och dela dina egna mönster med WordPress-communityn.

Nu ska vi visa dig hur du använder blockmönster i WordPress för att skapa fantastiska layouter för din webbplats.

Så här använder du block patterns i WordPress

Som standard levereras WordPress med flera användbara block patterns som du kan använda på din website. Your WordPress theme och vissa tillägg kan också add to sina egna mönster.

För att använda block patterns måste du editera den WordPress post eller page där du vill använda block pattern.

På skärmen för redigering av inlägg klickar du på knappen Lägg till block [+] för att öppna blockinläggaren. Här kan du växla till fliken “Patterns” för att visa tillgängliga blockmönster.

Du kan rulla ner för att se available block patterns.

Du kan också view block patterns i olika kategorier, till exempel utvalda, knappar, kolumner, headers med mera.

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

Här kan du se större previews i en popup.

När du har hittat ett mönster som du vill prova klickar du bara för att infoga det i innehållsområdet på din post eller page.

Mönstret kommer att visas i content editor med placeholder-innehåll som du kan edit och ersätta med ditt eget.

Du behöver bara peka och clicka på ett block i mönstret för att editera och ändra dess content enligt dina obligatoriska önskemål.

Du har fortfarande alla alternativ som du normalt har för varje block. Om det t.ex. är ett omslagsblock kan du ändra omslagsfärg eller bakgrundsbild.

Du kan add to så många mönster som du behöver för ditt blogginlägg eller din page. Du kan också ta bort ett pattern för att ta bort det från en post eller page, precis som du skulle ta bort ett WordPress-block.

Med hjälp av block patterns kan du snabbt skapa beautiful layouts för dina artiklar och din WordPress site.

I slutändan hjälper block patterns dig att save tid som du annars skulle spendera på att manuellt ordna block varje gång du behöver add to en header, gallery, knappar och mer.

Hur man skapar mönster i Block Editor

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

När du redigerar ett inlägg eller en sida markerar du bara de block som du vill inkludera i ditt mönster och klickar på “Skapa mönster”.

Du kan välja flera block genom att trycka på shift-tangenten på ditt tangentbord och clicka på dem.

Men om dina block är ordnade på ett sätt som gör det svårare att välja dem kan du använda List view under tabben Document Overview.

Om du skapar ett mönster kommer en popup upp.

You will need to provide a name for your pattern and choose a category.

Under det ser du en toggle för att hålla mönstret synkroniserat eller osynkroniserat.

Synkade mönster: När you eller andra användare editar mönstret, kommer dessa ändringar att saved 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 det ursprungliga mö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 block inserter.

Så här skapar du mönster i Site Editor

Om du använder ett block editor-tema med fullt stöd för Site Editor kan du också skapa mönster i Site Editor.

Öppna Site Editor genom att gå till sidan Appearance ” Editor.

You will now land in the site editor interface.

Klicka på “Mönster” i den vänstra sidofältet för att fortsätta.

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

För att skapa ett nytt mönster klickar du på knappen Lägg till [+] och väljer sedan “Skapa mönster”.

Detta kommer att visa en popup där du måste ange ett namn för ditt mönster, välja en kategori och bestämma om du vill att mönstret ska synkroniseras eller osynkroniseras.

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

WordPress skapar en tom duk där du kan 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 “Save” för att spara ditt mönster.

Hantering av mönster i WordPress

Om du använder ett block editor-tema med fullt stöd för Site Editor kan du hantera patterns i Site Editor.

Öppna Site Editor genom att gå till sidan Appearance ” Editor.

På vyn Mönster kan du clicka på ett mönster för att edit:a det. You can also click on the three-dot menu next to a pattern to duplicate, exportera eller delete it.

Om du vill hantera alla dina mönster klickar du på fliken “Hantera alla mina mönster” i sidofältet.

Då visas en lista över alla dina mönster. Nu kan du redigera, exportera eller ta bort dem.

Om du använder ett klassiskt tema (WordPress-teman som inte stöder den fullständiga webbplatsredigeraren) kan du hantera mönster genom att besöka sidan Utseende “ Mönster.

Härifrån kan du add, delete och exportera dina block patterns.

Tänk på att även vissa klassiska teman som Hestia nu hanterar mönster på samma sätt som teman för fullständig 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å vilket tema du använder.

Hitta fler block patterns att använda på din website

Som standard levereras WordPress med några vanligt förekommande block patterns. WordPress teman kan också add to sina egna mönster till din website.

Du kan dock hitta mycket fler block patterns än de som är tillgängliga från block inserter på din website.

Gå bara till WordPress Patterns Directory website för att view många fler block patterns.

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

För att använda ett av dessa blockmönster klickar du bara på för att visa mönstret och sedan på knappen “Kopiera mönster”.

Därefter måste du gå tillbaka till din WordPress-blogg och redigera inlägget eller sidan där du vill insert detta block pattern.

På redigeringsskärmen högerklickar du bara och väljer “Paste” i webbläsarmenyn eller trycker på CTRL+V (Command + V på Mac).

Hur du skapar och delar dina block patterns

Vill du skapa dina egna WordPress block patterns och dela med dig av dem till hela världen?

WordPress gör det superenkelt att skapa block patterns och använda dem på dina egna websites 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 “Nytt mönster”.

Obs: Du måste 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 WordPress standardblockredigerare och du kan använda den för att skapa ditt mönster.

Lägg bara till block för att skapa din layout för mönstret.

Du kan använda layoutblock som gillar grupp, cover, gallery, och mer för att organisera din layout.

Det finns också royaltyfria images available att använda i dina media block. Med mediabiblioteket i WordPress kan du enkelt hitta och använda dessa images i dina mönster.

När du är nöjd med ditt block pattern kan du save det som ett draft eller submit det till pattern directory.

Innan du kan submitte your block pattern till pattern directory, se till att du har läst riktlinjerna för block pattern directory.

Du kan hantera alla dina blockmönster genom att klicka på länken “My Patterns”. Där visas alla blockmönster som du har delat, utkast till mönster och mönster som du har favoritmarkerat.

Om du bara vill skapa block patterns för eget bruk kan du save dem som drafts. Därefter kan du copy and paste dem från sidan My Patterns till din website i WordPress.

Skapa WordPress Block Patterns manuellt

Du kan också skapa block patterns manuellt och add to ditt WordPress-tema eller custom snippets plugin som WPCode.

Skapa helt enkelt en new post eller page i WordPress. I innehållsområdet använder du block för att skapa en custom layout eller block collection som du vill save som ett pattern.

Därefter växlar du till läget Code Editor.

Härifrån måste du kopiera all content som du ser i code editor.

Öppna sedan en vanlig textredigerare som Notepad och klistra in den koden. Du kommer att behöva den i nästa steg.

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

För att göra det kopierar du bara och klistrar in följande kod i ditt temas functions.php-fil eller i ett kodsnuttsplugin som gratispluginet WPCode (rekommenderas).

För mer details, här är den kompletta guiden för att lägga till custom code 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' );

Nu kopierar du och klistrar in de råa blockdata som du kopierade tidigare som värde för innehållsparametern. Med andra ord måste du ersätta texten som säger “Din blockinnehållskod hamnar här” med din blockkod. Var noga med att låta de enkla citattecken som omger texten vara kvar.

Glöm inte att ändra titeln och beskrivningen till dina egna och spara ändringarna.

You can now visit your website and edit a post or page. Ditt nyligen registrerade block pattern kommer att visas i block inserter.

Så här tar du bort ett block pattern i WordPress

Du kan enkelt ta bort eller avregistrera ett blockmönster i WordPress. Låt oss säga att du vill ta bort det blockmönster som 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å det mönster vi använde när vi registrerade det.

Du kan använda den här koden för att avregistrera alla block patterns som skapats av your theme eller ett plugin. Allt du behöver veta är det namn som användes för att registrera mönstret.

Remove WordPress Core-mönster

WordPress core-mönstren är tillgängliga för alla användare av WordPress. Detta innebär att de kan vara överanvända och kanske inte ens matchar resten av ditt WordPress theme.

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-webbplats med flera författare kanske du vill hindra alla användare från att använda dessa kärnmönster.

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

remove_theme_support( 'core-block-patterns' );

Vad hände med återanvändbara Block?

Block patterns och återanvändbara block syftade båda till att lösa ett liknande problem: att ge användare alternativ för att enkelt kunna add to vanligt förekommande block.

För att fixa detta sammanfogade Core WordPress-teamet återanvändbara block till mönster.

För att få samma funktionalitet som återanvändbara block kan du nu använda Synced Patterns. När du eller andra användare editerar mönstret, kommer dessa ändringar att saved nästa gång mönstret används.

Vanliga frågor och svar

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

Var kan jag hitta fler blockmönster?

Förutom standardmönstren i WordPress kan du utforska WordPress Patterns Directory online för ännu fler alternativ som skapats av communityn.

Kan blockmönster göra min webbplats långsammare?

Nej, blockmönster i sig påverkar inte webbplatsens 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 kan du använda följande resurser:

• Så här skapar du enkelt ett anpassat WordPress-tema (utan kod)
• Hur man gör om en WordPress-webbplats (nybörjarguide)
• Vanliga problem med blockredigeraren i WordPress och hur du åtgärdar dem
• Så här utformar du WordPress kommentarsformulär (ultimat guide)
• Så här anpassar du bakgrundsfärgen i WordPress Block Editor

Vi hoppas att den här guiden hjälpte dig att lära dig hur du använder WordPress block patterns på din website. Du kanske också vill se vår guide om hur du bemästrar WordPress Block Editor eller ta en titt på dessa praktiska WordPress-genvägar för att bli mer produktiv.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.