Gå till innehållet

Så lägger du till anpassad CSS till din WordPress-blogg

Divi: det enklaste WordPress-temat att använda

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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.

blogpascher-inspektion

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.

blogpascher-logo

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å kom ihåg att ditt WordPress-tema kanske inte är 100% kompatibelt med vad du läser i följande avsnitt.

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.

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

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 ".

menu-editor-i-bild-kant

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.

meny-wordpress-editor-in-kod

Det andra sättet att hitta stilarket är att navigera genom din värdleverantörs operativsystem och lokalisera filen i WordPress-temans mapp (använder en FTP-klient). Den exakta platsen varierar beroende på din webbhotellleverantör. I exemplet nedan visas 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 ".

Nyhetsbrev förälder-mapp-800x401

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 CSS-koden för ditt 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 ...).YellowPencil Visual CSS Style Editor wordpress plugin

Detta premium WordPress-plugin skapar CSS-stilar i 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

Ingen kodkunskap krävs. WordPress-tillägget har dock en bra CSS-redigerare för dem som gillar att koda. Du kan koda live med den här redigeraren och anpassa din CSS.

Ladda ner | demo | webbhotell

2. Anpassad JS och CSS för Gutenberg

Premium-plugin-programmet WordPress anpassad 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.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Anpassad JS och CSS för Gutenberg WordPress-plugin

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.

SiteOrigin CSS - WordPress-tillägg

Efter att ha installerat och aktiverat pluginet 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.

Enkel anpassad CSS - WordPress-plugin WordPress.org

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.

wp-add-custom

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

tema-junkie-css

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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.

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

.  

Denna artikel innehåller 1 kommentar

  1. Tack så mycket för alla artiklar på din webbplats !! Det är alltid väldigt tydligt och förståeligt för en nybörjare som jag ... Jag tror att jag kommer tillbaka mycket ofta !!

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
4 aktier
del2
tweet
Enregistrer2