enten hvis du lager Ditt Eget WordPress-tema, et barnetema fra det overordnede eller redigerer et tema, vil du møte behovet for å legge til DITT EGET CSS-tilpassede stilark. Sannsynligvis vil du også overstyre noen stiler fra standardtema stilark.
det finnes flere måter å legge til dine egne stiler og / eller overstyre standardstiler. Så hva er den beste måten å gjøre det på? Utviklere vil være enige om at det er ved å lage dine egne CSS-filer og legge dem inn I WordPress-temaet du jobber med.
Måter å legge til tilpasset CSS-kode Til WordPress-temaer
Vi snakker ikke Om avskrivede måter å legge TIL CSS-stiler i HTML-elementer, eller legge til< stil > blokker. I dag blir disse metodene forlatt av utviklere. OGSÅ, DE ER IKKE SEO vennlig, som er en viktig sak å bry seg om i dag.
vi vil ikke engang foreslå redigering tema opprinnelige CSS stilark (vanligvis stil.css), eller legge til egendefinert kode til den. Denne filen er ofte veldig stor og vanskelig å administrere. Enhver liten skrivefeil eller syntaksfeil i det kan føre til at hele nettstedet krasjer.
i denne artikkelen vil vi vise deg hvordan du lager en tilpasset CSS-fil og legger den inn I Et WordPress-tema.
Det finnes flere metoder for å legge til tilpasset CSS-kode Til WordPress-temaer. Hva er beste praksis?
slik legger du til egendefinerte stilarkfiler Til WordPress-temaer ved hjelp av wp_register_style() og wp_enqueue_style()
det første trinnet med å legge til egendefinerte CSS-filer Til WordPress, er å legge til filer i temaet ditt. Enten ved hjelp AV EN FTP-klient eller cPanels Filbehandler finne temamappen og åpne den. Nå kan du enten opprette en ny fil og navn i for eksempel tilpasset.css eller last OPP CSS-filen fra datamaskinen. I tilfelle du trenger å legge til mer ENN EN CSS-fil TIL WP tema gjenta dette trinnet.
hvis du fullførte dette trinnet riktig, bør du se din tilpassede CSS-fil eller filer i WordPress-Installasjonstemaeditoren.
Knytte tilpassede CSS-filer nettstedets hoveddel
Nå som du har lagt til dine egendefinerte CSS-filer I wp-temamappen, er det på tide å koble filene til nettstedets <hode > – seksjon. På denne måten kan området bruke de egendefinerte stilene på elementene.
du kan ganske enkelt legge til en <link> element til nettstedets <head> seksjon, foretrukket rett før den avsluttende </head> taggen. På denne måten tilpassede CSS stiler laste siste og overstyre standard stiler. Den <head > delen av nettstedet ditt er vanligvis plassert i tema-mappen header.php-fil og er tilgjengelig gjennom WordPress Theme editor.
her er et eksempel på – elementet når nettstedet ditt ligger i mappen » test-site «i rotmappen til serveren din, temamappen din kalles» test-theme «og CSS-filen din kalles» custom.css»:
<link rel="stylesheet" href="/test-site/wp-content/themes/test-theme/custom.css" type="text/css" media="all">Denne enkle løsningen vil fungere fint, men det er ikke den beste praksisen med å legge INN CSS-filer i WordPress-nettsteder.
Embeding EN CSS-fil Til WordPress ved hjelp av wp_register_style () og wp_enqueue_style () funksjoner
den anbefalte praksisen for å legge inn tilpassede CSS-filer Til WordPress-siden din, er ved å registrere stilarket ditt I wp-temaets funksjoner.php-fil ved hjelp av wp_register_style() og wp_enqueue_style () funksjoner. PÅ denne måten CSS-filer vil laste i det øyeblikket når wp_head handling utløses. Stilarket vil bli plassert rett etter temaets standard stilark. og lar deg overstyre standardstiler.
det første du må gjøre er å finne temaets funksjoner.php-fil. Den ligger inne I WordPress Theme editor. Du kan også gjøre det ved HJELP AV FTP Eller cPanels File Manager. Hvis du jobber med et barn-tema, redigere barne-temaer funksjoner fil, ikke foreldre-tema en. På denne måten unngår du å miste den egendefinerte koden når du oppdaterer overordnet tema. Rull ned til bunnen av funksjoner.php og legg til følgende kodebit:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_enqueue_style( 'custom' );}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );Tilpass tekstutdrag: i eksempelet ovenfor, vi kalt registreringsfunksjonen «additional_stylesheets», og registrert en STILARK CSS-fil som heter » custom.css», tidligere lastet opp i vår temamappe. Du kan navngi funksjonen som du vil, og erstatte funksjonsnavnet i øverste og nederste rad av snipet. Hvis stilarkfilen har et annet navn enn egendefinert.css erstatt ordet tilpasset i snipet med ditt eget filnavn.
hvis du har gjort alt riktig, kan du begynne å skrive DIN EGEN CSS-kode i stilarket. Du vil legge merke til stilene dine som påvirker nettstedet når du lagrer endringer og laster siden på nytt. Ikke glem å rense nettleserens cache når du oppdaterer siden.
Embeding flere tilpassede STILARK CSS-filer i funksjoner.php bruker wp_register_style() og wp_enqueue_style()
før du legger til flere CSS-filer TIL WP tema, ta i betraktning at det fører til flere serverforespørsler når nettstedet lastes som påvirker nettstedets lasting hastighet. Prøv å bruke som mindre stilark som mulig.
la Oss nå si at du har en egen stilarkfil for skrivebordsstiler kalt tilpasset.css og en annen stilarkfil som heter responsive.css for mobile enheter. Embedding begge stilarkene i dine funksjoner.php-filen er enkel og krever en liten endring av enkeltfilutdrag vist ovenfor:
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' );samme som å tilpasse enkeltfilbiten, endre filnavnene i henhold til situasjonen din.
mer om wp_register_style() og wp_enqueue_style() funksjoner
hvis du vil vite mer om bruk av wp_register_style() og wp_enqueue_style() funksjoner for å registrere stilark, kan du gå til den dedikerte Wp Codex-siden.