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 blockredigeraren. Oavsett om du anpassar din sidofält, sidfot eller något widgetområde, kan du nu skapa vackra, funktionella widgets 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?

Widgets låter dig lägga till rikt innehåll utanför huvudområdet för sidor och inlägg. Varje WordPress-tema är annorlunda, men du kan vanligtvis lägga till widgets i områden som sidfoten, sidhuvudet och sidofältet.

Många webbplatser använder dessa områden för att visa en om-sektion, visa sina mest populära inlägg, lägga till en e-postprenumerationsformulär och mer.

WordPress låter dig lägga till ett brett utbud av block i alla widget-redo områden, och många WordPress-plugins lägger också till sina egna block.

Om du till exempel använder Smash Balloon Twitter Feed, kan du bädda in de senaste tweetsen i vilket widget-redo område som helst med hjälp av pluginets Twitter Feed-block.

Ibland kanske du dock vill skapa en anpassad widget som visar rikt multimediainnehåll för dina besökare. Du kanske till exempel vill ladda upp ditt författarfoto och sedan använda det för att skapa en författarbiografi-widget, komplett med länkar till dina olika sociala medieprofiler.

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 den metod som passar ditt tema:

• Metod 1: Använda pluginet Widgets Options (fungerar med alla WordPress-teman)
• Metod 2: Använda Fullständiga webbplatsredigeraren (fungerar med blockaktiverade WordPress-teman)
• Vanliga frågor

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

Det enklaste sättet att skapa en anpassad widget ä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 skapa en anpassad widget utan att behöva skriva någon kod.

Först måste du installera och aktivera pluginet Widget Options. 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-redo områden i ditt WordPress-tema. De alternativ du ser kan variera beroende på ditt tema.

Du kommer också att se alla widgets du kan lägga till på din webbplats. Vi kommer att använda Text-widgeten för den här guiden, så dra och släpp den helt enkelt till valfritt widget-redo område.

Du kommer nu att se en liten popup.

Den här popupen är i princip en miniatyrsida 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, med mera.

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 föredrar det kan du bygga en anpassad widget visuellt med hjälp av WordPress anpassare.

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 'Text' 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 temaanpassaren i din WordPress-instrumentpanel, se vår guide om hur du åtgärdar den saknade temaanpassaren i WordPress-administrationen.

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

Om du använder ett blockaktiverat WordPress-tema, kan du lägga till block i valfritt widget-redo område med hjälp av fullständig webbplatsredigerare.

På så sätt kan du skapa anpassade widgets genom att arrangera standard WordPress-block i ett widget-redo område som sidofältet. 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 den vanliga WordPress-widgetredigeraren eller anpassaren. 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, klicka på det blå '+' ikonen och hitta sedan det första blocket du vill använda i din anpassade widget.

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 arrangera en bild bredvid lite text i en snygg 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 blocket du vill använda, dra och släpp det bara till ett widget-redo område som sidofältet och sidfoten.

Redigeraren för hela webbplatsen ger dig tillgång till hela uppsättningen av WordPress-verktyg och inställningar. Det innebär att du kan lägga till en knapp för uppmaning till handling, text, länkar, bilder och annat innehåll till ett bredare utbud av block.

Med det sagt bör du kunna skapa exakt den widget du hade i åtanke. Lägg helt enkelt till fler block och innehåll i det widget-redo området 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 den nya anpassade widgeten live.

Vanliga frågor

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 webbplatsens 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 man skapar en landningssida med WordPress.

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.