Hur man anpassar ett WordPress-tema med CSS

Vet du att du kan experimentera med din WordPress-sajt och ändra dess utseende med CSS? Du kan lägga till små estetiska förändringar, hälla i färger, ändra layouten eller till och med helt ändra ditt WordPress-tema.

Att ha kontroll över din hemsidas utseende ger dig en chans att skapa den på ett sätt som du gillar.

Du kan lägga till din personliga prägel på ditt varumärkes webbplats, vilket gör den mycket annorlunda än andra människor eller företag som använder samma WordPress-tema!

I det här inlägget, låt oss ta en närmare titt på hur du kan anpassa ett WordPress-tema med CSS.

Vad är CSS?

CSS eller Cascading Style Sheets är ett webbspråk som används för att presentera webbsidor. Med CSS kan du ställa in layout, färger, typsnitt, bakgrund och andra element som kan göra våra webbsidor presentabla för användarna. Det är därför vi kallar CSS frontend-språk på klientsidan eftersom det exekveras på användarsidan. CSS används i kombination med HTML och Javascript för att göra webbsidorna responsiva. Om du tänker på att du måste vara en hardcore programmerare för att lära dig och implementera CSS, är det inte sant. Du kan enkelt lära dig CSS och använda den för att ändra din webbplats presentation, även om du inte har kunskap om programmering tidigare.

Vad är WordPress?

WordPress är det populäraste och enklaste sättet att starta din webbplats eller blogg. Tekniskt sett är WordPress ett innehållshanteringssystem med öppen källkod. Den hanterar alla viktiga aspekter av en webbplats som innehåll, layout, säkerhet etc. Du kan skapa vilken typ av webbplats som helst med WordPress. Till exempel företagswebbplatser, e-handelswebbplatser, portföljer, meritförteckningar, sociala nätverk, etc. WordPress är gratis att använda och kommer med olika teman och plugins. Man kan ändra utseendet och känslan på deras WordPress-webbplats med CSS.

CSS och WordPress

För att börja redigera ditt WordPress-tema måste du först förstå några saker – mallfiler, malltaggar och CSS-stilmall. Mallfiler styr ditt WordPress-tema. Du kan se olika filer som header.php, archive.php. Det här är mallfiler som styr ditt WordPress-tema. Malltaggar används för att kontrollera dessa filer och andra databaselement. CSS-formatmall eller style.css är filen som du behöver leta efter för att ändra hur din webbplats ser ut. Du kommer att redigera koden i style.css för att anpassa ditt WordPress-tema.

Hur man anpassar ett WordPress-tema med CSS

Först och främst måste du förstå att om du vill anpassa ditt WordPress-tema med CSS måste du antingen lägga till viss kod till det, eller så måste du redigera koden som redan är skriven. Jag skulle rekommendera dig att åtminstone lära dig några grunder i CSS, HTML, JavaScript och PHP innan du börjar redigera ditt tema.

En annan sak att notera är att om du ska göra ändringar i formatmallen för ditt WordPress-tema, kommer dessa ändringar att tas bort när ditt tema uppdateras. Så du måste lära dig om underordnade teman och använda ett underordnat tema för att göra ändringar med style.css, functions.php eller andra temamallfiler. Jag har pratat om barnteman längre fram i den här artikeln.

Det finns två sätt att redigera eller lägga till CSS till ditt tema

1 Använda instrumentpanelen

Detta gör att du kan redigera ditt WordPress-tema direkt med hjälp av CSS-formatmallen i din WordPress Dashboard. Men du måste notera att alla stora förändringar som görs här kan vara svåra att återställa. Så jag skulle rekommendera att ta en säkerhetskopia av ditt WordPress-temas ursprungliga CSS och sedan göra eventuella ändringar. Jag skulle också rekommendera att du skapar ett barntema för din webbplats. Om du inte vet vad det är, läs bara nästa avsnitt och kom tillbaka.

Skapa ett underordnat tema och sedan, i det underordnade temat, gå till Utseende och sedan Temaredigerare. Ett popup-fönster visas när du använder ett barntema, men det är inget att oroa sig för. Klicka bara på ”Jag förstår” så kommer du in i stilmallen. Om du vill göra ändringar i mallfiler som header.php, functions.php, etc. måste du först lära dig PHP och sedan prova dina kodningskunskaper. Annars är det bara att hålla sig till att redigera stilmallen.

Vad är ett barntema i WordPress?

Ett barntema är en kopia av ett originaltema (även känt som överordnadstema). Barntemat inkluderar funktionaliteten och utformningen av föräldratemat. Det rekommenderas att använda ett barntema när du vill behålla den ursprungliga koden intakt samtidigt som du gör ändringar i designen på din webbplats. Så du kan skapa nya, bättre mönster på barntemat och behålla funktionaliteten hos det överordnade temat. Några fördelar med att använda ett barntema inkluderar:

• Du behöver inte oroa dig för att bråka med den ursprungliga koden eftersom föräldratemat är säkert och oredigerat.
• Du kan använda kodning för att utöka funktionaliteten för ett överordnat tema, experimentera med det och skapa något nytt.
• Du behöver inte skapa ett tema från grunden. Om du av en slump glömmer bort en viss funktion eller funktion, finns föräldratemats kod där för dig.

Du måste dock vara mycket försiktig när du använder barnteman. En av anledningarna är att det skulle kräva kodningskunskaper och erfarenhet. Om du precis har börjat med CSS, HTML, JavaScript och PHP, ge dig själv lite tid att bli expert först. Annars kan inlärningskurvan vara ganska hög.

En annan sak att ta hand om när du använder ett barntema är att du måste kontrollera uppdateringarna först. Om ditt föräldratema är uppdaterat med en funktion som du inte vill ha, får du inte uppdatera ditt WordPress-tema eftersom det skulle återspegla i ditt barns tema. Ibland, om någon av funktionerna tas bort i huvudtemat och du uppdaterar det, kan ditt barntema påverkas. Alltså öka ditt kodningsarbete.

2 Använder FTP-server

Det kan finnas en chans att du inte kan komma åt instrumentpanelen för ditt tema direkt. Ibland inaktiverar användning av plugins den funktionen. Så du måste använda FTP eller File Transfer Protocol för att fjärråtkomst till din webbplats filer. Börja med att ladda ner valfri FTP-klientapplikation. Kontakta din värd och be om dina FTP-uppgifter.

När du anger inloggningsuppgifterna får du tillgång till style.css. Gör nu ändringar i filen, spara dina ändringar och ladda upp dem tillbaka till servern. Detta kan vara en ganska hektisk metod för att lägga till CSS på din webbplats så använd den bara om du inte har tillgång till din instrumentpanel.

Enkla sätt att lägga till CSS till din WordPress-webbplats

Det finns två enkla metoder som du kan använda för att lägga till CSS på din WordPress-webbplats. De inkluderar att använda en WordPress Customiser eller ett plugin. Det blir mycket lättare att lägga till din CSS-kod med dessa metoder. Att lägga till CSS med en WordPress Customiser eller ett plugin skulle inte heller försvinna din kod när temat uppdateras. Jag skulle dock fortfarande rekommendera dig att behålla en säkerhetskopia av din webbplats originalkod ifall något skulle hända oavsiktligt. Låt oss nu kontrollera de två enkla sätten att lägga till CSS till din WordPress-webbplats.

1 Redigering genom WordPress Customiser

Logga bara in på din WordPress-backend. Klicka på Utseende och sedan på Anpassa. Det öppnar en anpassningsskärm. Den här skärmen visar dig en förhandsvisning av din webbplats just nu och det kommer att finnas några alternativ till vänster på skärmen för att anpassa element som färger, menyer eller andra widgets.

På vänster sida av skärmen ser du ett alternativ som heter Ytterligare CSS. Det är här du måste sprinkla din magi. När du klickar på Ytterligare CSS öppnas en ny sida med koden för din webbplats på den. Nu kan du göra ändringar i koden och om du har skrivit den korrekt (inga fel!) kommer du att se ändringarna återspeglas i förhandsgranskningen.

CSS-koden som du skriver här skulle inte ändras eller försvinna när ditt tema uppdateras! Men om du flyttar till ett nytt tema kommer koden som skrivits här att raderas. Så det föreslås att du måste säkerhetskopiera din CSS innan du ändrar temat.

2 Använd en plugin

I det här avsnittet kommer jag att diskutera fyra olika plugins som du kan använda för att redigera CSS för ditt WordPress-tema – Advanced CSS Editor, Modular Custom CSS, SiteOrigin CSS och CSS Hero. Om du inte vet är WordPress-plugins små mjukvaror som kan kopplas till WordPress för att utöka dess funktionalitet. Vissa plugins är tillgängliga utan kostnad medan du för vissa måste betala lite pengar för att lägga till dem på din WordPress-webbplats. Plugins kan hjälpa dig att redigera eller lägga till CSS till din WordPress-webbplats med bara några klick!

Använder plugin-programmet Advanced CSS Editor

Den första plugin som jag skulle rekommendera heter Advanced CSS Editor. Denna plugin låter dig lägga till CSS för hur din webbplats ser ut på en stationär, surfplatta och mobiltelefon. På så sätt kan du finjustera din webbplats för varje enhet. För att börja redigera, installera plugin. Gå till din WordPress-instrumentpanel, klicka på Utseende och sedan Anpassa. Du kommer att se ett nytt alternativ som heter Advanced CSS Editor. Lägg till den anpassade CSS som du vill ha i den och spara ändringarna.

En stor fördel med att använda detta plugin är att du kan styra hur din webbplats ser ut på olika enheter. Dessutom kan du fortfarande använda tekniken jag sa i punkt #1 för att redigera ditt WordPress-tema. Men för vissa människor som inte är vana vid kodning kan det vara mycket jobb att göra ändringar för varje typ av enhet. De skulle först behöva lära sig hur man skriver CSS för varje enhetstyp.

Använder Modular Custom CSS Plugin

Den andra plugin som jag skulle rekommendera är Modular Custom CSS. Detta plugin hjälper dig att göra ändringar i din WordPress-webbplats temamässigt. Till exempel, om du för närvarande använder ett tema och du gör ändringar i det temat med Modular Custom CSS. Sedan bestämmer du dig för att välja ett annat tema för din webbplats. Så ändringarna som gjordes i det första temat skulle inte tas bort. De kommer att förbli intakta i detta plugin. Du kan också lägga till global CSS med detta plugin. Att CSS skulle förbli densamma trots temaändringar.

För att använda detta plugin, ladda först ner pluginet och lägg till det på din WordPress-webbplats. Klicka sedan på Utseende -> Anpassare -> Ytterligare CSS. Den enda nackdelen som jag kunde hitta med den här metoden är att det kanske inte alltid är den bästa idén att lägga till global CSS. Ibland kanske den globala CSS inte fungerar med ett tema och det kan vara en enda röra.

Använder SiteOrigin CSS-plugin

Den tredje plugin som jag rekommenderar är känd som SiteOrigin CSS. Detta plugin ger dig visuella kontroller som låter dig redigera utseendet och känslan på din webbplats i realtid. Detta plugin är lämpligt för både nybörjare och avancerade CSS-användare. Förhandsgranskningen i realtid och visuella kontroller hjälper nybörjare medan avancerade användare kan koda snabbt med hjälp av funktionen för automatisk komplettering av kod i detta plugin.

Detta plugin öppnar upp en fristående CSS-redigerare för WordPress. För att komma åt denna plugin ladda ner först plugin och lägg till den på din WordPress-webbplats. Klicka sedan på Utseende -> Anpassad CSS. En bra funktion med detta plugin är att du kan redigera vilket element som helst på din webbplats genom att bara klicka på det. Du kan ändra några enkla element i temat utan att använda CSS. En nackdel med sådan funktionalitet kan dock vara att om du gör ändringar i många olika delar av ett tema kan det vara svårt att spåra dem.

Använder CSS Hero Plugin

Nu är det här något intressant. Min tredje pluginrekommendation inkluderar ett plugin som hjälper dig att redigera CSS på din WordPress-webbplats genom att dra och släppa. Det är känt som CSS Hero. För att redigera CSS med detta plugin behöver du bara föra musen över elementet du vill ändra och klicka på det. Sedan kan du justera det som du vill. Här är några fantastiska funktioner i detta plugin:

• Detta plugin inkluderar enkel redigering av teckensnittsstilar och topografi. Plugin-programmet stöder Google Fonts och TypeKit-teckensnitt.
• Du kan också använda en färgväljare och experimentera med en levande färg- och bakgrundsändring. Du kan enkelt hitta dina senast använda färger.
• Du kan bara dra ett skjutreglage och se hur marginalerna ser ut.
• Insticksprogrammet stöder också webbplatselement som gradient, boxskuggor, textskuggor och andra moderna CSS-egenskaper.
• Du kan spara ögonblicksbilder av dina redigeringar med detta plugin. Så du behöver inte göra allt levande. Fortsätt bara jobba och publicera den slutliga versionen.
• Denna plugin påverkar inte dina temafiler. Så du behöver inte oroa dig för att uppdateringar förstör dina ändringar.

Jämföra de olika sätten att anpassa WordPress-tema med CSS

Så idag lärde vi oss om fyra olika sätt att anpassa en WordPress-webbplats med CSS. Du kan redigera eller lägga till CSS till ditt WordPress-tema med hjälp av instrumentpanelen eller så kan du använda en FTP-applikation. Du kan använda WordPress Customiser för att lägga till eller redigera CSS eller äntligen kan du använda några plugins för att anpassa ditt WordPress-tema med CSS.

• Om du är ganska ny på WordPress och CSS, skulle jag rekommendera dig att använda WordPress Customiser för att redigera eller lägga till CSS. På så sätt kan du kontrollera ändringarna i förhandsgranskningen och behöver inte oroa dig för att ändringar tas bort när temat uppdateras.
• Om du har lite erfarenhet av CSS och WordPress och du har arbetat med plugins tidigare, skulle jag rekommendera dig att välja någon av de fyra plugins som jag delade med dig idag. Plugins ger bättre alternativ och utrymme för att förbättra din webbplats.
• Om du är en CSS-veteran. Du har skapat hemsidor och kunnat CSS fungerar grundligt. Sedan skulle jag rekommendera dig att använda Dashboard eller FTP för att göra ändringar direkt i WordPress-stilbladet.

Det är viktigt hur din webbplats ser ut

Designen, layouten, färgerna, typsnitten eller temat på din webbplats är ganska viktigt. Det hjälper till att förmedla känslan som du vill att användaren ska ha om ditt företag. Det kan skapa en unik varumärkesimage och definiera din identitet.

Designen och layouten på din webbplats spelar också en stor roll för att förbättra användarupplevelsen. Om din design inte är så bra, du har placerat annonser på fel positioner, färgerna på din webbplats är ganska distraherande, allt kan påverka användarupplevelsen.

En fantastisk design och layout kan hjälpa dig att kontrollera hur meddelandet levereras till användarna. Du kan fånga deras uppmärksamhet vid rätt tidpunkt och leda dem till en väg som uppfyller dina mål. Så att ändra, lägga till eller redigera CSS på din WordPress-webbplats är en ansvarsfråga. Ansvaret för att göra din webbplats bättre för användarna.

Hoppas att dessa tips och tricks för att anpassa ditt WordPress-tema med CSS skulle hjälpa dig att ge en personlig touch till din webbplats. Om du använder någon av dem eller har använt dem tidigare, dela dina erfarenheter i kommentarsfältet och sprid ordet!