Gå till innehållet

Hur du anpassar CSS på din WordPress-webbplats

Divi: det enklaste WordPress-temat att använda

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]

Hur anpassar jag CSS på din WordPress-webbplats? Ta reda på det i den här artikeln.

Oavsett vilket WordPress-tema du väljer för din webbplats kommer det att finnas andra webbplatser som kommer att använda den. Och trots de många anpassningsalternativ som många WordPress-teman erbjuder idag kan du göra din webbplats ännu mer unik.

Häll vraiment för att röra vid den visuella aspekten av ditt WordPress-tema måste du gå längre än standardanpassningen som erbjuds av alternativen eller inställningarna för ett WordPress-tema. CSS-anpassning av din WordPress-blogg gör att du kan ändra utseendet på din webbplats så att den blir unik.

Denna handledning kommer att titta på de olika metoderna som finns tillgängliga för att anpassa din webbplats med CSS, skapa och anpassa underordnade teman, använda WordPress-anpassningsprogram och CSS WordPress-plugins.

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 

Låt oss sedan gå tillbaka till varför vi är här

CSS: Grunderna och hur WordPress använder dem

Först och främst: CSS står för Cascading Style Sheets, som inte är tydligare än förkortningen. Så, låt oss bryta ner det.

Ett formatmall är ett dokument som beskriver stilar (såsom typsnitt, färger, etc..) som ska användas för presentation av ett annat dokument. I vårt fall har vi att göra med en stil på webbsidorna.

DelencascadingAv namnet är en del av det som gör det riktigt kraftfullt. Webbsidor kan utformas med flera stilark, som ett kaskad vattenfall, med bottenarket som lägger till eller ersätter stilar från en högre nivå. Detta är viktigt eftersom sättet du lägger till dina stilar kommer att skriva över de ursprungliga ändringarna.

Hur du anpassar CSS på din WordPress-webbplats

Så enkelt som det låter kan CSS användas för att ändra nästan vad som helst på en webbsida (inklusive layout, färger, teckensnitt och till och med animationer).

Lär dig hur du hanterar dina aviseringar genom att upptäcka Hur man hanterar e-postmeddelanden på Wordpress

De flesta WordPress-teman använder CSS-kod som är tillgänglig i en fil som heter style.css. Om du öppnar den här filen ser du en komplett lista med stilregler för ditt WordPress-tema. Vad du än gör, ändra inte den här filen! Uppdateringarna kommer att skriva över dina ändringar.

Det finns flera sätt att lägga till en anpassad CSS-kod till ditt WordPress-tema så att dina förändringar överlever en uppdatering av WordPress-temat.

Så här anpassar du din WordPress-webbplats med CSS

Nu när du har en bättre förståelse för vad CSS är och hur WordPress-teman använder dem, kommer vi att ta en titt på alternativen du kan använda för att anpassa din WordPress-blogg, och vi diskuterar fördelarna och nackdelarna med varje metod.

hur man anpassar css wordpress webbplats 1

I slutet av vårt arbete kommer du att kunna bestämma vilken metod som motsvarar ditt WordPress-tema.

Alternativ # 1: Anpassa CSS med ett barntema

Om du använder un barn tema För att anpassa din CSS-kod kommer uppdateringar av teman som vi pratade om tidigare inte längre vara ett problem. En uppdatering av ett WordPress-tema påverkar temat "förälder», Lämnar ändringarna i ditt barns tema intakta. Många WordPress-temautvecklare förstår nyttan av ett barns tema.

Upptäck När och hur man installerar Wordpress på en underkatalog

Att skapa ett barns tema är ganska enkelt. Den består av att skapa en mapp på ditt webbhotell som innehåller en fil style.css som visar överordnade temat som en mall och importfil style.css av överordnat tema (kommer du ihåg innebörden av "kaskad" stilark?).

Codex Wordpress har mer information om att skapa barns teman.

hur man anpassar css wordpress webbplats 1 1

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]

När du har skapat ditt barns tema och aktiverat det korrekt kan du börja anpassa ditt WordPress-tema. Det snabbaste sättet är att redigera filen style.css, som kan nås på två sätt.

Kolla in den här artikeln för att upptäcka Hur komprimerar du CSS, HTML och Javascript-filer

Den första är att använda redigeraren som ingår i WordPress-instrumentpanelen genom att klicka på Utseende> Redaktör. L 'utgivare visar en lista över filer till höger tillgängliga i temat (Endast populära filer visas). Din fil style.css kommer att vara längst ner i listan och klicka på alternativet format votre fichier style.css kommer att ladda.

Du kan lägga till dina ändringar på den här platsen och spara ändringen.

Wordpress stylesheet

Det andra sättet att komma åt din fil style.css (vi rekommenderar) är att bläddra bland filerna i din webbhotell via a FTP-klient eller en filhanterare. Den underordnade temamappen du skapade finns i " wp-content> teman« . Du kommer att kunna använda en textredigerare för att redigera filen style.css.

Alternativ nr 2: Anpassa CSS från Customizer

Från och med WordPress 4.7 kan användare lägga till anpassad CSS direkt från WordPress-administrationsområdet. Det är super enkelt, och du skulle kunna se dina ändringar med förhandsvisning i realtid.

hur man anpassar css wordpress webbplats 2

Först måste du gå till sidan Teman »Anpassa.

Åtkomst till WordPress-anpassaren för att anpassa temat

Detta startar gränssnittet för anpassning av WordPress-temat.

Du kommer att se förhandsgranskning i realtid av din webbplats till höger med en massa alternativ till vänster. Klicka på fliken ytterligare CSS till vänster.

Fliken glider för att visa dig ett enkelt område där du kan lägga till din anpassade CSS. Så snart du lägger till en giltig CSS-regel kommer du att kunna se den tillämpas i förhandsgranskningsfönstret i realtid på din webbplats.

ange ytterligare css-kod och publicera

Du kan fortsätta lägga till anpassad CSS-kod tills du är nöjd med hur den ser ut på din webbplats. Glöm inte att klicka på " Spara och publicera Överst när du är klar.

Notera: Alla anpassade CSS som du lägger till med Customizer är endast tillgängliga med det WordPress-temat. Om du vill använda den med andra teman måste du kopiera och klistra in i ditt nya tema med samma metod.

Alternativ # 3: Anpassa CSS med hjälp av ett plugin

Fördelen med att använda ett plugin för CSS-anpassning är att du behåller pluginet även om du gör en WordPress-temändring. Detta har sina avvägningar, eftersom stilar inte kan visas bra på alla WordPress-teman.

Här är några plugins:

1. Anpassad CSS i Jetpack (gratis)

Wordpress plugin jetpack  är installerat på över en miljon WordPress-webbplatser, och förmodligen också. Det ger funktioner tillgängliga på WordPress.com för webbplatser med egen värd, och erbjuder också en modul för CSS anpassa. jetpack-former-plugin

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]

När modulen har aktiverats i Jetpack-instrumentpanelen kommer en anpassad CSS-redigerare att finnas tillgänglig, så att du kan anpassa ditt WordPress-tema utan att skapa ett underordnat tema. Du kommer till redigeraren genom att följa den här sökvägen " Utseende> Redigera CSS« .

2. Enkel anpassad CSS (gratis)

Om du istället vill ha en fristående alternativ, Enkel Anpassad CSS är ett bra val. Detta gratis plugin, som används på mer än 200.000 webbplatser med en klassificering av 4,9 stjärnor, kommer definitivt att hjälpa dig att anpassa din CSS WordPress-blogg.single-custom-css

Detta plugin kräver ingen konfiguration, du behöver bara installera och aktivera plugin. För att ändra din CSS-kod, gå till " Utseende> Anpassad CSS«  i WordPress-instrumentpanelen. Tillämpa dina CSS-ändringar i textrutan och spara dina inställningar när det är klart.

3. CSS Hero (från $ 14 per år)

Det sista alternativet för WordPress-plugin som vi tittar på idag är ett premium WordPress-plugin som heter CSS hjälte. Från 14 $ per år för en webbplats ger detta plugin dig möjlighet att anpassa ditt WordPress-tema med ett intuitivt gränssnitt.CSS hjälte Wordpress Plugin

Designad för att fungera bäst med dussintals kompatibla WordPress-teman , CSS Hero ger dig total kontroll över alla element i ditt WordPress-tema. För teman som inte finns på deras lista kan du använda Rocket mode för att aktivera CSS Hero-anpassning.

CSS Hero tar bort behovet av att förstå CSS-syntax genom att förenkla interaktion med kod genom ett gränssnitt, och detta gäller animationer och övergångar. Du kan också förhandsgranska dina ändringar i realtid och återgå till en tidigare version.

TA REDA PÅ Hur man flyttar kommentarer från en artikel till en annan på WordPress

Om du helt vill ändra CSS för din WordPress-blogg, men inte vill lära dig CSS, är CSS Hero ett bra alternativ för att anpassa din webbplats, speciellt om du använder ett av deras WordPress-teman.

Medan du vet att innehållet är viktigt, vill du dock att din webbplats ska sticka ut från mängden, även om du använder ett populärt WordPress-tema. Med CSS kan du anpassa designen på din webbplats så att den blir helt unik.

Gå längre genom att upptäcka Hur man tillåta användare att redigera vissa sidor

Så det finns flera sätt att anpassa CSS för ditt WordPress-tema:

  1. ett barntema.
  2. den Customizer.
  3. CSS plugin.

Upptäck också några premium WordPress-plugins  

Du kan använda andra WordPress-plugins för att ge ett modernt utseende och optimera greppet på din blogg eller webbplats.

Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.

1. Adning Advertising

WP PRO Advertising System är ett WordPress-annonseringshanteringsplugin som erbjuder 18 strategiska platser som hjälper dig att visa annonser på din webbplats. Den har också ett detaljerat statistikavsnitt från vilket du ser resultaten för varje annons.Adding Advertising WordPress-plugin

Den här funktionen är avgörande eftersom den hjälper dig att förbättra din kampanj och maximera dina vinster. Detta WordPress Adsense-plugin kommer också med en unik funktion som kallas bakgrundsannonser. Det låter dig visa annonser som bakgrund för ditt innehåll.

Dessutom eftersom det är kompatibelt med plugins som WPBakery et Slider Revolutionkan du visa dina annonser i form av skjutreglage eller placera dem var som helst på din webbplats.

Ladda ner | demo | webbhotell

2. WP Media File Manager

WP Media File Manager är ett WordPress-plugin som gör det enkelt att organisera mediebiblioteket i en form av hierarki med hjälp av dra och släpp-funktionaliteten. Det är en av de mest kraftfulla WordPress-filhanteraren plugins på CodeCanyon. Du behöver inte ens skapa mappar manuellt.

WP Media File Manager WordPress Media Library Mappar Kategorier Ladda upp plugin

Detta WordPress-plugin låter dig ladda upp tusentals filer från din dators filhanterare till webbplatsen genom att automatiskt kopiera källmappens hierarki. Om du vill ha samma fil i olika mappar, vet du att du nu har ett riktigt mediebibliotek som tillhandahåller denna funktion.

Säg adjö till problem med nedladdning av specifika filtyper, nu behöver du bara installera detta WordPress-plugin och låta det hjälpa dig att hantera dina filer.

Ladda ner | demo | webbhotell

3. Meny hjälte

Hero Menu är ett mega-meny WordPress-plugin. Och även om det inte gör mycket heroiskt, har det alla nödvändiga funktioner för bara $ 19. Lite som Mega Main Menu, det är ett plugin som också innehåller produkter som visas på CodeCanyon och det har för närvarande nästan 4500 försäljningar till sin kredit.Hero Menu Responsive WordPress Mega Menu Plugin

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]

I avsnittet funktioner kommer du snabbt att inse att det är ganska enkelt att skapa en megamenu. Processen tar bara några steg. Men dessutom kommer du att märka att plugin är kompatibel med WooCommerce, erbjuder en lyhörd design och ett "dra och släpp" -gränssnitt för att skapa menyerna.

Menybyggaren förbättrar användningen av plugin-programmet och förenklar köparens jobb kraftigt. Gränssnittsintegration är också ett bra jobb och gränssnittet beter sig perfekt med andra plugins.

Ladda ner | demo | webbhotell

Rekommenderade resurser

Ta reda på om andra rekommenderade resurser som hjälper dig att bygga och hantera din webbplats.

Slutsats

Där! Det är det för denna handledning. Vi hoppas att den här guiden har visat dig hur du anpassar CSS på din WordPress-webbplats. Tveka inte att dela med dina vänner på dina favorit sociala nätverk

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.

Om du har förslag eller kommentarer, lämna dem i vårt avsnitt commentaires.

Denna artikel innehåller 1 kommentar

  1. Hej!

    Jag vill presentera dig för Anym Live Editor-plugin-programmet som möjliggör fullständig redigering av CSS eller SCSS och Javascript från vilken WordPress-sida som helst, och som erbjuder en live-rendering av de ändringar som gjorts! Dessutom är insticksprogrammet utrustat med en mängd olika verktyg som gör att du kan interagera med sidan du vill ändra och fungerar som alla vanliga IDE (sublim textstil), men den här gången, tillägnad din webbplats WordPress.

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