L\u00e5t oss f\u00f6rst b\u00f6rja med att identifiera vad WordPress-widgetar \u00e4r f\u00f6r n\u00e5got.<\/p>\n
Vad \u00e4r WordPress-widgetar?<\/h2>\n
I WordPress \u00e4r widgetar utdrag av inneh\u00e5ll som finns utanf\u00f6r sidan eller inl\u00e4ggets inneh\u00e5llsfl\u00f6de.<\/p>\n
Widgetar inneh\u00e5ller information, navigering eller media som \u00e4r separat fr\u00e5n ett enskilt inl\u00e4gg eller en sida. I de flesta fall kommer varje widget att visas p\u00e5 varje sida p\u00e5 webbplatsen, men du kan ocks\u00e5 registrera widgetomr\u00e5den f\u00f6r specifika sidor som startsidan.<\/p>\n
F\u00f6r att l\u00e4gga till en widget p\u00e5 din webbplats m\u00e5ste du l\u00e4gga till den i ett widgetomr\u00e5de. Widgetomr\u00e5den skapas av ditt tema eftersom de ber\u00f6r design och layout p\u00e5 din webbplats och inte funktionalitet.<\/p>\n
De flesta WordPressteman<\/a>\u00a0har widgetomr\u00e5den i sidof\u00e4ltet och sidfoten, \u00e4ven om vissa kommer att ha flera widgetomr\u00e5den p\u00e5 m\u00e5nga st\u00e4llen, till exempel under eller \u00f6ver inneh\u00e5llet eller i headern.<\/p>\n Sk\u00e4rmdumpen nedan, av en av mina egna webbplatser, visar widgetar i sidof\u00e4ltet och sidfoten.<\/p>\n WordPress levereras med en massa f\u00f6rinstallerade widgetar s\u00e5 att du kan anv\u00e4nda dem utan att beh\u00f6va\u00a0installera eventuella plugins<\/a>\u00a0eller skriva n\u00e5gon kod. Men du kan ocks\u00e5 l\u00e4gga till m\u00e5nga fler widgetar genom att installera plugins eller koda din egen.<\/p>\n De kan omfatta ett stort antal inneh\u00e5llstyper, s\u00e5som media, sociala medie-fl\u00f6den, navigering, s\u00f6k, kartor och mycket mer. Det finns inte mycket du kan vilja ha p\u00e5 din webbplats som du inte kan hitta en widget f\u00f6r. Faktum \u00e4r att den st\u00f6rsta utmaningen ofta \u00e4r att v\u00e4lja mellan alla alternativ och inte g\u00e5 \u00f6verstyr.<\/p>\n Du b\u00f6r anv\u00e4nda en widget n\u00e4r du vill l\u00e4gga till extra inneh\u00e5ll till en eller flera sidor p\u00e5 din webbplats (och n\u00e4r jag s\u00e4ger sida, inkluderar jag inl\u00e4gg, arkiv etc.), men det \u00e4r inte en del av inneh\u00e5llet p\u00e5 den sidan. De \u00e4r s\u00e4rskilt anv\u00e4ndbara f\u00f6r inneh\u00e5ll som du vill visa p\u00e5 varje sida p\u00e5 webbplatsen, till exempel en lista \u00f6ver dina senaste inl\u00e4gg, en\u00a0kundvagn<\/a>, eller en uppmaning till handling-knapp.<\/p>\n T\u00e4nk p\u00e5 hur m\u00e5nga anv\u00e4ndare som beh\u00f6ver tillg\u00e5ng till varje widget och hur viktigt det \u00e4r n\u00e4r du best\u00e4mmer var du ska placera den.\u00a0Widgetar i sidof\u00e4ltet<\/a>\u00a0kommer att vara mer framtr\u00e4dande \u00e4n widgetar i sidfoten, som vissa anv\u00e4ndare kanske inte ens ser.<\/p>\n S\u00e5 en senaste inl\u00e4gg-widget eller uppmaning till handling-widget kan passa b\u00e4ttre i sidof\u00e4ltet d\u00e4r folk har st\u00f6rre chans att interagera med dem, medan ett socialt medie-fl\u00f6de kan vara i sidfoten.<\/p>\n Om ditt tema ocks\u00e5 har s\u00e4rskilda widgetomr\u00e5den f\u00f6r startsidan, kanske du borde anv\u00e4nda dessa f\u00f6r att navigera din webbplats avdelningar, listor \u00f6ver relevant inneh\u00e5ll, eller media, som en v\u00e4lkomstvideo f\u00f6r webbplatsen.<\/p>\n Det b\u00e4sta s\u00e4ttet att f\u00f6rst\u00e5 de m\u00f6jligheter som WordPress-widgetar erbjuder \u00e4r att titta p\u00e5 n\u00e5gra exempel p\u00e5 dem. L\u00e5t oss ta en titt p\u00e5 elva typer av widgetar som du ofta ser p\u00e5 WordPress-sajter.<\/p>\n Senaste inl\u00e4gg-widgeten \u00e4r m\u00f6jligen den vanligaste widgeten f\u00f6r olika bloggar.<\/p>\n Den l\u00e5ter dig visa en lista \u00f6ver dina senaste inl\u00e4gg i sidof\u00e4ltet eller sidfoten p\u00e5 varje sida p\u00e5 din webbplats, vilket \u00f6kar m\u00f6jligheten att bes\u00f6kare kommer att bl\u00e4ddra p\u00e5 webbplatsen och l\u00e4sa flera inl\u00e4gg.<\/p>\n Senaste inl\u00e4gg-widgeten \u00e4r f\u00f6rinstallerad i WordPress. Den l\u00e5ter dig st\u00e4lla in hur m\u00e5nga inl\u00e4gg du vill visa och vilken rubrik du vill ge widgeten.<\/p>\n Om du vill l\u00e4gga till extra funktionalitet kan du installera ett plugin f\u00f6r en alternativ widget som\u00a0WordPress Popular Posts<\/a>, som visar det mest popul\u00e4ra inneh\u00e5llet. Alternativt\u00a0uppdateras Advanced Random Posts<\/a>-widgeten varje g\u00e5ng anv\u00e4ndaren bes\u00f6ker en ny sk\u00e4rm.<\/p>\n Vill du visa bes\u00f6karna hur levande din webbplats \u00e4r och hur mycket publiken engagerar med ditt inneh\u00e5ll?<\/p>\n Widgeten Senaste kommentarer visar de senaste kommentarerna p\u00e5 din webbplats, vilket ger bes\u00f6karna m\u00f6jlighet att navigera direkt till dessa kommentarer och delta i diskussionen.<\/p>\n Senaste kommentarer-widgeten f\u00f6ljer med WordPress. \u00c5terigen, om du vill l\u00e4gga till extra funktionalitet kan du installera en tredje parts kommentarplugin<\/a> s\u00e5som\u00a0WP Social Comments<\/a>-widgeten som l\u00e5ter folk kommentera med sitt Facebook-konto: bra f\u00f6r sociala medie-engagemang.<\/p>\n En mycket bra anv\u00e4ndning av en widget \u00e4r att uppmuntra folk att utf\u00f6ra n\u00e5got, och du kan g\u00f6ra detta med en uppmaning till handling-widget.<\/p>\n Din widget kan vara en enkel knapp, eller s\u00e5 kan du skapa n\u00e5got mer skr\u00e4ddarsydd med hj\u00e4lp av en textwidget eller HTML-widget, eller till och med en bildwidget, som alla kommer f\u00f6rinstallerade med WordPress.<\/p>\n P\u00e5 en av mina egna webbplatser har jag skapat en uppmaning till handling-widget som uppmuntrar mina bes\u00f6kare att registrera sig f\u00f6r min mejlinglista. Detta anv\u00e4nder den inbyggda HTML-widgeten d\u00e4r jag har inkluderat en bild, lite text och en knapp som jag har kodat i HTML.<\/p>\n Du kan ocks\u00e5 anv\u00e4nda widgetar f\u00f6r att uppmuntra m\u00e4nniskor att navigera p\u00e5 din webbplats.<\/p>\n Det finns n\u00e5gra alternativ f\u00f6r detta: kategori- eller taggmolns-widgetar och navigeringsmeny-widgeten.<\/p>\n Med navigeringsmeny-widgeten kan du skapa en\u00a0Anpassad navigeringsmeny<\/a> som alternativ till huvudnavigeringsmenyn p\u00e5 din webbplats, och sedan l\u00e4gga till den i ett widgetomr\u00e5de.<\/p>\n Du kan till och med l\u00e4gga till din huvudnavigeringsmeny i ett widgetomr\u00e5de, \u00e4ven om det bara fungerar om du har en liten navigeringsmeny.<\/p>\n Att l\u00e4gga till en navigeringsmeny till sidfoten p\u00e5 din webbplats kommer att uppmuntra bes\u00f6kare att n\u00e5 slutet av ett inl\u00e4gg f\u00f6r att navigera p\u00e5 din webbplats. Det \u00e4r s\u00e4rskilt anv\u00e4ndbart f\u00f6r mobila anv\u00e4ndare som kan beh\u00f6va bl\u00e4ddra en hel del f\u00f6r att komma tillbaka till huvudnavigeringsmenyn<\/a> efter att ha n\u00e5tt slutet av ett inl\u00e4gg.<\/p>\n Alternativt kan du anv\u00e4nda den inbyggda kategori-widgeten f\u00f6r att visa en lista \u00f6ver kategorierna p\u00e5 din webbplats, eller taggmoln-widgeten f\u00f6r att g\u00f6ra det enkelt att komma \u00e5t taggarkiv.<\/p>\n Att l\u00e4gga till media<\/a>\u00a0till sidof\u00e4ltet eller sidfoten kommer att liva upp din webbplats och ge anv\u00e4ndarna n\u00e5got att titta p\u00e5 eller interagera med.<\/p>\n Du kan anv\u00e4nda den inbyggda bildwidgeten f\u00f6r att visa en bild i sidof\u00e4ltet eller sidfoten, och det l\u00e5ter dig g\u00f6ra den bilden till en l\u00e4nk ocks\u00e5.<\/p>\n Alternativt kan du streama video fr\u00e5n YouTube eller Vimeo direkt i widgetomr\u00e5det p\u00e5 din webbplats med hj\u00e4lp av videowidgeten. Detta \u00e4r s\u00e4rskilt anv\u00e4ndbart om din webbplats har speciella widgetomr\u00e5den f\u00f6r startsidan, men kan ocks\u00e5 vara bra i sidfoten som ett s\u00e4tt att f\u00e5nga m\u00e4nniskors uppm\u00e4rksamhet n\u00e4r de n\u00e5r slutet av ett inl\u00e4gg.<\/p>\n Om du vill interagera med personer som bes\u00f6ker din webbplats via sociala medier, l\u00e4gg till dina sociala medie-fl\u00f6den till sidof\u00e4ltet eller sidfoten p\u00e5 din webbplats f\u00f6r att visa att du \u00e4r aktiv p\u00e5 sociala medier och uppmuntra dem att gilla eller f\u00f6lja dig d\u00e4r.<\/p>\n Ett s\u00e4tt att f\u00e5 tillg\u00e5ng till sociala medie-widgetar f\u00f6r de st\u00f6rsta plattformarna (Facebook, Twitter, Instagram) \u00e4r att\u00a0installera pluginet Jetpack<\/a>, vilket inkluderar alla dessa och mycket mer.<\/p>\n Alternativt har alla sociala medieplattformar sina egna plugins, tillg\u00e4ngliga gratis via pluginkatalogen. Eller s\u00e5 kan du hitta\u00a0plugin fr\u00e5n tredje part<\/a>\u00a0som l\u00e5ter dig anpassa hur du visar ditt sociala mediefl\u00f6de.<\/p>\n Om du driven en\u00a0n\u00e4tbutik<\/a>\u00a0p\u00e5 din webbplats med hj\u00e4lp av plugin som WooCommerce<\/a> \u00e4r det en bra id\u00e9 att inkludera en kundvagnswidget s\u00e5 att anv\u00e4ndarna enkelt kan navigera till sin kundvagn var de \u00e4n \u00e4r i butiken.<\/p>\n Du kan l\u00e4gga detta i sidof\u00e4ltet d\u00e4r bes\u00f6kare enkelt kan se det, eller i sidhuvudet f\u00f6r \u00f6kad synlighet om ditt tema har ett widgetomr\u00e5de d\u00e4r.<\/p>\n E-handelsplugins<\/a>\u00a0som WooCommerce inkluderar kundvagnswidgetar och andra e-handelswidgetar som en del av pluginet, s\u00e5 n\u00e4r du har lagt till e-handelsfunktioner p\u00e5 din webbplats, hittar du dem i din Widget<\/strong>-sk\u00e4rm.<\/p>\n Om du vill att folk ska kontakta dig, st\u00e4lla fr\u00e5gor eller\u00a0anm\u00e4la sig till en e-postlista<\/a> kan du l\u00e4gga till ett formul\u00e4r i sidof\u00e4ltet.<\/p>\n Det ing\u00e5r inte n\u00e5gon formul\u00e4rwidget i WordPress men du kan l\u00e4gga till dem genom plugins, till exempel det kostnadsfria Contact Form 7<\/a>\u00a0eller det mycket kraftfulla premiumpluginet\u00a0Gravity Forms<\/a>.<\/p>\n Om ditt f\u00f6retag har en fysisk plats och du vill att folk ska kunna hitta dig enkelt \u00e4r det hj\u00e4lpfullt att l\u00e4gga till en kartwidget p\u00e5 webbplatsen.<\/p>\n Det finns ett antal gratis\u00a0Google Maps-widgetplugin<\/a>\u00a0eller andra kartplugin<\/a>\u00a0du kan anv\u00e4nda, till exempel\u00a0WP Google Maps<\/a>.<\/p>\n Om du inte vill installera ett plugin kan du\u00a0ocks\u00e5 ta inb\u00e4ddningskoden fr\u00e5n Google Maps och l\u00e4gga till den<\/a> med en HTML widget.<\/p>\n Om du driver en\u00a0medlemssajt<\/a> kommer en inloggningswidget att g\u00f6ra det enkelt att\u00a0logga in p\u00e5 din webbplats<\/a>\u00a0utan att beh\u00f6va g\u00e5 till en separat inloggningssida.<\/p>\n Meta-widgeten som kommer med WordPress inneh\u00e5ller en inloggningsl\u00e4nk men den inneh\u00e5ller ocks\u00e5 andra saker du kanske inte vill ha, s\u00e5 jag rekommenderar att du anv\u00e4nder ett separat plugin f\u00f6r detta fr\u00e5n pluginkatalogen.<\/p>\n Widgeten Login with Ajax<\/a>\u00a0ger dig ett inloggningsformul\u00e4r i din widget d\u00e4r bes\u00f6kare kan logga in p\u00e5 din webbplats fr\u00e5n vilken sida som helst.<\/p>\n En riktigt enkel men otroligt anv\u00e4ndbar widget \u00e4r\u00a0den S\u00f6kwidget<\/a> som kommer med WordPress.<\/p>\n L\u00e4gg till detta i sidof\u00e4ltet eller sidhuvudet och du g\u00f6r det l\u00e4ttare f\u00f6r bes\u00f6kare att hitta saker p\u00e5 din webbplats.<\/p>\n Om du vill \u00f6ka kraften i din S\u00f6kwidget kan du installera gratiswidgeten\u00a0WP Google Search<\/a>\u00a0som anv\u00e4nder Googles s\u00f6kmotor.<\/p>\n N\u00e4r du har best\u00e4mt vilka typer av widgetar du beh\u00f6ver f\u00f6r din WordPress-sajt \u00e4r det dags att installera dem.<\/p>\n Bli inte frestad att l\u00e4gga till f\u00f6r m\u00e5nga. Ju fler det finns, desto mindre troligt \u00e4r det att anv\u00e4ndarna kommer m\u00e4rka dem. Fokusera ist\u00e4llet p\u00e5 tv\u00e5 eller tre viktiga widgetar f\u00f6r sidof\u00e4ltet. Du kan l\u00e4gga till fler till sidfoten, d\u00e4r de \u00e4nd\u00e5 \u00e4r mindre viktiga.<\/p>\n Och om du har n\u00e5gra extra widgetomr\u00e5den i\u00a0ditt tema<\/a>, best\u00e4m vilka widgetar som ska vara d\u00e4r. Se till att de passar med layouten och\u00a0designen av din webbplats<\/a>.<\/p>\n Det finns tre s\u00e4tt att l\u00e4gga till widgetar p\u00e5:<\/p>\n Det finns ett brett utbud av tillg\u00e4ngliga widgetar, s\u00e5 det kan vara sv\u00e5rt att v\u00e4lja vilken som ska installeras. L\u00e5t oss ta en titt p\u00e5 alternativen och sedan unders\u00f6ka hur du kan v\u00e4lja den b\u00e4sta f\u00f6r dig.<\/p>\n Om en av de f\u00f6rinstallerade widgetarna g\u00f6r vad du beh\u00f6ver, anv\u00e4nd det. Det sparar tid och betyder mindre kod p\u00e5 din webbplats.<\/p>\n De f\u00f6rinstallerade widgetarna:<\/p>\n WordPress pluginkatalog har tusentals gratis widgetplugins som ger dig fler widgetar att v\u00e4lja mellan.<\/p>\n F\u00f6rutom det finns det massor av andra plugins som ocks\u00e5 inkluderar widgetar, s\u00e5som ett e-handelsplugin som ger dig en\u00a0kundvagnswidget och mer<\/a>.<\/p>\n Om pluginkatalogen inte har pluginet du beh\u00f6ver kan du v\u00e4lja att l\u00e4gga till ett premiumplugin. Ibland kommer dessa att erbjuda fler funktioner eller ett mer intuitivt gr\u00e4nssnitt. Men ibland hittar du samma funktioner i ett gratis plugin, s\u00e5 g\u00f6r en ordentlig s\u00f6kning i pluginkatalogen innan du betalar f\u00f6r ett plugin.<\/p>\n F\u00f6r att hitta r\u00e4tt WordPress-widget f\u00f6r dig, f\u00f6lj dessa tips:<\/p>\n Oavsett vilken widget du v\u00e4ljer m\u00e5ste du testa den f\u00f6r att kontrollera att den fungerar som du vill. Om du k\u00f6per premiumplugin skulle jag rekommendera att k\u00f6pa ett med en pengarna-tillbaka-garanti eller en gratis provperiod ifall det inte k\u00e4nns r\u00e4tt f\u00f6r dig trots allt.<\/p>\n Nu n\u00e4r du valt din widget \u00e4r det dags att l\u00e4gga till den p\u00e5 din webbplats.<\/p>\n Du kan l\u00e4gga till widgetar till alla aktiva widgetomr\u00e5den som ditt tema ger dig. Om ditt tema inte har ett widgetomr\u00e5de p\u00e5 den plats du vill ha en, f\u00f6rs\u00f6k leta efter ett annat.<\/a><\/p>\n Senare i det h\u00e4r inl\u00e4gget ska jag visa dig hur du kodar ditt eget widgetomr\u00e5de.<\/p>\n Det finns tv\u00e5 s\u00e4tt att l\u00e4gga till widgetar p\u00e5 din webbplats:<\/p>\n Jag ska visa dig hur du anv\u00e4nder b\u00e5da dessa metoder inom kort men l\u00e5t oss f\u00f6rst ta en titt p\u00e5 widgetomr\u00e5den och varf\u00f6r du f\u00e5r de du f\u00e5r med ditt tema.<\/p>\n Beroende p\u00e5 ditt WordPresstema<\/a> kan det finnas widgetomr\u00e5den p\u00e5 flera st\u00e4llen. De flesta teman har widgetomr\u00e5den i sidof\u00e4ltet och sidfoten. Men vissa har dem ocks\u00e5 p\u00e5 andra st\u00e4llen, som under eller \u00f6ver inneh\u00e5llet eller i sidfoten.<\/p>\n Om du g\u00e5r till widgetinst\u00e4llningssk\u00e4rmen i\u00a0WordPress-admin<\/a> kommer du att kunna se alla widgetomr\u00e5den i ditt tema.<\/p>\n Jag anv\u00e4nder ett tema med flera widgetomr\u00e5den p\u00e5 massor av platser. Du kan se p\u00e5 sk\u00e4rmdumpen nedan att det finns widgetomr\u00e5den ovanf\u00f6r och under inneh\u00e5llet, i sidhuvudet, under sidfoten.<\/p>\n Om du vill l\u00e4gga till widgetar p\u00e5 andra platser p\u00e5 din webbplats \u00e4r det vettigt att hitta ett tema som har flera widgetomr\u00e5den. Det b\u00e4sta s\u00e4ttet att g\u00f6ra detta \u00e4r att anv\u00e4nda ett ramverkstema<\/a>.<\/p>\n Ett bra exempel p\u00e5 en widget p\u00e5 en plats i ditt tema som inte \u00e4r sidof\u00e4ltet eller sidfoten \u00e4r att l\u00e4gga till ett s\u00f6kf\u00e4lt i headern som jag har p\u00e5 en av mina webbplatser.<\/p>\n Widgetomr\u00e5den kodas in i temats mallfiler, liksom temats funktionsfil.<\/p>\n H\u00e4r kan du se koden jag har anv\u00e4nt i mitt temas funktionsfil f\u00f6r att l\u00e4gga till ett widgetomr\u00e5de i headern.<\/p>\n Och h\u00e4r \u00e4r koden i min header.php-fil som l\u00e4gger till det widgetomr\u00e5det p\u00e5 r\u00e4tt plats i temat.<\/p>\n Om du vill l\u00e4gga till extra widgetomr\u00e5den i ditt tema, m\u00e5ste du l\u00e4gga till samma typ av kod. Jag ska visa dig hur du g\u00f6r det senare i det h\u00e4r inl\u00e4gget.<\/p>\n Gl\u00f6m inte att om ditt tema inte har s\u00e5 m\u00e5nga widgetomr\u00e5den som du vill ha kan du alltid g\u00f6ra en av tv\u00e5 saker:<\/p>\n N\u00e4r du har widgetomr\u00e5den p\u00e5 alla platser i ditt tema d\u00e4r du vill ha dem kan du b\u00f6rja l\u00e4gga till widgetar till dem.<\/p>\n Det finns tv\u00e5 s\u00e4tt att l\u00e4gga till widgetar till din WordPress-sajt. Det f\u00f6rsta \u00e4r att anv\u00e4nda widgetsk\u00e4rmen i WordPress-admin.<\/p>\n Klicka p\u00e5\u00a0Utseende > Widgetar<\/strong>. Detta \u00f6ppnar widgetsk\u00e4rmen.<\/p>\n F\u00f6r att l\u00e4gga till en widget kan du g\u00f6ra en av tv\u00e5 saker:<\/p>\n Du kan sedan beh\u00f6va redigera var widgeten placeras inom widgetomr\u00e5det.<\/p>\n Du kan l\u00e4gga till s\u00e5 m\u00e5nga widgetar du vill i varje widget omr\u00e5de, men g\u00e5 inte \u00f6verstyr. Du kan dra omkring dem inne i widgetomr\u00e5det f\u00f6r att f\u00e5 dem i r\u00e4tt ordning. Du kan ocks\u00e5 dra dem fr\u00e5n ett widgetomr\u00e5de till ett annat om du best\u00e4mmer dig f\u00f6r att du inte gillar hur de ser ut.<\/p>\n Du kan ocks\u00e5 anv\u00e4nda tangentbordet f\u00f6r att l\u00e4gga till widgetar med widgetsk\u00e4rmen, s\u00e5 om du inte har tillg\u00e5ng till en mus kan du fortfarande l\u00e4gga till widgetar.<\/p>\n Om du inte kan anv\u00e4nda en mus kan du anv\u00e4nda widgetsk\u00e4rmen med ett tangentbord.<\/p>\n S\u00e4tt f\u00f6rst sk\u00e4rmen i tillg\u00e4nglighetsl\u00e4ge genom att klicka p\u00e5 (eller tabba till och v\u00e4lja) \u00a0Aktivera tillg\u00e4nglighetsl\u00e4ge<\/strong>-l\u00e4nken l\u00e4ngst upp till h\u00f6ger p\u00e5 sk\u00e4rmen.<\/p>\n The screen will then change to reflect the fact that you\u2019re in accessibility mode.<\/p>\n Du kan sedan navigera mellan delar av sk\u00e4rmen med hj\u00e4lp av\u00a0Tabb<\/strong>-knappen, och tryck p\u00e5 Enter f\u00f6r att v\u00e4lja ett objekt och agera p\u00e5 det. Du kan antingen tabba till en widget, klicka Enter<\/strong>\u00a0p\u00e5\u00a0L\u00e4gg till<\/strong>-l\u00e4nken och v\u00e4lj sedan var du vill l\u00e4gga till den, eller tabba till widgetomr\u00e5det och klicka p\u00e5 Enter <\/strong>p\u00e5\u00a0Redigera<\/strong>-l\u00e4nken.<\/p>\n Att anv\u00e4nda Customizer f\u00f6r att l\u00e4gga till widgetar ist\u00e4llet f\u00f6r widgetsk\u00e4rmen inneb\u00e4r att du kan se dina widgetar n\u00e4r du l\u00e4gger till dem. Detta g\u00f6r det l\u00e4ttare att se hur dina widgetar kommer att se ut och att flytta omkring dem mellan widgetomr\u00e5den om du vill.<\/p>\n Klicka p\u00e5 adminmenyn\u00a0Utseende > Anpassa<\/strong>. Alternativt, fr\u00e5n adminf\u00e4ltet l\u00e4ngst upp p\u00e5 sk\u00e4rmen p\u00e5 webbplatsen (f\u00f6rutsatt att du \u00e4r inloggad) klickar du bara p\u00e5\u00a0Anpassa<\/strong>. Detta \u00f6ppnar Customizern.<\/p>\n Klicka nu p\u00e5\u00a0Widget<\/strong>\u00a0och du kommer att se en lista \u00f6ver alla widgetomr\u00e5den i ditt tema. Klicka p\u00e5 widgetomr\u00e5det d\u00e4r du vill l\u00e4gga till en widget och klicka p\u00e5\u00a0L\u00e4gg till en widget<\/strong>.<\/p>\n Detta ger dig en lista \u00f6ver alla widgetar som \u00e4r tillg\u00e4ngliga f\u00f6r din webbplats. Det inkluderar alla inbyggda widgetar som kom med WordPress plus alla widgetar du har lagt till via plugins.<\/p>\n V\u00e4lj widgeten du vill l\u00e4gga till i det widgetomr\u00e5det och du ser det i f\u00f6rhandsgranskningssk\u00e4rmen p\u00e5 h\u00f6ger sida.<\/p>\n Du kan \u00e4ndra ordning p\u00e5 widgetarna genom att dra dem upp och ner p\u00e5 v\u00e4nster sida eller genom att klicka p\u00e5\u00a0Ordna<\/strong>-l\u00e4nken under listan med widgetar och klicka sedan p\u00e5 pilarna f\u00f6r att flytta dem upp och ner.<\/p>\n N\u00e4r du har lagt till widgetar via Customizer, gl\u00f6m inte att klicka p\u00e5 Publicera<\/strong>-knappen l\u00e4ngst upp till v\u00e4nster s\u00e5 att dina \u00e4ndringar sparas. Om du l\u00e4mnar Customizern utan att g\u00f6ra detta kommer ingen av dina \u00e4ndringar att \u00e5terspeglas p\u00e5 den levande webbplatsen.<\/p>\n N\u00e4r du har lagt till dina widgetar, ta en titt p\u00e5 dem och kolla hur de passar in i din siddesign. Om du har lagt till f\u00f6r m\u00e5nga widgetomr\u00e5den kan det se lite r\u00f6rigt ut. Du m\u00e5ste antingen ta bort n\u00e5gra av dem eller s\u00e5 kan du flytta dem fr\u00e5n ett widgetomr\u00e5de till ett annat.<\/p>\n Det \u00e4r verkligen l\u00e4tt att g\u00f6ra detta i widgetsk\u00e4rmen, d\u00e4r du kan dra widgetar mellan widgetomr\u00e5den.<\/p>\n Vissa teman inkluderar widgetomr\u00e5den som bara \u00e4r till f\u00f6r specifika sidor, som startsidan. Men t\u00e4nk om du vill l\u00e4gga till en widget p\u00e5 bara en sida p\u00e5 din webbplats?<\/p>\n Du kan g\u00f6ra detta i\u00a0Gutenbergs<\/a>\u00a0inl\u00e4ggs- och sidredigerare.<\/p>\n L\u00e4gg till ett nytt block p\u00e5 det vanliga s\u00e4ttet och sedan\u00a0v\u00e4lja blocktypen Widget<\/strong>.<\/p>\n Du kan sedan v\u00e4lja mellan m\u00e5nga av de widgetar du aktiverat f\u00f6r din webbplats, och l\u00e4gga till inneh\u00e5llet i ditt inl\u00e4gg eller sida. Det \u00e4r verkligen anv\u00e4ndbart om du vill l\u00e4gga till en formul\u00e4rwidget, en uppmaning till handling-widget eller en lista \u00f6ver dina senaste inl\u00e4gg.<\/p>\n N\u00e4r du v\u00e4l har lagt till widgetar p\u00e5 din webbplats kan du g\u00f6ra \u00e4ndringar i dem. Enskilda widgetar kommer att ha inst\u00e4llningar du kan komma \u00e5t via antingen widgetsk\u00e4rmen eller Customizer (det spelar ingen roll vilken av dessa du anv\u00e4nde f\u00f6r att l\u00e4gga till widgeten.)<\/p>\n Vissa widgetar inneh\u00e5ller inga inst\u00e4llningar, men andra har inst\u00e4llningar f\u00f6r widgettiteln till exempel eller antalet inl\u00e4gg som visas. Vissa \u00e4r mer komplicerade och kr\u00e4ver att du st\u00e4ller in widgeten p\u00e5 en separat inst\u00e4llningssida. Kolla dokumentationen fr\u00e5n pluginutvecklaren.<\/p>\n Alternativ f\u00f6r redigering av widgetplugins inkluderar:<\/p>\n F\u00f6r att redigera inst\u00e4llningarna f\u00f6r widgeten, hitta den widgeten i widgetsk\u00e4rmen eller customizern, och helt enkelt redigera alla alternativ som tillhandah\u00e5lls.<\/p>\n F\u00f6r att flytta widgeten fr\u00e5n ett omr\u00e5de till ett annat, \u00f6ppna widgetsk\u00e4rmen och dra den fr\u00e5n ett widgetomr\u00e5de till ett annat. I tillg\u00e4nglighetsl\u00e4ge, navigera till pilen till h\u00f6ger om widgeten och v\u00e4lj fr\u00e5n alternativen.<\/p>\n Om du vill ta bort en widget p\u00e5 widgetsk\u00e4rmen hittar du widgeten och klickar p\u00e5 l\u00e4nken Ta bort l\u00e4ngst ned till v\u00e4nster i rutan widgetinst\u00e4llningar.<\/p>\n F\u00f6r att ta bort en widget i Customizer, hitta widgeten i dess widgetomr\u00e5de. Klicka p\u00e5 pilen till h\u00f6ger om Widgetens namn och klicka sedan p\u00e5\u00a0Ta bort<\/strong>-l\u00e4nken i det nedre v\u00e4nstra h\u00f6rnet av widgetinst\u00e4llningarna.<\/p>\n Du kan ocks\u00e5 ta bort en widget fr\u00e5n ett widgetomr\u00e5de men \u00e4nd\u00e5 g\u00f6ra den tillg\u00e4nglig att anv\u00e4nda senare genom widgetsk\u00e4rmen.<\/p>\n Bl\u00e4ddra ner till\u00a0Inaktiva widgetar<\/strong>-omr\u00e5det l\u00e5ngt ner p\u00e5 sk\u00e4rmen. Dra widgetar till detta omr\u00e5de f\u00f6r att ta bort dem fr\u00e5n widgetomr\u00e5det men beh\u00e5ll dem som utkast med sina aktuella inst\u00e4llningar. Du kan sedan alltid dra tillbaka dem till ett widgetomr\u00e5de om du vill i framtiden.<\/p>\n Om\u00a0du byter teman<\/a>\u00a0och ditt nya tema har olika widgetomr\u00e5den kommer alla widgetar som inte passar i widgetomr\u00e5dena i det nya temat automatiskt att flyttas till listan Inaktiva widgetar av WordPress.<\/p>\n Om ditt tema inte har widgetomr\u00e5den d\u00e4r du vill ha dem, kan du alltid l\u00e4gga till ditt eget. Du g\u00f6r detta genom att l\u00e4gga till tv\u00e5 bitar kod.<\/p>\n L\u00e5t oss l\u00e4gga till ett widgetomr\u00e5de under inneh\u00e5llet.<\/p>\n Det f\u00f6rsta steget \u00e4r att st\u00e4lla in widgetomr\u00e5det med hj\u00e4lp av\u00a0 Om du anv\u00e4nder ett tredjepartstema (h\u00e4r \u00e4r ett urval av de b\u00e4sta<\/a>), m\u00e5ste du skapa ett barntema f\u00f6r att g\u00f6ra detta. Anledningen \u00e4r att om du\u00a0uppdaterar temat<\/a>\u00a0i framtiden kommer alla dina f\u00f6r\u00e4ndringar att g\u00e5 f\u00f6rlorade.<\/p>\n Om du arbetar med ditt eget tema, kan du helt enkelt redigera temat.<\/p>\n B\u00f6rja med att \u00f6ppna ditt temas\u00a0functions.php<\/strong>-fil. L\u00e4gg till den h\u00e4r koden l\u00e4ngst ner i filen.<\/p>\n Spara nu din functions.php-fil. Om du g\u00e5r till widgetsk\u00e4rmen eller Customizern hittar du det nya widgetomr\u00e5det tillg\u00e4ngligt f\u00f6r nya widgetar.<\/p>\n Men om du g\u00f6r det h\u00e4r kommer de inte att dyka upp p\u00e5 sidan. Detta beror p\u00e5 att du m\u00e5ste l\u00e4gga till lite kod till din temas mallfil ocks\u00e5.<\/p>\n L\u00e4gga till widgeten till ett temas mallfil<\/strong><\/p>\n Det f\u00f6rsta steget \u00e4r att ta reda p\u00e5 vilken temamallfil du beh\u00f6ver anv\u00e4nda.<\/p>\n N\u00e4r du har identifierat vilken mallfil du beh\u00f6ver redigera och exakt var du beh\u00f6ver ha koden f\u00f6r widgetomr\u00e5det, l\u00e4gg till f\u00f6ljande kod. N\u00e4r det g\u00e4ller ett widgetomr\u00e5de efter inneh\u00e5llet l\u00e4gger vi till det i\u00a0post.php<\/strong>\u00a0och\u00a0page.php<\/strong>-filerna i v\u00e5rt tema:<\/p>\n Spara nu din mallfil\/dina mallfiler.<\/p>\n Observera att din kod kommer att skilja sig fr\u00e5n min beroende p\u00e5 vad du har kallat ditt widgetomr\u00e5de och vilka element du vill placera i den. Jag brukar anv\u00e4nda ett aside<\/strong>-element f\u00f6r att jag tycker att de \u00e4r gjorda f\u00f6r sidof\u00e4lt och widgetomr\u00e5den.<\/p>\n Ninjatips: om du flyttar slutet p\u00e5 ditt containerelement f\u00f6r inneh\u00e5llet till b\u00f6rjan av sidof\u00e4ltet och\/eller sidfoten, kan du l\u00e4gga till det d\u00e4r och du beh\u00f6ver bara l\u00e4gga till det en g\u00e5ng.<\/p>\n Om du nu tar en titt p\u00e5 din webbplats, m\u00e4rker du att alla widgetar du lagt till ditt widgetomr\u00e5de kommer att dyka upp p\u00e5 r\u00e4tt plats. Om de inte \u00e4r p\u00e5 r\u00e4tt plats, g\u00e5 tillbaka och redigera mallfilerna, se till att koden \u00e4r p\u00e5 den plats d\u00e4r du vill ha den. Du kan ocks\u00e5 beh\u00f6va\u00a0redigera din CSS<\/a>\u00a0f\u00f6r att f\u00e5 det att se ut som du vill.<\/p>\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.<\/p>\n 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.<\/p>\n In this example, I’m going to show you how to code a really simple call-to-action widget.<\/p>\n \u00d6versikt \u00f6ver widget-API:n<\/strong><\/p>\n![\"Widgetomr\u00e5den](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Widget-areas-in-the-RachelMcWrites-site.jpg\")
D\u00e5 b\u00f6r du anv\u00e4nda WordPress-widgetar<\/h2>\n
11 exempel p\u00e5 widgetar i WordPress<\/h2>\n
1. Senaste inl\u00e4gg-widget<\/h3>\n
![\"Senaste](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Latest-Posts-widget.jpg\")
2. Senaste kommentarer-widget<\/h3>\n
![\"Senaste](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Recent-Comments-widget.jpg\")
3. Uppmaning till handling-widgetar (CTA)<\/h3>\n
![\"Uppmaning](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Call-to-Action-widgets-on-my-site.jpg\")
4. Navigeringswidgetar<\/h3>\n
![\"Navigeringsmeny-widget\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Navigation-Menu-widget.jpg\")
5. Media-widgetar<\/h3>\n
![\"Bildwidget\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Image-widget.jpg\")
6. Sociala Medie-widgetar<\/h3>\n
![\"Pluginet](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Jetpack-plugin.jpg\")
7. Kundvagnswidget<\/h3>\n
![\"Kundvagnswidget\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Shopping-cart-widget.jpg\")
8. Formul\u00e4rwidget<\/h3>\n
9. Kartwidget<\/h3>\n
![\"Pluginet](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/WP-Google-Maps-plugin.jpg\")
10. Inloggningswidget<\/h3>\n
![\"Widgetpluginet](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Login-with-Ajax-widget.jpg\")
11. S\u00f6kwidget<\/h3>\n
![\"S\u00f6kwidget\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Search-widget.jpg\")
S\u00e5 h\u00e4r l\u00e4gger du till widgetar till din WordPress-sajt<\/h2>\n
\n
Att hitta widgetar f\u00f6r din WordPress-sajt<\/h3>\n
Widgetar som kommer med WordPress<\/h4>\n
![\"F\u00f6rinstallerade](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Pre-installed-WordPress-widgets.jpg\")
\n
Att l\u00e4gga till widgetar med ett plugin<\/h3>\n
S\u00e5 h\u00e4r hittar du r\u00e4tt widget f\u00f6r din webbplats<\/h4>\n
\n
S\u00e5 h\u00e4r l\u00e4gger du till widgetar i sidof\u00e4ltet och sidfoten i WordPress<\/h3>\n
\n
![\"Widgetar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Widgets-in-the-Customizer.jpg\")
Widgetar \u00e4r inte bara till f\u00f6r sidof\u00e4ltet<\/h4>\n
![\"Widgetinst\u00e4llningssk\u00e4rm,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Widgets-setting-screen-widget-areas.jpg\")
![\"S\u00f6kf\u00e4lt](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Search-bar-in-the-header.jpg\")
Widgetomr\u00e5den och teman<\/h4>\n
register_sidebar( array(\n 'name' => __( 'In Header Widget Area', 'rmccollin' ),\n 'id' => 'in-header-widget-area',\n 'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),\n 'before_widget' => '<div id=\"%1$s\" class=\"widget-container %2$s\">',\n 'after_widget' => '<\/div>',\n 'before_title' => '<h3 class=\"widget-title\">',\n 'after_title' => '<\/h3>',\n) );<\/code><\/pre>\nif ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>\n\n <aside class=\"in-header widget-area right\" role=\"complementary\">\n <?php dynamic_sidebar( 'in-header-widget-area' ); ?>\n <\/aside>\n\n<?php }<\/code><\/pre>\n\n
S\u00e5 h\u00e4r anv\u00e4nder du widgetsk\u00e4rmen f\u00f6r att l\u00e4gga till widgetar<\/h4>\n
![\"Widgetsk\u00e4rmen\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Widgets-screen.jpg\")
\n
![\"V\u00e4lj](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Selecting-a-widget-area-and-widget.jpg\")
L\u00e4gga till och redigera widgetar i Tillg\u00e4nglighetsl\u00e4ge<\/h4>\n
![\"L\u00e4nk](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Accessibility-mode-link.jpg\")
![\"Widgetsk\u00e4rmen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Widgets-screen-accessibility-mode.jpg\")
S\u00e5 h\u00e4r anv\u00e4nder du WordPress Customizer f\u00f6r att l\u00e4gga till widgetar<\/h4>\n
![\"WordPress](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/WordPress-admin-bar.jpg\")
![\"L\u00e4gg](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Add-a-widget-button.jpg\")
![\"Redigera](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Editing-widgets-in-the-Customizer.jpg\")
S\u00e5 h\u00e4r l\u00e4gger du till en widget p\u00e5 en viss sida<\/h4>\n
![\"Blocktypen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Widget-block-type.jpg\")
S\u00e5 h\u00e4r redigerar du widgetar<\/h3>\n
\n
![\"Redigera](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Editing-widget-options.jpg\")
Ta bort widgetar<\/h4>\n
![\"Ta](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Deleting-a-widget-in-the-widgets-screen.jpg\")
![\"Ta](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Removing-a-widget-in-the-Customizer.jpg\")
S\u00e5 h\u00e4r l\u00e4gger du till ett nytt widgetomr\u00e5de till ditt tema<\/h2>\n
Skapa widgetomr\u00e5det i ditt temas funktionsfil<\/h3>\n
register_widget()<\/code> -funktionen.<\/p>\nfunction kinsta_register_widgets() {\n \n register_sidebar( array(\n\u00a0 'name' => __( 'After Content Widget Area', 'kinsta' ),\n 'id' => 'after-content-widget-area',\n 'description' => __( 'Widget area after the content', 'kinsta' ),\n 'before_widget' => '<div id=\"%1$s\" class=\"widget-container %2$s\">',\n 'after_widget' => '<\/div>',\n 'before_title' => '<h3 class=\"widget-title\">',\n 'after_title' => '<\/h3>',\n\n ) );\n\n}\n\nadd_action( 'widgets_init', 'kinsta_register_widgets' );<\/code><\/pre>\n\n
if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>\n\n aside class=\"after-content widget-area full-width\" role=\"complementary\">\n <?php dynamic_sidebar( 'after-content-widget-area' ); ?>\n <\/aside>\n\n<?php }<\/code><\/pre>\n![\"Widget](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/Widget-on-the-live-site.jpg\")
S\u00e5 h\u00e4r kodar du widgetar med widget-API:n<\/h2>\n