Hur man skapar ett anpassat WordPress-block (enkelt sätt)

Standardblocken i WordPress är utmärkta för enkelt innehåll – men de kan snabbt bli otillräckliga när du behöver anpassade layouter, interaktiva element eller skräddarsydda designer.

Det är där anpassade block kommer in. De ger dig full kontroll över hur ditt innehåll ser ut och fungerar, utan att förlita dig på uppblåsta plugins eller lösningar.

Det bästa? Att skapa anpassade block är mer tillgängligt än de flesta tror. Med rätt verktyg och en tydlig process behöver du inte vara utvecklare för att bygga block som matchar din webbplats unika behov.

Under åren har vi använt anpassade block för att effektivisera arbetsflöden och leverera helt skräddarsydda WordPress-webbplatser för kunder – och nu ska vi visa dig hur du gör detsamma.

I den här guiden får du lära dig steg-för-steg-processen för att skapa anpassade WordPress-block, även om du inte är en expertkodare.

Varför skapa ett anpassat WordPress-block?

WordPress levereras med en intuitiv blockredigerare som låter dig enkelt bygga dina inlägg och sidor genom att lägga till innehåll och layout-element som block.

Som standard levereras WordPress med flera vanliga block. WordPress-plugins kan också lägga till egna block som du kan använda.

Ibland vill du dock kanske skapa ett anpassat block för att göra något specifikt på din WordPress-webbplats eftersom du inte kan hitta ett blockplugin som fungerar för dig.

Med anpassade block kan du lägga till unika funktioner och funktionalitet på din webbplats som kanske inte finns tillgängliga i förbyggda block. Detta kan hjälpa till att automatisera processer eller göra innehållsskapande för din WordPress-blogg mer effektiv.

Till exempel kan du skapa ett anpassat block för att visa testimonials och sedan enkelt infoga och hantera det blocket utan någon kodningskunskap.

Med det sagt, låt oss se hur du enkelt skapar ett helt anpassat block i WordPress.

För den här handledningen kommer vi att visa dig två metoder för att skapa ett anpassat block. Du kan använda snabblänkarna nedan för att hoppa till den metod du väljer:

• Metod 1: Skapa anpassade block för WordPress med WPCode (Rekommenderas)
• Metod 2: Skapa anpassade block för WordPress med Genesis Custom Code Plugin (gratis)
• Bonus: Skapa anpassade mallar för dina inlägg

Metod 1: Skapa anpassade block för WordPress med WPCode (Rekommenderas)

Om du är ny inom WordPress och kodning verkar skrämmande, är WPCode ett fantastiskt val för dig.

Som en del av vår verktygslåda har vi funnit att WPCode är det mest nybörjarvänliga och säkraste sättet att lägga till anpassade kodavsnitt.

Vi har också en detaljerad WPCode-recension som du kan ha nytta av för att förstå dess fulla potential.

En av dess framstående funktioner är block-kodavsnitten, som låter dig skapa anpassade block utan ansträngning.

Först måste du installera och aktivera pluginet WPCode. För detaljerade instruktioner kan du ta en titt på vår nybörjarguide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till sidan Kodavsnitt » + Lägg till avsnitt från WordPress admin sidofält.

När du är där, klicka på knappen 'Använd kodavsnitt' under alternativet 'Lägg till din anpassade kod (nytt kodavsnitt)'.

Detta tar dig till sidan 'Skapa anpassat kodavsnitt', där du kan börja med att skriva ett namn för det nya blocket som du håller på att skapa.

När du har gjort det, väljer du bara alternativet 'Blocks Snippet' från rullgardinsmenyn 'Code Type' i det övre högra hörnet av skärmen.

Detta kommer att visa knappen 'Redigera med blockredigeraren' i rutan 'Kodförhandsgranskning'.

Klicka bara på den här knappen för att starta blockredigeraren.

Nu kommer en uppmaning att visas på din skärm där du ombeds att spara kodavsnittet för att ladda det i blockredigeraren. Klicka bara på knappen 'Ja' för att fortsätta.

Nu när du är i blockredigeraren kan du enkelt skapa ett anpassat block med hjälp av de färdiga blocken som finns tillgängliga i blockmenyn.

För den här handledningen kommer vi att skapa ett anpassat block för att lägga till vittnesmål på din webbplats.

Klicka först på knappen 'Lägg till block' (+) längst upp till vänster på skärmen för att öppna blockmenyn.

Dra och släpp rubrikblocket härifrån in i gränssnittet för blockredigeraren och namnge det 'Testimonials'.

Därefter kan du använda blocken för stycke, citat eller utdrag för att lägga till vittnesmål från olika kunder på din webbplats.

Du kan till och med anpassa ditt vittnesmålsblock ytterligare genom att använda blocken för bild, webbplatslogotyp, sociala ikoner eller webbplatsens slogan.

Du kan också konfigurera storlek, textfärg eller bakgrundsfärg på dina vittnesmål från blockpanelen på skärmens högra sida.

När du är klar, glöm inte att klicka på knappen 'Uppdatera' högst upp för att spara dina anpassade blockinställningar.

Klicka sedan bara på knappen ‘Return to WPCode Snippet’ högst upp för att omdirigeras till kodredigeringssidan.

När du är där, scrolla ner till avsnittet 'Infogning' och välj läget 'Automatisk infogning'.

När kodavsnittet har aktiverats, kommer ditt anpassade block automatiskt att läggas till på den plats du väljer att infoga det på din webbplats.

Därefter måste du konfigurera platsen för det anpassade block du skapade.

För att göra detta, klicka helt enkelt på rullgardinsmenyn 'Plats' i sektionen 'Infogning' och byt till fliken 'Sid-specifik'. Härifrån kan du nu välja alternativet 'Infoga efter inlägg' om du vill visa ditt Vittnesmålsblock efter att inlägget slutar.

När du har gjort det kan du också konfigurera antalet inlägg efter vilket testimonial-blocket ska visas. Om du till exempel skriver in siffran 3, kommer Testimonials-blocket att visas i vart tredje inlägg.

Du kan också visa blocket mellan olika stycken, efter inledningar till inlägg och mer.

Om du dock inte hittar den blockplacering du letar efter, kan du också skapa din egen regel för villkorlig logik för att bädda in det anpassade blocket på din föredragna plats.

För att göra detta, scrolla ner till avsnittet 'Smart villkorsstyrd logik' och aktivera omkopplaren 'Aktivera logik'.

Därefter måste du klicka på knappen 'Lägg till ny grupp' för att börja skapa en regel för villkorlig logik.

Om du till exempel bara vill visa det anpassade block du skapat på en specifik sida eller ett specifikt inlägg, måste du välja alternativet 'Sid-URL' från rullgardinsmenyn till höger.

Därefter kan du lämna nedrutemenyn i mitten som den är och sedan lägga till URL:en till WordPress-sidan/inlägget du väljer i fältet till vänster.

Du kan också konfigurera din regel för villkorlig logik för att endast visa det anpassade blocket på en specifik sida, för inloggade användare, WooCommerce-butikssidor, Easy Digital Downloads-sidor, specifika datum och mer.

När du är klar, scrolla tillbaka till toppen av sidan och växla omkopplaren ‘Inaktiv’ till ‘Aktiv’. Klicka sedan på knappen ‘Uppdatera’ för att spara dina inställningar.

Ditt anpassade block kommer nu automatiskt att läggas till på alla platser som du valt för blockets kodavsnitt.

Tänk på att det anpassade block du skapade inte kommer att visas som ett alternativ i blockmenyn i WordPress Gutenberg-redigeraren.

Du måste konfigurera blockinställningarna genom att besöka sidan Kodavsnitt från WordPress-instrumentpanelen och klicka på länken 'Redigera' under kodavsnittet.

Detta öppnar sidan 'Redigera kodsnutt', där du enkelt kan anpassa blocket eller ändra dess plats och regler för villkorsstyrd logik.

Besök nu din webbplats för att se det anpassade block du skapade i aktion.

Här är vårt anpassade Testimonials-block på vår demokwebbplats.

Metod 2: Skapa anpassade block för WordPress med Genesis Custom Code Plugin (gratis)

Om du är en medelavancerad användare och letar efter en gratis lösning, då är den här metoden för dig. Tänk på att du måste vara bekant med HTML och CSS för att följa instruktionerna i den här metoden.

Först måste du installera och aktivera pluginet Genesis Custom Blocks. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

För handledningens skull kommer vi att bygga ett Vittnesmålsblock.

Steg 1: Skapa ett anpassat block för WordPress

Gå först till sidan Anpassade block » Lägg till nytt från sidofältet i WordPress-administrationen.

Detta tar dig till sidan Blockredigerare, där du kommer att skapa ett anpassat block för din WordPress-webbplats.

Härifrån kan du börja med att ge ett namn till ditt block.

Nu, på höger sida av sidan, hittar du blockegenskaperna som du kan konfigurera.

Här kan du välja en ikon för ditt block, lägga till en kategori och lägga till nyckelord.

Slugen kommer att fyllas i automatiskt baserat på ditt blocks namn, så du behöver inte ändra den. Du kan dock skriva upp till 3 nyckelord i textfältet 'Nyckelord' så att ditt block lätt kan hittas.

Nu är det dags att lägga till några fält i ditt block. Du kan lägga till olika typer av fält som text, siffror, e-postadresser, URL:er, färger, bilder, kryssrutor, radio-knappar och mer.

Vi kommer att lägga till tre fält till vårt anpassade Vittnesmålsblock: ett bildfält för granskarens foto, en textruta för granskarens namn och ett textområdesfält för vittnesmålstexten.

Klicka bara på '+'-knappen för att infoga det första fältet.

Detta öppnar upp några alternativ för fältet i den högra kolumnen. Låt oss titta på var och en av dem.

• Fältetikett: Du kan använda vilket namn du vill för fältetiketten. Låt oss namnge vårt första fält 'Recensentbild'.
• Fältnamn: Fältnamnet genereras automatiskt baserat på fältetiketten. Vi kommer att använda detta fältnamn i nästa steg, så se till att det är unikt för varje fält.
• Fälttyp: Här kan du välja typ av fält. Vi vill att vårt första fält ska vara en bild, så vi väljer 'Bild' från rullgardinsmenyn.
• Fältplats: Du kan bestämma om du vill lägga till fältet i redigeraren eller i inspektören.
• Hjälptext: Du kan lägga till lite text för att beskriva fältet. Detta är inte obligatoriskt om du skapar detta block för personligt bruk, men det kan vara till hjälp för flera författare på bloggar.

Du kan också se ytterligare alternativ beroende på vilken fälttyp du väljer. Om du till exempel väljer ett textfält får du extra alternativ som platshållartext och teckenbegränsning.

Genom att följa ovanstående process, låt oss lägga till 2 andra fält för vårt Testimonials-block genom att klicka på '+'-knappen.

Om du vill ändra ordningen på fälten kan du göra det genom att dra dem med hjälp av handtaget på vänster sida av varje fältetikett. För att redigera eller ta bort ett visst fält måste du klicka på fältetiketten och redigera alternativen i den högra kolumnen.

När du är klar klickar du bara på knappen 'Publicera' på höger sida av sidan för att spara ditt anpassade Gutenberg-block.

Steg 2: Skapa en anpassad blockmall

Även om du skapade det anpassade WordPress-blocket i det senaste steget, kommer det inte att fungera förrän du skapar en blockmall.

Blockmallen bestämmer exakt hur informationen som matas in i blocket visas på din webbplats. Du bestämmer hur det ser ut genom att använda HTML och CSS, eller till och med PHP-kod om du behöver köra funktioner eller göra andra avancerade saker med data.

Det finns två sätt att skapa en blockmall. Om din blockutdata är i HTML/CSS, kan du använda den inbyggda mallredigeraren.

Å andra sidan, om din blockutdata kräver att viss PHP körs i bakgrunden, måste du manuellt skapa en blockmallfil och ladda upp den till din temamapp.

Metod 1: Använda den inbyggda mallredigeraren

På skärmen för anpassad blockredigering, byt helt enkelt till fliken 'Mallredigerare' och ange din HTML under markeringsfliken.

Du kan skriva din HTML och använda dubbla klammerparenteser för att infoga värden från blockfält.

Till exempel använde vi följande HTML för exempelblocket vi skapade ovan:

<div class="testimonial-item">
<img src="{{reviewer-image}}" class="reviewer-image">
<h4 class="reviewer-name">{{reviewer-name}}</h4>
<div class="testimonial-text">{{testimonial-text}}</div>
</div>

Därefter, byt bara till fliken 'CSS' för att styla din blockutdatamarkering.

Här är exempel-CSS vi använde för vårt anpassade block:

.reviewer-name { 
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
}

.reviewer-image {
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;
}

.testimonial-text {
    font-size:14px;
}

.testimonial-item { 
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;
}

Metod 2: Ladda upp egna blockmallar manuellt

Denna metod rekommenderas om du behöver använda PHP för att interagera med dina anpassade blockfält. Du måste ladda upp mallen för redigeraren direkt till ditt tema.

Först måste du skapa en mapp på din dator och namnge den med din anpassade blocknamnsslug.

Till exempel kallas vårt demo-block för Testimonials, så vi skapar en testimonials-mapp.

Skapa sedan en fil som heter block.php med en vanlig textredigerare. Det är här du kommer att placera HTML / PHP-delen av din blockmall.

Här är exempelmallen vi använde för vårt exempel:

<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>

Nu kanske du har märkt hur vi använde funktionen block_field() för att hämta data från ett blockfält.

Vi har slagit in våra blockfält i den HTML vi vill använda för att visa blocket. Vi har också lagt till CSS-klasser så att vi kan styla blocket på rätt sätt.

Glöm inte att spara filen i mappen du skapade tidigare.

Därefter måste du skapa en annan fil med hjälp av textredigeraren på din dator och spara den som block.css i mappen du skapade.

Vi kommer att använda den här filen för att lägga till CSS som behövs för att styla vår blockvisning. Här är exempel-CSS som vi använde för det här exemplet:

.reviewer-name { 
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
}

.reviewer-image {
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;
}

.testimonial-text {
    font-size:14px;
}

.testimonial-item { 
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;
}

Glöm inte att spara dina ändringar.

Din blockmallmapp kommer nu att ha två mallfiler inuti sig.

Efter det behöver du ladda upp din blockmapp till din webbplats med en FTP-klient eller appen Filhanteraren i kontrollpanelen för ditt WordPress-värdkonto.

När du är ansluten, navigera till mappen /wp-content/themes/ditt-nuvarande-tema/.

Om din temamapp inte har en mapp som heter 'blocks', skapa då en ny katalog och kalla den blocks.

Därefter måste du ladda upp mappen du skapade på din dator till mappen blocks.

Det var allt! Du har framgångsrikt skapat manuella mallfiler för ditt anpassade block.

Steg 3: Förhandsgranska ditt anpassade block

Innan du kan förhandsgranska din HTML/CSS måste du tillhandahålla lite testdata som kan användas för att visa ett exempelresultat.

Inne i WordPress administrationsområde, redigera ditt block och byt till fliken 'Redigeringsförhandsgranskning'. Här behöver du ange lite dummydata.

Dessa data kommer inte att ingå i ditt anpassade block och kommer endast att användas för att förhandsgranska de ändringar du gjort med HTML och CSS.

När du har lagt till data, kom ihåg att klicka på knappen 'Uppdatera' för att spara dina ändringar.

Om du inte klickar på knappen 'Uppdatera', kommer du inte att kunna se förhandsgranskningen av ditt anpassade block.

Du kan nu växla till fliken 'Förhandsgranskning i frontend' för att se hur ditt block kommer att se ut på din WordPress-webbplats frontend.

Om allt ser bra ut kan du uppdatera ditt block igen för att spara eventuella osparade ändringar.

Steg 4: Använda ditt anpassade block i WordPress

Du kan nu använda ditt anpassade block i WordPress som du skulle använda vilket annat block som helst.

Redigera helt enkelt vilket inlägg eller sida där du vill använda detta block. Klicka sedan på knappen 'Lägg till block' (+) längst upp till vänster för att öppna blockmenyn.

Här kan du använda sökfunktionen för att hitta ditt block genom att skriva in dess namn eller nyckelord. Lägg sedan till det på sidan eller i inlägget.

När du har infogat det anpassade blocket i innehållsområdet ser du de blockfält du skapade tidigare.

Du kan fylla i blockfälten efter behov.

När du flyttar bort från det anpassade WordPress-blocket till ett annat, kommer redigeraren automatiskt att visa en liveförhandsgranskning av ditt block.

Du kan nu spara ditt inlägg och din sida och förhandsgranska det för att se ditt anpassade block i aktion på din webbplats.

Så här ser "Testimonials"-blocket ut på vår testsida.

Bonus: Skapa anpassade mallar för dina inlägg

Förutom att skapa anpassade block kan du lägga till anpassade mallar för din webbplats blogginlägg eller sidor.

En mall är en layout som du kan lägga till i ditt inlägg för att få det att se annorlunda ut än andra sidor och innehåll. Detta kan göra dina inlägg mer engagerande och visuellt tilltalande och kan hjälpa till att generera fler leads.

Du kan enkelt skapa en mall för alla dina inlägg genom att skapa ett återanvändbart Gruppblock.

Först måste du klicka på knappen 'Lägg till block' (+) för att lägga till gruppblocket i inlägget. Sedan kan du lägga till valfria block inom gruppen, inklusive rubrik, media och text, omslagsbilder och mer.

När du har skapat inläggsmallen klickar du på menyn med tre punkter i blockverktygsfältet högst upp i blocket. Klicka sedan på knappen 'Skapa mönster'.

Efter det kommer din inläggsmall att sparas som ett återanvändbart block. Du kan komma åt och lägga till det i vilket inlägg som helst genom att öppna blockmenyn (+) och växla till fliken 'Mönster'.

Tänk dock på att denna metod för att skapa anpassade inläggsmallar ger begränsad funktionalitet. För att skapa en vackrare anpassad mall utan kodning kan du använda SeedProd, som är den bästa sidbyggaren på marknaden.

För detaljer, se vår handledning om hur man skapar anpassade mallar för enskilda inlägg i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt bygger anpassade Gutenberg-block för din WordPress-webbplats. Du kanske också vill se vår guide om hur du lägger till en checklista för blogginlägg i WordPress-redigeraren och se våra väsentliga tips för att använda kortkoder på din webbplats.

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.