Hur man använder en visuell redigerare för att skapa widgetar i WordPress

Visuell redigering har förändrat hur vi skapar widgets.

Det som tidigare krävde anpassad kod kan nu göras med bara några klick, vilket gör widgetskapande tillgängligt för alla.

Den visuella redigeraren i WordPress har blivit allt kraftfullare, särskilt med de senaste uppdateringarna av Gutenberg-blockredigeraren.

Detta innebär att det nu är mer intuitivt än någonsin att skapa block-widgets. Oavsett om du anpassar din sidofält, sidfot eller något annat widget-område, kan du nu lägga till vackert, funktionellt innehåll utan att röra en enda kodrad.

I den här guiden visar vi dig exakt hur du använder den visuella redigeraren för att skapa widgets för din WordPress-webbplats.

Varför använda visuell redigerare för att skapa widgets i WordPress?

Att använda den visuella redigeraren gör det enkelt att skapa anpassade widgets med rikt innehåll var som helst på din webbplats utan att skriva kod.

Du kan lägga till dessa widgets i widget-redo områden som sidfoten, sidhuvudet eller sidofältet, beroende på ditt tema.

Widgets är perfekta för att visa saker som en om-sektion, populära inlägg, formulär för nyhetsbrevsanmälningar eller till och med inbäddade sociala flöden.

WordPress låter dig lägga till block i dessa områden, och många plugins tillhandahåller sina egna anpassade block.

Till exempel, med pluginet Smash Balloon Twitter Feed kan du bädda in dina senaste tweets var som helst med dess block.

Du kan också skapa helt anpassade widgets, som en författarbiografi med foto och länkar till sociala profiler, för att göra din webbplats mer engagerande.

Med det sagt, låt oss se hur du kan använda en visuell redigerare för att skapa anpassade widgets i WordPress.

Använd helt enkelt länkarna nedan för att hoppa till metoden som passar ditt tema:

Metod 1: Använda pluginet Widgets Options (fungerar med alla WordPress-teman)

Det enklaste sättet att lägga till anpassat innehåll i dina widget-områden är att använda pluginet Widget Options.

Det lägger till massor av extra inställningar till standard WordPress visuella widgetredigerare, inklusive möjligheten att visa olika widgets beroende på användarens roll, dölja WordPress-widgets på mobilen och mer.

Det lägger också till en Text-widget som du kan anpassa med dina egna länkar, bilder, formatering och mer. Detta gör att du kan lägga till rikt, anpassat innehåll i dina widget-områden utan att behöva skriva någon kod.

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

Efter aktivering, gå till sidan Utseende » Widgets i din WordPress-instrumentpanel.

Du kommer nu att se en lista över alla widget-områden i ditt WordPress-tema. Widget Options-pluginet lägger till en förbättrad Text-widget.

Hitta denna widget och dra och släpp den helt enkelt till valfritt widget-område, som sidofältet eller sidfoten.

När du gör det kommer Widget Options-pluginet att öppna en liten popup.

Denna popup fungerar som en mini-sida eller inläggsredigerare, så den bör se bekant ut.

Till att börja med kan du skriva in en titel, som kommer att visas ovanför widgeten.

Därefter kan du skriva text direkt i den lilla redigeraren, lägga till länkar och bilder, ändra formateringen, lägga till punktlistor och numrerade listor och mer.

Du kan också visa eller dölja widgets på specifika WordPress-sidor och lägga till anpassade stilar till WordPress-widgeten.

När du är nöjd med widgetens inställningar, klicka på länken 'Klar' för att spara dess inställningar.

Nu, om du besöker din webbplats, kommer du att se den nya rich-text-widgeten live.

Om du använder ett klassiskt WordPress-tema kan du också skapa anpassat innehåll för widget-områden visuellt med WordPress Customizer.

Gå helt enkelt till Utseende » Widgets, men den här gången klickar du på 'Hantera med Live-förhandsgranskning'.

Detta öppnar anpassaren med widgetinställningarna redan valda.

Du kan nu klicka på det område där du vill lägga till widgeten.

Klicka sedan på 'Lägg till en widget', vilket öppnar en panel som visar alla olika widgets.

Hitta helt enkelt den klassiska Text-widgeten och klicka på den för att lägga till den på din webbplats.

Detta öppnar en liten redigerare där du kan lägga till text, länkar, media och mer.

När du gör ändringar i redigeraren uppdateras förhandsgranskningen automatiskt.

När du är nöjd med hur widgeten ser ut, klicka på knappen ‘Publicera’ för att göra den live på din WordPress-blogg eller webbplats.

Om du inte hittar anpassningsverktyget i din WordPress-instrumentpanel, se vår guide om hur du åtgärdar det saknade anpassningsverktyget i WordPress-admin.

Metod 2: Använda Fullständiga webbplatsredigeraren (fungerar med blockaktiverade WordPress-teman)

Om du använder ett block-aktiverat WordPress-tema, kan du sedan lägga till block i vilket område som helst på din webbplats mallar med hjälp av hela webbplatsredigeraren.

På så sätt kan du skapa anpassat innehåll för områden som sidofältet genom att ordna standardiserade WordPress-block direkt i ditt temas mallar. Du behöver inte heller installera ett separat WordPress-plugin.

Det är också ett sätt att lägga till widgets i områden som du inte kan redigera med standard WordPress widgetredigerare eller anpassningsverktyg. Du kan till exempel lägga till widgets i din 404-sidmall.

För att komma igång, gå till Utseende » Redigerare i WordPress-instrumentpanelen.

Som standard visar redigeraren för hela webbplatsen ditt temas hemmamall, men du kan lägga till widgets och block i vilket område som helst.

För att se alla tillgängliga alternativ, välj antingen 'Mallar' eller 'Mall-delar'.

Du kan nu klicka på mallen eller malldelen du vill redigera.

WordPress kommer nu att visa en förhandsgranskning av designen. För att fortsätta och redigera den här mallen, klicka på den lilla pennikonen.

När det är gjort klickar du på den blå ikonen med ett plus (+) och letar sedan upp det första blocket du vill använda för ditt anpassade innehåll.

Du kan använda vilken kombination av block du vill, men om du planerar att använda en bild och text, rekommenderar vi att du börjar med blocket Media & Text.

Detta gör att du enkelt kan ordna en bild bredvid lite text i en fin layout. Med det i åtanke är blocket Media & Text perfekt för att skapa en författarinformationsruta, som du kan se på följande bild.

Efter att ha valt det block du vill använda, dra och släpp det bara i en sektion av din mall, till exempel sidofältet och sidfoten.

Fullständig webbplatsredigerare ger dig tillgång till hela uppsättningen av WordPress-verktyg och inställningar. Detta innebär att du kan lägga till en uppmaningsknapp, text, länkar, bilder och annat innehåll till ett bredare utbud av block.

Med det sagt bör du kunna skapa exakt det anpassade innehåll du hade i åtanke. Lägg bara till fler block och innehåll i din mall tills du är nöjd med hur det ser ut.

För fler idéer om hur du använder ditt temas widget-redo områden, se vår checklista över saker att lägga till i sidfoten på din WordPress-webbplats.

När du är nöjd med ändringarna du har gjort, klicka på 'Spara'.

Nu, om du besöker din WordPress-webbplats, kommer du att se det nya anpassade innehållet live i din mall.

Vanliga frågor om att använda en visuell redigerare för att skapa widgets i WordPress

Här är några frågor som våra läsare ofta ställer om att skapa widgets med den visuella redigeraren:

Behöver jag installera ett plugin för att skapa widgets visuellt?

Inte alltid. Om du använder ett blocktema kan du lägga till widgets med Full Site Editor utan extra plugins.

Men om ditt tema inte stöder redigeraren för hela webbplatsen, ger användning av ett plugin som Widget Options dig mer kontroll över var och hur dina widgets visas.

Varför kan jag inte se ändringar på min widget direkt?

Om din widget inte uppdateras omedelbart, försök att rensa din webbplats cache och webbläsarens cache. Vissa cache-plugins eller CDN kan fördröja ändringar.

Att använda Live Preview-alternativet är ett bra sätt att bekräfta dina widgetuppdateringar innan du publicerar.

Kan jag lägga till plugins egna block (som Smash Balloon eller WPForms) i ett widgetområde?

Absolut. De flesta moderna plugins, som Smash Balloon, WPForms eller MonsterInsights, inkluderar sina egna block som kan placeras i vilket widget-redo område som helst.

Du kan dra dessa block till din sidofält, sidfot eller rubrik precis som vilket annat block som helst.

Vad är skillnaden mellan att använda Widget Options-pluginet och Full Site Editor?

Widget Options-pluginet fungerar med alla teman, inklusive äldre som inte stöder FSE.

Full Site Editor fungerar bara med blockaktiverade teman och erbjuder större designflexibilitet eftersom du visuellt kan redigera rubriker, sidfötter och mallar.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt använder den visuella redigeraren för WordPress-widgets. Du kanske också vill se vår guide om tips för att bemästra WordPress innehållsredigerare och hur du skapar en landningssida med WordPress.

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