antingen om du skapar ditt eget WordPress-tema, ett barntema från det är förälder eller redigerar ett tema, kommer du att stöta på behovet av att lägga till ditt eget CSS-anpassade stilark. Troligtvis kommer du också vill åsidosätta vissa stilar från standardtema stilmallen.
det finns flera sätt att lägga till egna stilar och/eller åsidosätta standardformat. Så vad är det bästa sättet att göra det? Utvecklare kommer överens om att det är genom att skapa dina egna CSS-filer och bädda in dem i WordPress-temat du arbetar med.
sätt att lägga till anpassad CSS-kod till WordPress-Teman
vi pratar inte om avskrivna sätt att lägga till CSS-stilar i HTML-element eller lägga till <stil> block. Numera överges dessa metoder av utvecklare. De är inte heller SEO-vänliga, vilket är en viktig fråga att bry sig om nuförtiden.
vi kommer inte ens föreslå redigering tema ursprungliga CSS stylesheet (vanligtvis stil.css), eller lägga till anpassad kod till den. Den här filen är ofta mycket stor och svår att hantera. Alla små skrivfel eller syntaxfel i det kan orsaka att hela webbplatsen kraschar.
i den här artikeln visar vi dig hur du skapar en anpassad CSS-fil och bäddar in den i ett WordPress-tema.
det finns flera metoder för att lägga till anpassad CSS-kod till WordPress-Teman. Vad är bästa praxis?
hur man lägger till anpassade stilmall filer till WordPress teman med wp_register_style() och wp_enqueue_style()
det första steget i embeding anpassade CSS-filer till WordPress är att lägga till filer till ditt tema. Antingen med hjälp av en FTP-klient eller din cPanels filhanterare leta reda på din temamapp och öppna den. Nu kan du antingen skapa en ny fil och namn i till exempel Anpassad.css eller ladda upp CSS-filen från din dator. Om du behöver lägga till mer än en CSS-fil till ditt WP-tema, upprepa detta steg.
om du har slutfört det här steget korrekt bör du se din anpassade CSS-fil eller filer i din WordPress-Installationstema-redigerare.
länka anpassade CSS-filer webbplatsens huvudavsnitt
nu när du har lagt till dina anpassade CSS-filer i din WP-temamapp är det dags att länka filerna till webbplatsens<Huvud > avsnitt. På så sätt kan Webbplatsen tillämpa dina anpassade stilar på dess element.
du kan helt enkelt lägga till ett <länk> element till din webbplats <Huvud> avsnitt, föredra precis innan stängningen </Huvud> tagg. På så sätt laddar anpassade CSS-stilar sist och åsidosätter standardformat. Avsnittet<head > på din webbplats finns vanligtvis i din temamapprubrik.php-fil och är tillgänglig genom WordPress-temaredigeraren.
här är ett exempel på -elementet när din webbplats finns i mappen ”test-site” i rotmappen på din server, din temamapp heter ”test-theme” och din CSS-fil heter ”custom.css”:
<link rel="stylesheet" href="/test-site/wp-content/themes/test-theme/custom.css" type="text/css" media="all">den här enkla lösningen fungerar bra men det är inte den bästa praxisen att bädda in CSS-filer till WordPress-webbplatser.
Embeding en CSS-fil i WordPress med wp_register_style() och wp_enqueue_style() funktioner
den rekommenderade praxis att bädda in anpassade CSS-filer till din WordPress webbplats är genom att registrera din stilmall i din WP tema funktioner.php-fil med wp_register_style () och wp_enqueue_style () funktioner. På så sätt laddas dina CSS-filer i det ögonblick då wp_head-åtgärden utlöses. Din stilmall kommer att placeras direkt efter temats standardformatmall. och låter dig åsidosätta standardformat.
det första du behöver göra är att hitta ditt temas funktioner.php-fil. Det ligger inne i WordPress Theme editor. Du kan också göra det med FTP eller Cpanels File Manager. Om du arbetar med ett barn-tema, redigera barn-teman funktioner fil, inte den överordnade-tema en. På så sätt undviker du att förlora din anpassade kod när du uppdaterar det överordnade temat. Bläddra ner till botten av funktioner.php och Lägg till följande kodavsnitt:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_enqueue_style( 'custom' );}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );anpassa kodavsnittet: i exemplet ovan namngav vi registreringsfunktionen ”additional_stylesheets” och registrerade en stilmall CSS-fil med namnet ”custom.css”, som tidigare laddats upp i vår temamapp. Du kan namnge funktionen som du vill och ersätta funktionsnamnet i den övre och nedre raden på snipet. Om din stilmall fil heter annorlunda än Anpassad.css ersätt ordet anpassad i snipet med ditt eget filnamn.
om du har gjort allt korrekt kan du börja skriva din egen CSS-kod i ditt stilark. Du kommer att märka dina stilar som påverkar webbplatsen när du sparar ändringar och laddar om sidan. Glöm inte att rengöra webbläsarens cache när du uppdaterar sidan.
Embeding flera anpassade stilmallar CSS-filer till funktioner.php använda wp_register_style() och wp_enqueue_style()
innan du lägger till flera CSS-filer till ditt WP-tema, ta hänsyn till att det orsakar fler serverförfrågningar när webbplatsen laddas vilket påverkar webbplatsens laddningshastighet. Försök att använda så mindre stilmallar som möjligt.
låt oss nu säga att du har en separat stilarkfil för skrivbordsstilar som heter custom.css och en andra formatmall fil med namnet responsive.css för Mobila enheter. Bädda in båda formatmallar i dina funktioner.php-filen är enkel och kräver en liten ändring av det enda filutdraget som visas ovan:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_register_style( 'responsive', get_template_directory_uri().'/responsive.css' );// register another file herewp_enqueue_style( 'custom' );wp_enqueue_style( 'responsive' );// enqueue another file here}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );samma som att anpassa enstaka filutdrag, ändra filnamnen i enlighet med din situation.
mer om wp_register_style() och wp_enqueue_style() funktioner
om du vill veta mer om att använda wp_register_style() och wp_enqueue_style() funktioner för att registrera formatmallar besök dedikerad WP Codex sida.