Det finns mer än ett sätt att lägga till anpassad CSS-kod till en WordPress-blogg.

Idag kommer jag att förklara styrkorna och svagheterna i de två olika metoderna som jag föreslår för dig, så att du kan välja den som passar dig bäst.

Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg 

Tillbaka till varför vi är här.

Så hittar du de objekt du vill anpassa

När du har isolerat delen av ditt WordPress-tema du vill ändra (till exempel titeln på en artikel), måste du göra det bestäm CSS-egenskaper tillämpas på det så att du kan göra lämpliga ändringar. Lyckligtvis är denna process inte komplicerad.

CSS använder väljare för att bestämma vilka element som kommer att uppleva de olika specifika förändringarna. Vanligtvis görs detta genom att ange en " klass "Av ett element (eller DOM-element). CSS kan dock också användas för att definiera layouten för ett helt element (till exempel taggen " ") eller med hjälp av taggarens identifierare.

Lyckligtvis tillåter populära webbläsare att vi ser olika väljare och deklarationer som tillämpas på sidelement med bara några få klick. I Google Chrome behöver du till exempel bara markera en viss del av dokumentet och högerklicka sedan, som i exemplet nedan.

Genom att klicka på Inspektera elementet I rullgardinsmenyn som visas ser du HTML-koden på sidan i ett nytt fönster med det inspekterade objektet markerat i fönstret till höger (eller under). Du kan se ett exempel nedan.

Texten till dessa element (eller attribut) Markerad med rött visar dig de olika specifika stilarna som är tillämpliga på det objekt du markerade genom att inspektera koden.

Läs också: Lägga till en rullgardinsmeny med CSS i Visual Editor

Till exempel, elementet " textstorlek Berättar att teckensnittet som visas i det markerade objektet har en storlek till 13 pixlar. Beskrivarna är omgiven av hängslen och föregås av väljare. Namnet på motsvarande formatmallfil visas precis till höger om väljarna.

När du har den här informationen i åtanke blir det lätt att ändra stil. Om du till exempel vill ändra teckensnittet från 13px till 14px letar du helt enkelt efter din stilarkfil, väljaren som motsvarar den i det markerade objektet. Det är i allmänhet i denna form: (« # .block-plugin-innehållsinformation"). Du kan sedan ändra de olika värdena för attributen.

Du kan göra samma sak på Firefox, markera bara en viss del av sidan, högerklicka på objektet och välj sedan " Inspektera elementet I menyn som visas.

Hur Wordpress och CSS samarbetar

Det är ett faktum att WordPress-teman skapas annorlunda. Så tänk på att din Wordpress tema kanske inte följer det du läser i följande avsnitt till 100 %.

Som sagt är det mer än troligt att CSS som används på din WordPress-blogg finns i en fil som heter " style.css ". Detta är det vanliga namnet på ett formatmall för alla typer av webbplatser, inte bara WordPress.

Se även: Så här ändrar du storleken på Gravatar-bilder på WordPress

Nu är det dags att gå igenom de olika redigeringsprocesserna.

Metod # 1: Redigera stilfilen för ditt WordPress-tema

Det finns två sätt att komma åt ditt temas style.css-fil.

Den första är att göra det från din WordPress-instrumentpanel. På menyn till vänster väljer du menyn " Apparence "Och sedan" utgivare ".

När du väl är på redigeringssidan ser du en lista med filer i en lodrät stapel till höger om sidan. Bläddra igenom listan över filer. Du kommer att se en fil med namnet " Stylesheet style.css Längst ner på sidan.

Om du klickar på namnet på den här filen kommer den att laddas och visas i redigeraren i mitten. Du kan använda den här skärmen för att redigera filen.

Det andra sättet att hitta stilmallen är att bläddra igenom din värdleverantörs operativsystem och hitta filen i Wordpress tema (använder en FTP-klient). Den exakta platsen kommer att variera beroende på din värdleverantör. I exemplet nedan är webbplatsens namn (i vårt fall thecare) Är en mapp under public_html mappen.

Eftersom WordPress är installerat kan du se mappen wp-content i "thecare". Undermappen wp-content är en annan mapp som heter " WP-teman", det är där alla WordPress-teman är installerade.

Från denna webbplats använder ett tema som heter " Nyhetsbrev », Stilfilen« style.css Finns i mappen " Moder Nyhetsbrev ".

Metod 2: Använda ett plugin för att ändra CSS

Det kanske bekvämaste sättet att redigera CSS på din WordPress-blogg är användningen av ett plugin.

En av de största fördelarna med att använda ett plugin liknar det för barnteman. Ja du uppdaterar WordPress-tematändras inte dina ändringar eftersom de kommer att sparas separat och inte bland temafilerna. Den andra fördelen är naturligtvis att du inte behöver skapa ett barntema.

Här är några premium plugins som du också kan använda för att ändra din CSS-kod Wordpress tema :

1. Gul penna: Visual CSS Style Editor

Yellow Pencil är en visuell stilredigerare som du kan använda med vilket tema som helst för att anpassa din webbplats på några minuter (teckensnitt, färger, animationer och mer ...).

Ce Wordpress plugin premium kommer att skapa CSS-stilar av bakgrund medan du spelar med färgerna som om det var ett spel. Det var designat för både nybörjare och erfarna användare.

Upptäck också vår 5-plugins Wordpress för att visa aviseringar

Inga kodkunskaper krävs. Men den Wordpress plugin har en bra CSS-editor för de som gillar att koda. Du kan koda live med denna editor och anpassa din CSS.

Ladda ner | demo | webbhotell

2. Anpassad JS och CSS för Gutenberg

Le Wordpress plugin premium Custom JS och CSS för Gutenberg låter dig lägga till ett obegränsat antal anpassade stilar till WYSIWYG-redigeraren för dina WordPress-inlägg och sidor. Det är fullt kompatibelt med Gutenberg-versionen av WordPress.

Du kan helt enkelt skapa en ny stil med en lättanvänd CSS-redigerare. Detta WordPress-plugin utökar funktionerna i anpassade fält på din webbplats och ger dig möjlighet att ändra dina anpassade fält med en dynamisk och kraftfull personaliseringsmodul. och funktionaliteten hos förhandsvisning i realtid av detta WordPress-plugin gör det mycket bekvämt och användarvänligt.

Ladda ner | demo | webbhotell

3. SiteOrigin CSS

Det är överlägset WordPress-plugin som erbjuder flest alternativ i den här listan. Det fantastiska med det senare är att det är gratis. Detta WordPress-plugin är det enda som inte kan hittas i anpassaren.

Efter att ha installerat och aktiverat plugin-programmet måste du navigera till följande plats " Utseende> Anpassad CSS För att komma åt CSS-utgåvan av plugin. På den här sidan kan du se en textredigerare som inte erbjuder liveförhandsgranskning. 

Läs också vår artikel om 10 WordPress plugins för att öka försäljningen av din webbplats

För att komma åt det senare måste du klicka på en av de två knapparna som visas till vänster, precis ovanför redigeraren. Knappen med en ögonikon visar en visuell CSS-kodredigerare som entusiaster kommer att uppskatta. Ikonen med förlängningspilarna visar en textredigerare som innebär att du behärskar CSS-koder.

Ladda ner | demo | webbhotell

4. Enkel Anpassad CSS

Enkel Anpassad CSS är ett av de mest populära plugins.

Upptäck också vår Hur du gör din blogg snabb: hantera CSS- och JS-filer.

Det har installerats över 100 000 gånger och har fått en femstjärnig betyg.

Ladda ner | demo | webbhotell

5. WP Lägg till anpassad CSS

WP Lägg till anpassad CSS är ett plugin som låter dig göra ändra layouten på en WordPress-blogg hela eller bara enskilda artiklar. Detta är ett bra alternativ om du letar efter flexibilitet i att anpassa objekt.

Plugin har laddats ner över 10.000 4,3 gånger och har för närvarande XNUMX stjärnor.

Ladda ner | demo | webbhotell

6. Tema Junkie Anpassad CSS

Om du letar efter en lösning som erbjuder en förhandsgranskning av dina ändringar kan du överväga att använda Tema Junkie Anpassad CSS. 

Denna lösning lägger till en anpassad CSS-chef till din instrumentpanel, där du kan lägga till dina egna stilar. Det erbjuder också ett alternativ till med ett barntema.

Ladda ner | demo | webbhotell

Andra rekommenderade resurser

Vi inbjuder dig också att konsultera resurserna nedan för att gå vidare i greppet och kontrollen av din webbplats och blogg.

• 10 WordPress-plugins som delas på sociala nätverk
• Så här visar egna fält av slingan på Wordpress
• 5 WordPress-plugin för att tjäna pengar på din blogg med annonser
• Så skyddar din blogg innehåll skrapor

Slutsats

Här! Det är det för denna handledning, jag hoppas att du kommer att lyckas lägga till anpassad CSS-kod till din WordPress-blogg på två sätt, om du har någon commentaires eller förslag, tveka inte att berätta för oss i avsnittet reserverat för dessa.

Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Om du gillade den här artikeln, ntveka inte att dela på dina favorit sociala nätverk. 

.