Så här redigerar du HTML i WordPress Code Editor (Nybörjarguide)

letar du efter ett enkelt sätt att redigera HTML på din WordPress-webbplats?

HyperText Markup Language eller HTML är en kod som talar om för en webbläsare hur du visar innehållet på dina webbsidor. Redigering av HTML är praktiskt för avancerade Anpassnings-och felsökningsproblem.

i den här artikeln visar vi hur du redigerar HTML i WordPress-kodredigeraren med olika metoder.

 hur man redigerar HTML i WordPress code editor

hur man redigerar HTML i WordPress code editor

varför ska du redigera HTML i WordPress?

WordPress erbjuder tusentals teman och plugins för att ändra utseendet på din webbplats och anpassa olika element utan att röra en enda kodrad.

plugins och teman har dock sina begränsningar och kanske inte erbjuder de exakta funktionerna du letar efter. Som ett resultat kanske du inte kan utforma din webbplats så som du vill att den ska se ut.

det är här redigering av HTML är verkligen användbart. Du kan enkelt utföra avancerad anpassning med HTML-kod. Det ger mycket flexibilitet och kontroll över hur din webbplats kommer att se ut och fungera.

dessutom kan du lära dig att redigera HTML också hjälpa dig att identifiera och åtgärda fel på din WordPress-webbplats när du inte har tillgång till instrumentpanelen.

notera: Om du inte vill redigera HTML, men ändå vill ha fullständiga anpassningsalternativ, rekommenderar vi att du använder en dra och släpp WordPress-sidbyggare som SeedProd.

med det sagt, låt oss titta på olika sätt att redigera HTML på en WordPress-webbplats.

vi täcker hur du redigerar HTML med blockredigeraren och den klassiska redigeraren, och vi visar dig också ett enkelt sätt att lägga till kod på din webbplats. Du kan klicka på länkarna nedan för att hoppa vidare till önskad sektion.

  • hur man redigerar HTML i WordPress Block Editor
  • hur man redigerar HTML i WordPress Classic Editor
  • hur man redigerar HTML i WordPress Widgets
  • hur man redigerar HTML i WordPress Theme Editor
  • hur man redigerar HTML i WordPress med FTP
  • enkelt sätt att lägga till kod i WordPress

hur man redigerar HTML i WordPress Block Editor

i WordPress Block Editor finns det flera sätt att redigera html för ditt inlägg eller sida.

först kan du använda ett anpassat HTML-block i ditt innehåll för att lägga till HTML-kod.

för att börja, gå över till din WordPress-instrumentpanel och lägg sedan till ett nytt inlägg/sida eller redigera en befintlig artikel. Därefter klickar du på plustecknet ( + ) längst upp till vänster och lägger till ett ’Custom HTML’ – block.

 lägga till anpassat HTML-block i WordPress

lägga till anpassat HTML-block i WordPress

nästa, fortsätt och ange din anpassade HTML-kod i blocket. Du kan också klicka på alternativet ’Förhandsgranska’ för att kontrollera om HTML-koden fungerar korrekt och hur ditt innehåll kommer att se ut på din live-webbplats.

 anpassad HTML-kod i WordPress-redigeraren

anpassad HTML-kod i WordPress Editor

ett annat sätt att lägga till eller ändra HTML-kod i WordPress block editor är genom att redigera HTML för ett visst block.

för att göra det, välj bara ett befintligt block i ditt innehåll och klicka sedan på trepunktsmenyn. Nästa, gå vidare och klicka på ’Redigera som HTML’ alternativet.

 klicka på de tre punkterna och välj Redigera som HTML

klicka på de tre punkterna och välj Redigera som HTML

du ser nu HTML för ett enskilt block. Fortsätt och redigera HTML för ditt innehåll. Du kan till exempel lägga till en nofollow-länk, ändra stilen på din text eller lägga till annan kod.

 redigera HTML för ett enskilt block

redigera HTML för ett enskilt block

om du vill redigera HTML för hela ditt inlägg kan du använda ’kodredigeraren’ i WordPress-blockredigeraren.

du kan komma åt kodredigeraren genom att klicka på alternativet med tre punkter i det övre högra hörnet. Välj sedan ’kodredigerare’i rullgardinsmenyn.

 öppna kodredigeraren

gå till kodredigeraren

så här redigerar du HTML i WordPress Classic Editor

om du använder WordPress classic editor kan du enkelt redigera HTML i textvyn.

för att komma åt textvyn, redigera bara ett blogginlägg eller lägg till ett nytt. När du är i den klassiska redigeraren klickar du på fliken’ Text ’ för att se HTML för din artikel.

 klicka på Text i den klassiska redigeraren för att redigera HTML

klicka på Text i den klassiska redigeraren för att redigera HTML

därefter kan du redigera HTML för ditt innehåll. Du kan till exempel djärva olika ord för att göra dem framträdande, använda kursiv stil i texten, skapa listor, lägga till en innehållsförteckning och mer.

hur man redigerar HTML i WordPress Widgets

visste du att du kan lägga till och redigera HTML-kod i din webbplats widget område?

i WordPress kan en anpassad HTML-widget hjälpa dig att anpassa sidofältet, sidfoten och andra widgetområden. Du kan till exempel bädda in kontaktformulär, Google Maps, CTA-knappar (call to action) och annat innehåll.

du kan börja med att gå över till din WordPress admin panel och sedan gå till Utseende ” Widgets. Efter det, fortsätt och Lägg till en anpassad HTML-widget genom att klicka på ’Lägg till’ – knappen.

 Lägg till en anpassad HTML-Widget

Lägg till en anpassad HTML-Widget

Därefter måste du välja var du vill lägga till den anpassade HTML-widgeten och välja en position. Widgetområdet beror på WordPress-temat du använder. Du kan till exempel lägga till den i sidfoten, sidhuvudet eller andra områden.

 Välj område och position för din anpassade HTML-widget

Välj område och position för din anpassade HTML-widget

när du har valt widgetområdet och positionen, fortsätt och klicka på knappen ’Spara Widget’.

därefter kan du klicka på din anpassade HTML-widget, ange HTML-koden och klicka sedan på ’Spara’ – knappen.

 Ange anpassad HTML

Ange anpassad HTML

du kan nu besöka din webbplats för att se den anpassade HTML-widgeten i aktion.

 anpassad HTML-förhandsvisning

anpassad HTML Preview

hur man redigerar HTML i WordPress Theme Editor

ett annat sätt att redigera HTML på din webbplats är genom WordPress Theme Editor (kodredigerare).

vi rekommenderar dock inte att du direkt redigerar koden i Temaredigeraren. Det minsta misstaget när du anger kod kan bryta din webbplats och blockera dig från att komma åt WordPress-instrumentpanelen.

dessutom, om du uppdaterar ditt tema, då alla dina ändringar skulle gå förlorade.

som sagt, om du funderar på att redigera HTML med Temaredigeraren, är det bra att säkerhetskopiera din webbplats innan du gör några ändringar.

nästa, gå över till utseende ” Temaredigerare från din WordPress-instrumentpanel. Du ser nu ett varningsmeddelande om direkt redigering av temafiler.

tema redaktör varning i WordPress

tema editor varning i WordPress

när du klickar på knappen’ Jag förstår ’ ser du dina temafiler och kod. Härifrån kan du välja vilken fil du vill redigera och göra dina ändringar.

 WordPress tema redaktör

WordPress Theme Editor

så här redigerar du HTML i WordPress med FTP

en annan alternativ metod för att redigera HTML i WordPress-temafilerna är att använda FTP, även känd som file transfer protocol service.

detta är en standardfunktion som kommer med alla WordPress-värdkonton.

fördelen med att använda FTP istället för kodredigeraren är att du enkelt kan åtgärda problem med FTP-klienten. På så sätt kommer du inte att låsas ur din WordPress-instrumentpanel om något går sönder när du redigerar HTML.

för att starta måste du först välja en FTP-programvara. Vi kommer att använda FileZilla i denna handledning, eftersom det är en gratis och användarvänlig FTP-klient för Windows, Mac och Linux.

när du har valt din FTP-klient måste du nu logga in på webbplatsens FTP-server. Du hittar inloggningsuppgifterna i din värdleverantörs kontrollpanelpanel.

när du är inloggad kommer du att se olika mappar och filer på din webbplats under kolumnen ’Remote site’. Gå vidare och navigera till dina temafiler genom att gå till wp-innehåll ” tema.

du ser nu olika teman på din webbplats. Gå vidare och välj det tema som du vill redigera.

navigera till dina temafiler i FTP-klienten

navigera till dina temafiler i FTP-klient

därefter kan du högerklicka på en temafil för att redigera HTML. Om du till exempel vill göra ändringar i sidfoten högerklickar du på sidfoten.php-fil.

många FTP-klienter kan du visa och redigera filen och automatiskt ladda upp dem när du har gjort ändringarna. I FileZilla kan du göra detta genom att klicka på alternativet ’Visa/redigera’.

 ladda ner och redigera din temafil

ladda ner och redigera temafilen

vi föreslår dock att du laddar ner filen du vill redigera till skrivbordet innan du gör några ändringar.

när du har redigerat HTML kan du ersätta originalfilen. För mer information rekommenderar vi att du följer vår guide om hur du använder FTP för att ladda upp filer i WordPress.

enkelt sätt att lägga till kod i WordPress

det enklaste sättet att lägga till kod i din WordPress är att använda Insert Headers and Footers WordPress plugin.

teamet på WPBeginner utformade detta plugin, så att du enkelt kan lägga till kod på din webbplats på några minuter, och vi har gjort det 100% gratis att använda.

det hjälper också att organisera din kod, eftersom den lagras på ett ställe. Dessutom förhindrar det fel som kan orsakas vid manuell redigering av kod.

en annan fördel är att du inte behöver oroa dig för att din kod raderas om du bestämmer dig för att uppdatera eller ändra ditt tema.

det första du behöver göra är att installera och aktivera Insert Headers and Footers plugin på din webbplats. För mer information kan du följa vår detaljerade handledning om hur du installerar ett WordPress-plugin.

när plugin är aktivt kan du gå över till inställningen ” Infoga Sidhuvud och sidfot från din adminpanel.

därefter kan du lägga till HTML-koden på din webbplats i rutorna sidhuvud, brödtext och sidfot.

låt oss till exempel säga att du vill visa en Varningsfält på din webbplats. Du kan helt enkelt ange HTML-koden i rutan ’Scripts in Body’ och klicka på Spara-knappen.

 lägga till HTML-koden med insticksprogrammet Infoga Sidhuvud och sidfot

lägga till HTML-koden med Insert Headers and Footers plugin

förutom det kan du lägga till en Google Analytics-spårningskod och Facebook-pixel i rubriken eller lägga till en Pinterest-knapp i sidfoten på din webbplats med plugin.

för mer information kan du se vår guide om hur du lägger till sidhuvud och sidfot i WordPress.

vi hoppas att den här artikeln hjälpte dig att lära dig hur du redigerar HTML i WordPress-kodredigeraren. Du kanske också vill titta på vår guide om hur mycket det verkligen kostar att bygga en WordPress-webbplats, eller se de viktigaste anledningarna till att du bör använda WordPress för din webbplats.

om du gillade den här artikeln, vänligen prenumerera på vår YouTube-kanal för WordPress video tutorials. Du kan också hitta oss på Twitter och Facebook.

Lämna ett svar

Lämna ett svar

Din e-postadress kommer inte publiceras.