Den kompletta guiden till WordPress-widgetar: hur du använder, lägger till och implementerar dem för att anpassa din webbplats

WordPress-widgetar är otroligt användbara. De låter dig lägga till alla typer av extra innehåll till din webbplats utanför inlägget eller sidans själva brödtext, uppmuntra användare att skaffa mer information, följa länkar, eller utföra handlingar.

I det här inlägget kommer jag att visa dig allt du behöver veta om WordPress-widgetar. Hur du lägger till dem på din webbplats, hur du skapar widgetområden för att lägga in dem i, hur du installerar plugins som ger dig fler av dem, hur du kodar dina egna widgetar, och mycket mer.

Låt oss först börja med att identifiera vad WordPress-widgetar är för något.

Vad är WordPress-widgetar?

I WordPress är widgetar utdrag av innehåll som finns utanför sidan eller inläggets innehållsflöde.

Widgetar innehåller information, navigering eller media som är separat från ett enskilt inlägg eller en sida. I de flesta fall kommer varje widget att visas på varje sida på webbplatsen, men du kan också registrera widgetområden för specifika sidor som startsidan.

För att lägga till en widget på din webbplats måste du lägga till den i ett widgetområde. Widgetområden skapas av ditt tema eftersom de berör design och layout på din webbplats och inte funktionalitet.

De flesta WordPressteman har widgetområden i sidofältet och sidfoten, även om vissa kommer att ha flera widgetområden på många ställen, till exempel under eller över innehållet eller i headern.

Skärmdumpen nedan, av en av mina egna webbplatser, visar widgetar i sidofältet och sidfoten.

WordPress levereras med en massa förinstallerade widgetar så att du kan använda dem utan att behöva installera eventuella plugins eller skriva någon kod. Men du kan också lägga till många fler widgetar genom att installera plugins eller koda din egen.

De kan omfatta ett stort antal innehållstyper, såsom media, sociala medie-flöden, navigering, sök, kartor och mycket mer. Det finns inte mycket du kan vilja ha på din webbplats som du inte kan hitta en widget för. Faktum är att den största utmaningen ofta är att välja mellan alla alternativ och inte gå överstyr.

Då bör du använda WordPress-widgetar

Du bör använda en widget när du vill lägga till extra innehåll till en eller flera sidor på din webbplats (och när jag säger sida, inkluderar jag inlägg, arkiv etc.), men det är inte en del av innehållet på den sidan. De är särskilt användbara för innehåll som du vill visa på varje sida på webbplatsen, till exempel en lista över dina senaste inlägg, en kundvagn, eller en uppmaning till handling-knapp.

Tänk på hur många användare som behöver tillgång till varje widget och hur viktigt det är när du bestämmer var du ska placera den. Widgetar i sidofältet kommer att vara mer framträdande än widgetar i sidfoten, som vissa användare kanske inte ens ser.

Så en senaste inlägg-widget eller uppmaning till handling-widget kan passa bättre i sidofältet där folk har större chans att interagera med dem, medan ett socialt medie-flöde kan vara i sidfoten.

Om ditt tema också har särskilda widgetområden för startsidan, kanske du borde använda dessa för att navigera din webbplats avdelningar, listor över relevant innehåll, eller media, som en välkomstvideo för webbplatsen.

11 exempel på widgetar i WordPress

Det bästa sättet att förstå de möjligheter som WordPress-widgetar erbjuder är att titta på några exempel på dem. Låt oss ta en titt på elva typer av widgetar som du ofta ser på WordPress-sajter.

1. Senaste inlägg-widget

Senaste inlägg-widgeten är möjligen den vanligaste widgeten för olika bloggar.

Den låter dig visa en lista över dina senaste inlägg i sidofältet eller sidfoten på varje sida på din webbplats, vilket ökar möjligheten att besökare kommer att bläddra på webbplatsen och läsa flera inlägg.

Senaste inlägg-widgeten är förinstallerad i WordPress. Den låter dig ställa in hur många inlägg du vill visa och vilken rubrik du vill ge widgeten.

Om du vill lägga till extra funktionalitet kan du installera ett plugin för en alternativ widget som WordPress Popular Posts, som visar det mest populära innehållet. Alternativt uppdateras Advanced Random Posts-widgeten varje gång användaren besöker en ny skärm.

2. Senaste kommentarer-widget

Vill du visa besökarna hur levande din webbplats är och hur mycket publiken engagerar med ditt innehåll?

Widgeten Senaste kommentarer visar de senaste kommentarerna på din webbplats, vilket ger besökarna möjlighet att navigera direkt till dessa kommentarer och delta i diskussionen.

Senaste kommentarer-widgeten följer med WordPress. Återigen, om du vill lägga till extra funktionalitet kan du installera en tredje parts kommentarplugin såsom WP Social Comments-widgeten som låter folk kommentera med sitt Facebook-konto: bra för sociala medie-engagemang.

3. Uppmaning till handling-widgetar (CTA)

En mycket bra användning av en widget är att uppmuntra folk att utföra något, och du kan göra detta med en uppmaning till handling-widget.

Din widget kan vara en enkel knapp, eller så kan du skapa något mer skräddarsydd med hjälp av en textwidget eller HTML-widget, eller till och med en bildwidget, som alla kommer förinstallerade med WordPress.

På en av mina egna webbplatser har jag skapat en uppmaning till handling-widget som uppmuntrar mina besökare att registrera sig för min mejlinglista. Detta använder den inbyggda HTML-widgeten där jag har inkluderat en bild, lite text och en knapp som jag har kodat i HTML.

4. Navigeringswidgetar

Du kan också använda widgetar för att uppmuntra människor att navigera på din webbplats.

Det finns några alternativ för detta: kategori- eller taggmolns-widgetar och navigeringsmeny-widgeten.

Med navigeringsmeny-widgeten kan du skapa en Anpassad navigeringsmeny som alternativ till huvudnavigeringsmenyn på din webbplats, och sedan lägga till den i ett widgetområde.

Du kan till och med lägga till din huvudnavigeringsmeny i ett widgetområde, även om det bara fungerar om du har en liten navigeringsmeny.

Att lägga till en navigeringsmeny till sidfoten på din webbplats kommer att uppmuntra besökare att nå slutet av ett inlägg för att navigera på din webbplats. Det är särskilt användbart för mobila användare som kan behöva bläddra en hel del för att komma tillbaka till huvudnavigeringsmenyn efter att ha nått slutet av ett inlägg.

Alternativt kan du använda den inbyggda kategori-widgeten för att visa en lista över kategorierna på din webbplats, eller taggmoln-widgeten för att göra det enkelt att komma åt taggarkiv.

5. Media-widgetar

Att lägga till media till sidofältet eller sidfoten kommer att liva upp din webbplats och ge användarna något att titta på eller interagera med.

Du kan använda den inbyggda bildwidgeten för att visa en bild i sidofältet eller sidfoten, och det låter dig göra den bilden till en länk också.

Alternativt kan du streama video från YouTube eller Vimeo direkt i widgetområdet på din webbplats med hjälp av videowidgeten. Detta är särskilt användbart om din webbplats har speciella widgetområden för startsidan, men kan också vara bra i sidfoten som ett sätt att fånga människors uppmärksamhet när de når slutet av ett inlägg.

6. Sociala Medie-widgetar

Om du vill interagera med personer som besöker din webbplats via sociala medier, lägg till dina sociala medie-flöden till sidofältet eller sidfoten på din webbplats för att visa att du är aktiv på sociala medier och uppmuntra dem att gilla eller följa dig där.

Ett sätt att få tillgång till sociala medie-widgetar för de största plattformarna (Facebook, Twitter, Instagram) är att installera pluginet Jetpack, vilket inkluderar alla dessa och mycket mer.

Alternativt har alla sociala medieplattformar sina egna plugins, tillgängliga gratis via pluginkatalogen. Eller så kan du hitta plugin från tredje part som låter dig anpassa hur du visar ditt sociala medieflöde.

7. Kundvagnswidget

Om du driven en nätbutik på din webbplats med hjälp av plugin som WooCommerce är det en bra idé att inkludera en kundvagnswidget så att användarna enkelt kan navigera till sin kundvagn var de än är i butiken.

Du kan lägga detta i sidofältet där besökare enkelt kan se det, eller i sidhuvudet för ökad synlighet om ditt tema har ett widgetområde där.

E-handelsplugins som WooCommerce inkluderar kundvagnswidgetar och andra e-handelswidgetar som en del av pluginet, så när du har lagt till e-handelsfunktioner på din webbplats, hittar du dem i din Widget-skärm.

8. Formulärwidget

Om du vill att folk ska kontakta dig, ställa frågor eller anmäla sig till en e-postlista kan du lägga till ett formulär i sidofältet.

Det ingår inte någon formulärwidget i WordPress men du kan lägga till dem genom plugins, till exempel det kostnadsfria Contact Form 7 eller det mycket kraftfulla premiumpluginet Gravity Forms.

9. Kartwidget

Om ditt företag har en fysisk plats och du vill att folk ska kunna hitta dig enkelt är det hjälpfullt att lägga till en kartwidget på webbplatsen.

Det finns ett antal gratis Google Maps-widgetplugin eller andra kartplugin du kan använda, till exempel WP Google Maps.

Om du inte vill installera ett plugin kan du också ta inbäddningskoden från Google Maps och lägga till den med en HTML widget.

10. Inloggningswidget

Om du driver en medlemssajt kommer en inloggningswidget att göra det enkelt att logga in på din webbplats utan att behöva gå till en separat inloggningssida.

Meta-widgeten som kommer med WordPress innehåller en inloggningslänk men den innehåller också andra saker du kanske inte vill ha, så jag rekommenderar att du använder ett separat plugin för detta från pluginkatalogen.

Widgeten Login with Ajax ger dig ett inloggningsformulär i din widget där besökare kan logga in på din webbplats från vilken sida som helst.

11. Sökwidget

En riktigt enkel men otroligt användbar widget är den Sökwidget som kommer med WordPress.

Lägg till detta i sidofältet eller sidhuvudet och du gör det lättare för besökare att hitta saker på din webbplats.

Om du vill öka kraften i din Sökwidget kan du installera gratiswidgeten WP Google Search som använder Googles sökmotor.

Så här lägger du till widgetar till din WordPress-sajt

När du har bestämt vilka typer av widgetar du behöver för din WordPress-sajt är det dags att installera dem.

Bli inte frestad att lägga till för många. Ju fler det finns, desto mindre troligt är det att användarna kommer märka dem. Fokusera istället på två eller tre viktiga widgetar för sidofältet. Du kan lägga till fler till sidfoten, där de ändå är mindre viktiga.

Och om du har några extra widgetområden i ditt tema, bestäm vilka widgetar som ska vara där. Se till att de passar med layouten och designen av din webbplats.

Det finns tre sätt att lägga till widgetar på:

• Använd widgetar som redan kommer med WordPress.
• Lägg till en tredjepartswidget från pluginkatalogen.
• Köp ett premiumplugin som innehåller en widget.

Att hitta widgetar för din WordPress-sajt

Det finns ett brett utbud av tillgängliga widgetar, så det kan vara svårt att välja vilken som ska installeras. Låt oss ta en titt på alternativen och sedan undersöka hur du kan välja den bästa för dig.

Widgetar som kommer med WordPress

Om en av de förinstallerade widgetarna gör vad du behöver, använd det. Det sparar tid och betyder mindre kod på din webbplats.

De förinstallerade widgetarna:

• Arkiv: länk till Arkiv per månad, utformad för bloggar men ganska föråldrad nu.
• Kalender: en kalender med dina inlägg, återigen lämplig för bloggar speciellt om din blogg är tidskänslig (men inte så vanligt nuförtiden).
• Anpassad HTML: den ultimata flexibiliteten, lägg till allt innehåll du vill ha genom att skriva eller klistra in i HTML (som Google Forms). Undvik om du inte är bekväm med kodning.
• Bild: visa en bild från ditt mediebibliotek.
• Navigeringsmeny: visa huvudnavigeringsmenyn eller en separat meny du skapar själv.
• Senaste kommentarer: en lista över de senaste kommentarerna med länkar till dem.
• Taggmoln: en lista med taggar i ett molnformat, med länkar till relevanta arkiv.
• Video: bädda in en video från YouTube eller någon annan streamingtjänst.
• Ljud: bädda in en podcast, en spelare, låt eller andra ljudklipp (föreslag: så startar du en podcast med WordPress).
• Kategori: en lista över kategorier i din blogg, med länkar till arkivsidorna.
• Galleri: mer avancerad än bildwidgeten och visar ett galleri av bilder.
• Metatagg: metadata såsom inloggningslänkar och RSS-flöden. En rest från WordPress tidiga dagar och inte särskilt användbar längre.
• Sidor: visa en lista över webbplatsens sidor med länkar.
• Senaste inlägg: visa en lista över dina senaste inlägg för att uppmuntra besökare att läsa dem.
• Sök: en enkel sökruta.
• Text: all text du vill lägga till, till exempel information om webbplatsen.

Att lägga till widgetar med ett plugin

WordPress pluginkatalog har tusentals gratis widgetplugins som ger dig fler widgetar att välja mellan.

Förutom det finns det massor av andra plugins som också inkluderar widgetar, såsom ett e-handelsplugin som ger dig en kundvagnswidget och mer.

Om pluginkatalogen inte har pluginet du behöver kan du välja att lägga till ett premiumplugin. Ibland kommer dessa att erbjuda fler funktioner eller ett mer intuitivt gränssnitt. Men ibland hittar du samma funktioner i ett gratis plugin, så gör en ordentlig sökning i pluginkatalogen innan du betalar för ett plugin.

Så här hittar du rätt widget för din webbplats

För att hitta rätt WordPress-widget för dig, följ dessa tips:

1. Identifiera exakt vad du behöver från widgeten. Vilken funktionalitet behöver den ha och hur vill du att den ska se ut? Behöver den länka till någon tredjeparts API?
2. Kolla in de inbyggda widgetarna för att se om det finns någon som uppfyller dina behov. Testa alla relevanta, och om du hittar en lämplig widget, är det jättebra. Om inte…
3. Kolla in pluginkatalogen, som du kan komma åt via Plugins > Lägg till nya. Prova att söka efter mer än en term för att hitta rätt plugin för dig, och att söka med och utan ordet ”widget”. Ibland kommer ett plugin som inte är inriktat på widgetar att innehålla en widget som en del av en bredare uppsättning funktioner.
4. Om du inte hittar något som passar bland gratispluginsen, leta efter ett premiumplugin. Fråga andra WordPressanvändare efter rekommendationer och titta på recensionerna innan du väljer en.

Oavsett vilken widget du väljer måste du testa den för att kontrollera att den fungerar som du vill. Om du köper premiumplugin skulle jag rekommendera att köpa ett med en pengarna-tillbaka-garanti eller en gratis provperiod ifall det inte känns rätt för dig trots allt.

Så här lägger du till widgetar i sidofältet och sidfoten i WordPress

Nu när du valt din widget är det dags att lägga till den på din webbplats.

Du kan lägga till widgetar till alla aktiva widgetområden som ditt tema ger dig. Om ditt tema inte har ett widgetområde på den plats du vill ha en, försök leta efter ett annat.

Senare i det här inlägget ska jag visa dig hur du kodar ditt eget widgetområde.

Det finns två sätt att lägga till widgetar på din webbplats:

• Genom att använda Customizer. Gå till Utseende > Customizer > Widgetar i adminmenyn, eller Anpassa > Widgetar från administratörsfältet längst upp på skärmen.
• Via Widgetskärmen. Gå till Utseende > Widgetar i adminmenyn eller i adminfältet Anpassa > Widgetar.

Jag ska visa dig hur du använder båda dessa metoder inom kort men låt oss först ta en titt på widgetområden och varför du får de du får med ditt tema.

Widgetar är inte bara till för sidofältet

Beroende på ditt WordPresstema kan det finnas widgetområden på flera ställen. De flesta teman har widgetområden i sidofältet och sidfoten. Men vissa har dem också på andra ställen, som under eller över innehållet eller i sidfoten.

Om du går till widgetinställningsskärmen i WordPress-admin kommer du att kunna se alla widgetområden i ditt tema.

Jag använder ett tema med flera widgetområden på massor av platser. Du kan se på skärmdumpen nedan att det finns widgetområden ovanför och under innehållet, i sidhuvudet, under sidfoten.

Om du vill lägga till widgetar på andra platser på din webbplats är det vettigt att hitta ett tema som har flera widgetområden. Det bästa sättet att göra detta är att använda ett ramverkstema.

Ett bra exempel på en widget på en plats i ditt tema som inte är sidofältet eller sidfoten är att lägga till ett sökfält i headern som jag har på en av mina webbplatser.

Widgetområden och teman

Widgetområden kodas in i temats mallfiler, liksom temats funktionsfil.

Här kan du se koden jag har använt i mitt temas funktionsfil för att lägga till ett widgetområde i headern.

register_sidebar( array(
 'name' => __( 'In Header Widget Area', 'rmccollin' ),
 'id' => 'in-header-widget-area',
 'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),
 'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
) );

Och här är koden i min header.php-fil som lägger till det widgetområdet på rätt plats i temat.

if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>

 <aside class="in-header widget-area right" role="complementary">
  <?php dynamic_sidebar( 'in-header-widget-area' ); ?>
 </aside>

<?php }

Om du vill lägga till extra widgetområden i ditt tema, måste du lägga till samma typ av kod. Jag ska visa dig hur du gör det senare i det här inlägget.

Glöm inte att om ditt tema inte har så många widgetområden som du vill ha kan du alltid göra en av två saker:

• Hitta ett tema som har widgetområden där du vill ha dem.
• Koda in det nya widgetområdet i ditt tema eller ett barntema av ditt tema.

När du har widgetområden på alla platser i ditt tema där du vill ha dem kan du börja lägga till widgetar till dem.

Så här använder du widgetskärmen för att lägga till widgetar

Det finns två sätt att lägga till widgetar till din WordPress-sajt. Det första är att använda widgetskärmen i WordPress-admin.

Klicka på Utseende > Widgetar. Detta öppnar widgetskärmen.

För att lägga till en widget kan du göra en av två saker:

• Dra över den från listan över widgetar på vänster sida till det relevanta widgetområdet.
• Klicka på widgeten du vill lägga till, och du ser en lista över var du kan lägga till den. Välj det widgetområde du vill ha och klicka på Lägg till widget.

Du kan sedan behöva redigera var widgeten placeras inom widgetområdet.

Du kan lägga till så många widgetar du vill i varje widget område, men gå inte överstyr. Du kan dra omkring dem inne i widgetområdet för att få dem i rätt ordning. Du kan också dra dem från ett widgetområde till ett annat om du bestämmer dig för att du inte gillar hur de ser ut.

Du kan också använda tangentbordet för att lägga till widgetar med widgetskärmen, så om du inte har tillgång till en mus kan du fortfarande lägga till widgetar.

Lägga till och redigera widgetar i Tillgänglighetsläge

Om du inte kan använda en mus kan du använda widgetskärmen med ett tangentbord.

Sätt först skärmen i tillgänglighetsläge genom att klicka på (eller tabba till och välja)  Aktivera tillgänglighetsläge-länken längst upp till höger på skärmen.

The screen will then change to reflect the fact that you’re in accessibility mode.

Du kan sedan navigera mellan delar av skärmen med hjälp av Tabb-knappen, och tryck på Enter för att välja ett objekt och agera på det. Du kan antingen tabba till en widget, klicka Enter på Lägg till-länken och välj sedan var du vill lägga till den, eller tabba till widgetområdet och klicka på Enter på Redigera-länken.

Så här använder du WordPress Customizer för att lägga till widgetar

Att använda Customizer för att lägga till widgetar istället för widgetskärmen innebär att du kan se dina widgetar när du lägger till dem. Detta gör det lättare att se hur dina widgetar kommer att se ut och att flytta omkring dem mellan widgetområden om du vill.

Klicka på adminmenyn Utseende > Anpassa. Alternativt, från adminfältet längst upp på skärmen på webbplatsen (förutsatt att du är inloggad) klickar du bara på Anpassa. Detta öppnar Customizern.

Klicka nu på Widget och du kommer att se en lista över alla widgetområden i ditt tema. Klicka på widgetområdet där du vill lägga till en widget och klicka på Lägg till en widget.

Detta ger dig en lista över alla widgetar som är tillgängliga för din webbplats. Det inkluderar alla inbyggda widgetar som kom med WordPress plus alla widgetar du har lagt till via plugins.

Välj widgeten du vill lägga till i det widgetområdet och du ser det i förhandsgranskningsskärmen på höger sida.

Du kan ändra ordning på widgetarna genom att dra dem upp och ner på vänster sida eller genom att klicka på Ordna-länken under listan med widgetar och klicka sedan på pilarna för att flytta dem upp och ner.

När du har lagt till widgetar via Customizer, glöm inte att klicka på Publicera-knappen längst upp till vänster så att dina ändringar sparas. Om du lämnar Customizern utan att göra detta kommer ingen av dina ändringar att återspeglas på den levande webbplatsen.

När du har lagt till dina widgetar, ta en titt på dem och kolla hur de passar in i din siddesign. Om du har lagt till för många widgetområden kan det se lite rörigt ut. Du måste antingen ta bort några av dem eller så kan du flytta dem från ett widgetområde till ett annat.

Det är verkligen lätt att göra detta i widgetskärmen, där du kan dra widgetar mellan widgetområden.

Så här lägger du till en widget på en viss sida

Vissa teman inkluderar widgetområden som bara är till för specifika sidor, som startsidan. Men tänk om du vill lägga till en widget på bara en sida på din webbplats?

Du kan göra detta i Gutenbergs inläggs- och sidredigerare.

Lägg till ett nytt block på det vanliga sättet och sedan välja blocktypen Widget.

Du kan sedan välja mellan många av de widgetar du aktiverat för din webbplats, och lägga till innehållet i ditt inlägg eller sida. Det är verkligen användbart om du vill lägga till en formulärwidget, en uppmaning till handling-widget eller en lista över dina senaste inlägg.

Så här redigerar du widgetar

När du väl har lagt till widgetar på din webbplats kan du göra ändringar i dem. Enskilda widgetar kommer att ha inställningar du kan komma åt via antingen widgetskärmen eller Customizer (det spelar ingen roll vilken av dessa du använde för att lägga till widgeten.)

Vissa widgetar innehåller inga inställningar, men andra har inställningar för widgettiteln till exempel eller antalet inlägg som visas. Vissa är mer komplicerade och kräver att du ställer in widgeten på en separat inställningssida. Kolla dokumentationen från pluginutvecklaren.

Alternativ för redigering av widgetplugins inkluderar:

• Redigera inställningarna för pluginet.
• Flytta widgeten från ett widgetområde till ett annat.
• Ta bort widgeten. Du har två alternativ för detta, som vi kommer att titta på inom kort.

För att redigera inställningarna för widgeten, hitta den widgeten i widgetskärmen eller customizern, och helt enkelt redigera alla alternativ som tillhandahålls.

För att flytta widgeten från ett område till ett annat, öppna widgetskärmen och dra den från ett widgetområde till ett annat. I tillgänglighetsläge, navigera till pilen till höger om widgeten och välj från alternativen.

Ta bort widgetar

Om du vill ta bort en widget på widgetskärmen hittar du widgeten och klickar på länken Ta bort längst ned till vänster i rutan widgetinställningar.

För att ta bort en widget i Customizer, hitta widgeten i dess widgetområde. Klicka på pilen till höger om Widgetens namn och klicka sedan på Ta bort-länken i det nedre vänstra hörnet av widgetinställningarna.

Du kan också ta bort en widget från ett widgetområde men ändå göra den tillgänglig att använda senare genom widgetskärmen.

Bläddra ner till Inaktiva widgetar-området långt ner på skärmen. Dra widgetar till detta område för att ta bort dem från widgetområdet men behåll dem som utkast med sina aktuella inställningar. Du kan sedan alltid dra tillbaka dem till ett widgetområde om du vill i framtiden.

Om du byter teman och ditt nya tema har olika widgetområden kommer alla widgetar som inte passar i widgetområdena i det nya temat automatiskt att flyttas till listan Inaktiva widgetar av WordPress.

Så här lägger du till ett nytt widgetområde till ditt tema

Om ditt tema inte har widgetområden där du vill ha dem, kan du alltid lägga till ditt eget. Du gör detta genom att lägga till två bitar kod.

Låt oss lägga till ett widgetområde under innehållet.

Skapa widgetområdet i ditt temas funktionsfil

Det första steget är att ställa in widgetområdet med hjälp av  register_widget() -funktionen.

Om du använder ett tredjepartstema (här är ett urval av de bästa), måste du skapa ett barntema för att göra detta. Anledningen är att om du uppdaterar temat i framtiden kommer alla dina förändringar att gå förlorade.

Om du arbetar med ditt eget tema, kan du helt enkelt redigera temat.

Börja med att öppna ditt temas functions.php-fil. Lägg till den här koden längst ner i filen.

function kinsta_register_widgets() {
 
 register_sidebar( array(
  'name' => __( 'After Content Widget Area', 'kinsta' ),
  'id' => 'after-content-widget-area',
  'description' => __( 'Widget area after the content', 'kinsta' ),
  'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',

 ) );

}

add_action( 'widgets_init', 'kinsta_register_widgets' );

Spara nu din functions.php-fil. Om du går till widgetskärmen eller Customizern hittar du det nya widgetområdet tillgängligt för nya widgetar.

Men om du gör det här kommer de inte att dyka upp på sidan. Detta beror på att du måste lägga till lite kod till din temas mallfil också.

Lägga till widgeten till ett temas mallfil

Det första steget är att ta reda på vilken temamallfil du behöver använda.

• Om du lägger till ett extra sidofält måste du lägga till den här koden till din sidebar.php-fil.
• Om du lägger till ditt widgetområde före eller efter innehållet måste du lägga till det i den temamallfil som matar ut innehållet.
• Om du lägger till ett widgetområde i ditt sidhuvud måste du lägga till koden i din header.php-fil.
• Om ditt nya widgetområde bara ska vara på en sida på din webbplats eller för en typ av innehåll måste du använda WordPress mallhierarki för att räkna ut exakt vilken mallfil du behöver antingen använda eller skapa och sedan redigera den. Så om du till exempel vill lägga till widgetområden till din startsida måste du skapa en front-page.php-fil och lägga till ditt widgetområde där.

När du har identifierat vilken mallfil du behöver redigera och exakt var du behöver ha koden för widgetområdet, lägg till följande kod. När det gäller ett widgetområde efter innehållet lägger vi till det i post.php och page.php-filerna i vårt tema:

if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>

 aside class="after-content widget-area full-width" role="complementary">
  <?php dynamic_sidebar( 'after-content-widget-area' ); ?>
 </aside>

<?php }

Spara nu din mallfil/dina mallfiler.

Observera att din kod kommer att skilja sig från min beroende på vad du har kallat ditt widgetområde och vilka element du vill placera i den. Jag brukar använda ett aside-element för att jag tycker att de är gjorda för sidofält och widgetområden.

Ninjatips: om du flyttar slutet på ditt containerelement för innehållet till början av sidofältet och/eller sidfoten, kan du lägga till det där och du behöver bara lägga till det en gång.

Om du nu tar en titt på din webbplats, märker du att alla widgetar du lagt till ditt widgetområde kommer att dyka upp på rätt plats. Om de inte är på rätt plats, gå tillbaka och redigera mallfilerna, se till att koden är på den plats där du vill ha den. Du kan också behöva redigera din CSS för att få det att se ut som du vill.

Så här kodar du widgetar med widget-API:n

So now you know how to pick widgets for your site, how to add them to your site, and how to register new sidebars or widget areas. The next step is to learn how to create a WordPress widget.

Sometimes, you might find there isn’t a plugin available to create the exact widget that you want on your site. That means you’ll have to code it yourself.

In this example, I’m going to show you how to code a really simple call-to-action widget.

Översikt över widget-API:n

Widget-API:n i WordPress innehåller all kod du behöver för att registrera, skapa och koda widgetar. Widget-API:n innehåller:

• Klasser för att bygga nya widgetar.
• Funktioner för att registrera widgetar och distribuera dem på din webbplats.
• Funktioner för att avregistrera widgetar, till exempel från ett överordnat tema.

Här kommer vi att använda en klass för att bygga en widget. Det första steget är att skapa ett plugin att spara widgeten i.

Skapa ett plugin för din WordPress-widget

För att skapa din egen widget måste du koda ett plugin. Lägg inte till koden för en ny widget till ditt tema, eftersom widgetar handlar om funktionalitet och inte om utseende. Om du ändrat ditt tema i framtiden vill du fortfarande kunna komma åt widgeten.

Börja med att skapa ett tomt plugin. Skapa en pluginmapp i din  wp-content/plugins -katalog och lägg till en tom fil där. Ge den ett lämpligt namn. Öppna filen och lägg till den här koden.

<?php
/**
 * Plugin Name: Kinsta Call to Action Widget
 * Plugin URI: https://rachelmccollin.com
 * Description: A simple call to action widget.
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: https://rachelmccollin.co.uk
 */

Du måste redigera författar-URI och plugin-URI till dina egna namn och adresser. Det kommer att skapa ett plugin som du kan aktivera via Pluginskärmen.

Men om du aktiverar det kommer inget att hända. Du kommer att behöva lägga till lite kod till ditt plugin.

Skapa en klass för widgeten

Koden för widgeten ska vara i en klass. Så lägg till den härnäst.

class kinsta_Cta_Widget extends WP_Widget {

}

Skapa Konstruktörsfunktionen

Det första som ska vara i klassen är konstruktörsfunktionen för att skapa widgeten. Lägg till detta inuti parenteserna i klassen.

//widget constructor function

function __construct() {

 $widget_options = array (
  'classname' => 'kinsta_cta_widget',
  'description' => 'Add a call to action box with your own text and link.'
 );

 parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );

}

Detta börjar bygga widgeten.

Skapa formuläret för att mata ut widgeten

Därefter behöver vi ett formulär som kommer att användas av widgetskärmen och Customizer för att skapa widgeten. Lägg till detta, fortfarande inom parenteserna.

//function to output the widget form

function form( $instance ) {

 $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
 $link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
 $text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>

<p>
 <label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" /></p>

<?php }

Detta ger användarna ett formulär som de kan använda för att lägga till text och en länk till uppmaningen till handling-rutan.

Skapa funktionen för att spara widgeten

Nu måste du spara allt som matas in i det formuläret. Lägg till detta.

//function to define the data saved by the widget

function update( $new_instance, $old_instance ) {
 $instance = $old_instance;
 $instance['title'] = strip_tags( $new_instance['title'] );
 $instance['text'] = strip_tags( $new_instance['text'] );
 $instance['link'] = strip_tags( $new_instance['link'] );
 return $instance;          

}

Detta sparar de uppgifter som användarna matar in i widgetinställningarna.

Skapa funktionen för att mata ut widgeten

Nu måste du lägga till koden som visar widgeten på webbplatsen. Återigen, lägg till detta inuti parenteserna:

//function to display the widget in the site

function widget( $args, $instance ) {
 //define variables
 $title = apply_filters( 'widget_title', $instance['title'] );
 $text = $instance['text'];
 $link = $instance['link'];

 //output code
 echo $args['before_widget'];
 ?>

 <div class="cta">
  <?php if ( ! empty( $title ) ) {
  echo $args['before_title'] . $title . $args['after_title'];
};
  echo '<a href="' . $link . '">' . $text . '</a>';
  ?>
 </div>

 <?php
 echo $args['after_widget'];

}

Registrera widgeten

Nu har du din klass och det är dags att registrera WordPress-widgeten så att den fungerar. Lägg till den här koden utanför klassen.

//function to register the widget
function kinsta_register_cta_widget() {

 register_widget( 'kinsta_Cta_Widget' );
  
}
add_action( 'widgets_init', 'kinsta_register_cta_widget' );

Spara nu din pluginfil. Gå till widgetskärmen och du ser widgeten redo att användas.

Om du lägger till den i ett widgetområde och lägger till text och en länk till den, kommer den att matas ut på den levande webbplatsen.

Den kanske inte ser så bra ut just nu. Du måste lägg till lite CSS för att styla den.

Lägga till CSS till widgeten

För att lägga till CSS till ditt plugin, måste du skapa en stilmall och köa det i ditt plugin. Lägg till detta i din pluginfil före klassen.

function kinsta_widget_enqueue_styles() {

 wp_register_style( 'widget_cta_css', plugins_url( 'css/style.css', __FILE__ ) );
 wp_enqueue_style( 'widget_cta_css' );

}
add_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' );

Nu måste du lägga till en style.css-fil inuti pluginmappen och lägga till styling. Jag lämnar det åt dig!

Du har nu en enkel Uppmaning till handling-knapp du kan lägga till i ett widgetområde på din webbplats. Om du lägger till den i sidofältet, till exempel, kommer folk att kunna använda den för att komma till din registreringssida från var som helst på webbplatsen.

Du kan skapa mer komplexa widgetar med extra inställningar och alternativ, men detta ger dig en uppfattning om hur du kommer igång med att skapa din egen widget.

Om du vill se min kod för detta plugin, inklusive styling, kan du hitta det på Github. Om du bara nu börjat med kod är det här en djupgående guide om Git vis GitHub och hur man kommer igång med båda två.

Sammanfattning

Widgetar är en av mina favoritfunktioner i WordPress. De kan liva upp din webbplats och hjälpa dig att få fler registreringar eller konvertera fler besökare till kunder. Du kan lägga till WordPress-widgetar till alla befintliga widgetområden i ditt tema, eller så kan du lägga till extra widgetområden för att få fler widgetar på fler ställen.

Det finns också gott om platser att hitta widgetar på. WordPress levereras med ett antal av dem förinstallerade, och du kan installera fler via plugins. Men det är inte allt; om du känner dig hemma med det kan du också koda dina egna widgetar med Widgets-API:n.

Nu är det din tur: hur använder du WordPress-widgetar på din webbplats? Hur många använder du?