Lägg till Anpassad CSS WordPress

Så här lägger du till CSS-kod till WordPress på 30 sekunder

Kul! Jag gissar att du redan har börjat komma igång med din WordPress-sida. Men förr eller senare så upplever man att den tema eller stilfulla som hemsidan använder begränsar en lite.

Du vill kanske kunna styra designen på hemsidan. Toppen, då har du kommit rätt!

Saker du kan göra med WordPress CSS-kod:

• Byta färg i menyn
• Ända typsnitt och storleken på brödtexten
• Skapa rundade knappar.
• Byta färger på sidan
• Justera flera element samtidigt
• Lägga till bakgrundsbilder
• Justera dimensioner och placering

Detta är bara några av de tusentals med ändringar som CSS erbjuder.

WordPress – stora möjligheter

Det är sant att en WordPress hemsida, med sitt enorma utbud av gratis och betalda teman, erbjuder dig redan otaliga kombinationer och variationer av design för din webbplats. Men det är också sant att nästan ingen av dessa webbplatser görs utan åtminstone några små ändringar av sidans CSS-stil.

Oftast ser allt bra ut, men du vill kanske bara flytta den ena knappen lite till höger. Eller du hittade ett bra element som du kan lägga till med ett plugin men det finns inget alternativ för att ändra dess bakgrundsfärg.

CSS ser oss möjligheten att enkelt ändra designen på designelement på hemsidan.

In kommer anpassad CSS. Bara en snabb sak vi måste ta upp om att lägga till CSS direkt till ditt WordPress-temas stilblad. Det är inget vi rekommenderar eftersom alla ändringar du gör kommer att skrivas över när du uppdaterar ditt tema.

Jag kommer att skriva om 3 olika metoder för att lägga till CSS-regler på din webbplats, från det enklaste att den mest komplicerade. De har alla olika fördelar och syften, så läs vidare och välj den bäst passar dig.

Den första metoden – med hjälp av WordPress Customizer

För att använda anpassningsverktyget, gå till Utseende → Anpassa i din WordPress-kontrollpanel. När Anpassningsgränssnittet öppnas, välj alternativet Ytterligare CSS längst ner i vänster meny.

Sedan lägger du helt enkelt de anpassade CSS-reglerna till rutan som öppnas i sidofältet. Tryck Publicera och du är klar!

Det positiva med den här metoden är att det är mycket enkelt att använda, redaktören har grundläggande syntax och fel markera och du har en förhandsgranskning av ändringarna innan du publicerar.

Den dåliga sidan är att tillägg CSS är temaspecifik, så du måste kopiera den till anpassaren igen om du ändrar teman och alla nya regler tillämpas på hela webbplatsen.

Den andra metoden – med hjälp av ett plugin

Som det kan förväntas finns det många plugins för detta ändamål, men jag använder Simple CSS inför denna artikel. Det är ett gratis plugin från Tom Usborne och har all den grundläggande funktionaliteten du behöver, plus lite extra som verkligen kan komma till nytta på större hemsidor.

När du har installerat och aktiverat pluginet finns det flera sätt att lägga till din CSS.

Först kan du gå till Utseende → Anpassa som med den första metoden, men använd Simple CSS alternativ. Detta kommer att ge dig en levande förhandsgranskning av dina CSS-ändringar precis som tidigare.

För det andra kan du gå till Utseende → Enkel CSS för att använda den fulla redigeraren. Koden i den kommer att vara identisk med koden i Simple CSS-området i ”Core Customizer” från det första alternativet.

Tredje och sista, kan du lägga till anpassad CSS till varje enskild post eller sida med den nya enkla CSS metakassa under WordPress-redigeraren.

Det tredje sättet är den mycket användbara delen av pluginmetoden. Jag måste ofta lägga till lite CSS till en enda sida, men med WordPress Customizer läggs den till på hela webbplatsen. Det inte bara väger ner alla sidor med onödig kod, men det kan faktiskt orsaka problem om vi inte är försiktiga med att göra CSS tillräckligt specifik för att inte påverka något annat element utöver det vi avsett.

Ett annat användbart exempel är när vi vill ändra ett element som normalt syns på alla sidor, bara på en viss sida eller post (som sidor eller navigeringsmenyer).

Den tredje metoden – med hjälp av ett barntema

Den här metoden är mer avancerad och kräver att du arbetar med webbfiler och mappar eller med ett plugin för att skapa barnteman (Child themes). Men det är också ett bra sätt att lägga till mycket CSS-kod om du måste (om du har 1000 + linjer av ny CSS).

Vi har förklarat den manuella metoden att göra ett barntema i en av våra senaste inlägg när vi pratade om att lägga till kodutdrag till WordPress, så nu går vi med plugin-metoden och pratar om det. Som alltid finns det några alternativ tillgängliga men jag presenterar barntema-konfiguratorn och beskriv hur du använder det.

När du har installerat och aktiverat pluginet går du till Verktyg → Barnteman och följer stegen skisserade där.

Du måste välja en förälder dem för att göra ett barn för och du har möjlighet att tweak några av inställningarna där om de inte verkar rätt för dig.

När plugin skapar ditt barntema kan du aktivera det och gå till Utseende → Tema

Redigera ditt barntemas stilark och lägg till din CSS, eller använd ett filöverföringsverktyg till kopiera barntema filer till din dator, redigera dem och ladda upp till servern.

Child Theme Configurator analyserar och indexerar även dina stylesheets så att varje CSS-mediafråga, väljare, egendom och värde bör vara tillgängliga för att redigera från deras gränssnitt, vilket är ett bra tillägg.

Det är också möjligt att det inte kommer att fungera på några av de kommersiella teman, eller icke-standardiserad en sådan Följ inte bästa praxis, men du bör få varning i analyssteget och några tips om hur man ska fixa dem.

Jag hoppas att du hittar artikeln användbar om du någonsin behöver lägga till lite CSS på din webbplats. Stanna kvar
inställd för mer användbara tips och instruktioner.

Glöm inte bort att läsa våra andra WordPress-guider här på Sitea.