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 det. Och även trots de många anpassningsalternativ som många erbjuder WordPress-teman nuförtiden kan du göra din webbplats ännu mer unik.

Häll vraiment För att röra 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 ändrautseendet på din webbplats för att göra det riktigt unikt.

Denna handledning kommer att titta på de olika metoder som är tillgängliga för dig för att anpassa din webbplats med CSS, skapa och anpassa barnteman, använda inbyggda WordPress Customizer-plugins och Wordpress plugins av CSS.

Men innan du börjar, ta dig tid att titta på Hur man installerar en Wordpress temaHur många insticksprogram ska jag installera på Wordpress.

Sedan ta reda på tillsammans vår lista.

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

Mest WordPress-teman använd en CSS-kod 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 bättre förstår vad CSS är och hur WordPress-teman använd dem, vi tar en titt på alternativen du kan använda för att anpassa din WordPress-blogg, och vi kommer att diskutera för- och nackdelar 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

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

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 för att optimera hanteringen av din blogg eller hemsida.

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 Wordpress plugins den mest kraftfulla filhanteraren 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

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.