Så här anpassar du ett WordPress-tema med CSS
när du vill lära dig att anpassa ett WordPress-tema med CSS är en av de första sakerna du behöver veta hur du redigerar filer inom själva temat.
processen för redigering av temafiler är effektivt densamma oavsett om du vill anpassa CSS eller HTML, och i tidigare handledning i denna serie täckte vi redan denna process för att ändra HTML.
så för att undvika att regummera samma mark, ta en titt på ”hur man redigerar HTML i ett WordPress-tema” och ”hur man installerar WordPress lokalt med XAMPP” för att lära sig om:
- redigera filer via temaredigeraren
- ladda ner och ladda upp filer via FTP eller fjärranslutning
- Varför bör du överväga att göra dina ändringar inom ett barntema
- redigera offline via XAMPP
med metoderna för redigering av temafiler som redan omfattas, kommer vi i denna handledning att fokusera på hur du redigerar css i WordPress genom att lära dig om dessa ämnen:
- så här lägger du till anpassad CSS genom temat customizer
- så här identifierar du formatmallen(erna) som ett tema använder
- så här identifierar du vilken CSS som behöver ändras och var, för att anpassa en viss del av ett tema
Obs: den här artikeln förutsätter att du har grundläggande kunskaper om CSS, men inte nödvändigtvis om hur för att redigera CSS i WordPress.
Premium WordPress Teman Och Plugins
innan vi börjar, glöm inte att du kan utforska de tusentals WordPress teman på ThemeForest och WordPress plugins på CodeCanyon. Köp dessa högkvalitativa WordPress-Teman Och plugins och förbättra din webbplatsupplevelse för dig och dina besökare.
hur man redigerar CSS i WordPress Theme Customizer
WordPress har ett dedikerat område där du kan lägga till din egen anpassade CSS-kod. Denna kod kommer att laddas vid rätt tidpunkt för att säkerställa att det åsidosätter standard styling av temat, och med hjälp av detta tillvägagångssätt inte göra några direkta ändringar temafiler.
i den vänstra sidofältet menyn på din WordPress admin panel gå till utseende > anpassa:
detta tar dig temat anpassningsområde, där du kan klicka på menyalternativet ytterligare CSS:
ett stort fält visas där du kan lägga till valfri anpassad CSS du vill:
Spara dina ändringar genom att klicka på den blå Publicera-knappen längst upp till vänster när du är klar med att lägga till anpassad kod.
hur man identifierar ett temas stilmall(er)
om du inte vill använda additonal CSS-området i Temaanpassaren och istället vill redigera tema CSS direkt behöver du ett sätt att ta reda på vilka filer ett tema faktiskt använder för styling.
i de flesta fall kommer teman att använda Standardstrukturen för WordPress och ha en fil med namnet ”style.css ” i temats rotkatalog. I själva verket är detta en viktig temafil så att du alltid hittar den i något tema.
men när du öppnar den för redigering kan du upptäcka att den är tom för kod, och utvecklaren laddar styling från annat var i temat. Eller så kan du till och med hitta att de laddas i flera stilmallar.
det finns två sätt att kontrollera vilka formatmallar som används av ett tema.
inspektera Huvudkod
den första metoden är att inspektera <head> – koden för temat. Du kan göra detta genom att högerklicka var som helst på sidan och välja Visa sidkälla och sedan hitta taggarna <head>...</head>.
mellan dessa taggar, leta efter <link> element som också har rel='stylesheet'. Titta sedan för att se vilka av dem som kommer från ditt temas katalog. Webbadresserna i formatmallar kommer att berätta var i temastrukturen för att hitta dem.
Observera att om du kör en plugin som kombinerar och förminskar alla webbplatsens formatmallar i en fil denna teknik kommer inte att fungera, eftersom allt du ser är webbadressen till den enda filen. Använd istället teknik två och kontrollera funktionsfilen.
kontrollera Funktionsfilen
när ett tema använder ett stilark måste det berätta för WordPress vilken fil den vill använda, genom en funktion som heter wp_enqueue_style(). Således kan vi se exakt vilken formatmall(er) temat laddas genom att hitta dess användning av denna funktion.
varje tema har en fil med namnet ”funktioner.php ” ligger i sin rotkatalog. Användning av funktionen wp_enqueue_style() finns vanligtvis i den här filen, så öppna den och börja söka efter funktionsnamnet.
när du hittar instanser av funktionen wp_enqueue_style(), leta mellan parenteserna efter den andra parametern, dvs textbiten efter det första kommatecken. Den texten visar platsen för formatmallen. Exempelvis:
wp_enqueue_style('main-style', get_template_directory_uri() . '/css/mainstyle.css');
i ovanstående kod är den andra parametern:
get_template_directory_uri() . '/css/mainstyle.css')
detta berättar stilmallen är i ett tema underkatalog som heter ”css”, och att dess filnamn är ” mainstyle.css”.
så här identifierar du vilken CSS som ska ändras
när du vet hur du lägger till eller redigerar tema CSS, är nästa sak att lära dig hur du tar reda på vilken kod du faktiskt behöver ändra.
det bästa sättet att göra detta är att använda utvecklarverktygen i din webbläsare, helst antingen Chrome eller Firefox på grund av kvaliteten på deras verktyg.
låt oss säga att du till exempel vill ändra teckenstorleken på dina inläggstitlar. Högerklicka på en av inläggstitlarna och välj alternativet inspektera:
detta öppnar Utvecklarverktygspanelen. Titta på fliken stilar för en font-size egenskap.
om du inte ser en kan webbläsaren visa dig ett överordnat eller underordnat element, så på fliken Element kan du försöka klicka på närliggande element tills du hittar ett element som båda exakt belyser formen på inläggets titeltext och har en font-size egenskap:
nu, på fliken stilar, försök ändra värdet för egenskapen font-size. Om du ser texten Ändra storlek i webbläsarfönstret vet du att du har hittat rätt CSS.
om du vill veta var i formatmallen denna CSS är, titta längst upp till höger på den plats där du just redigerat font-size värde. Du bör se ett filnamn, sedan ett kolon, sedan ett nummer.
filnamnet berättar vilken formatmall koden är i, och numret efter kolon berättar på vilken rad du hittar den koden. Till exempel visar bilden ovan kod från ”style.css ” fil på rad 4054. Om du direkt redigerar temaformatmallen kan du nu öppna den, gå till radnumret i fråga och ändra CSS.
om du arbetar i det extra CSS-fältet i Temaanpassaren eller inom ett barntema måste du också rikta in samma väljare som den ursprungliga CSS, så att du kan åsidosätta den med din egen styling.
tillbaka i webbläsarens utvecklarverktyg, leta efter väljaren som ligger ovanför egenskapen font-size som du just ändrade. Det är till vänster om stilarkfilen och radnummerspecifikationen som vi just tittade på.
kopiera hela väljaren och klistra in den i din anpassade kod och använd den för att korrekt rikta in ditt modifierade font-size – värde.
Kontrollera alltid efter inbakade temaalternativ
innan du går till besväret med att anpassa CSS, kolla alltid in Temaanpassaren för alternativ som utvecklaren kanske redan har bakat in i temat.
teman har ofta ganska omfattande anpassningsalternativ som inte kräver anpassad kod. Så innan du redigerar någon CSS kan du spara mycket tid genom att se om det redan finns ett tryckknappssätt för att göra den ändring du behöver.
hur man anpassar ett WordPress-Tema Steg för steg
nu när vi har pratat om hur man anpassar ett WordPress-temas CSS och HTML, kanske du känner dig lite osäker på var du ska börja. Så låt oss koka ner saker till en grundläggande lista med steg att följa:
- kontrollera Temaanpassaren för att se om det redan finns ett alternativ som kan underlätta den ändring du vill göra
- om inte, och du måste lägga till några enkla anpassade CSS, använd ytterligare CSS-fältet i Temaanpassaren
- om du behöver göra mer omfattande anpassningar till HTML eller CSS, överväga att göra dem inom ett barntema
- för att göra små ändringar Direkt temat, Använd WordPress i inbyggd temaredigerare
- för mer djupgående förändringar direkt till ett tema, Använd antingen FTP, en fjärranslutning eller arbeta helt offline med XAMPP
- när du har valt din redigeringsmetod, identifiera temats stilmall(er) genom att inspektera webbplatsens
<head>– kod eller titta i temats ”funktioner.php ” för användning av funktionenwp_enqueue_style() - leta reda på de specifika raderna i CSS som du behöver ändra och deras relaterade väljare genom att använda funktionen inspektera Chrome eller Firefox developer tools
när du gräver i allt ovan och blir bekant börjar du se hur anpassningsbar WordPress är.
innan du vet ordet av det, kommer du att göra din egen helt original barn teman och skapa mönster alla dina egna.
och det händer bara att lära sig” hur man gör ett barntema i WordPress ” är nästa handledning som kommer upp i denna serie. Håll ögonen öppna!