Share
Uten CSS har du svært begrensede valg for å utforme websidene dine. Og uten riktig CSS-inkludering inne i WordPress, kan du gjøre det ekstremt vanskelig for temaets brukere å tilpasse temaets styling.
I denne opplæringen skal vi se på den riktige måten å enqueue CSS til WordPress.
WordPress er for tiden det mest populære innholdshåndteringssystemet i verden, og det har titalls millioner brukere. Derfor må vi tenke som hver eneste WordPress-bruker for å få et vellykket tema, og prøv å gå gjennom boken og laste våre CSS-filer i våre temaer riktig.
I løpet av årene har WordPress vokst sin kode for å gjøre den mer og mer fleksibel, og enqueueing CSS og JavaScript var et trekk i den retningen. Våre dårlige vaner forblir for en stund, skjønt. Ved å vite at WordPress introduserte CSS og JavaScript enqueueing, fortsatte vi å legge til denne koden i vår header.php filer:
... eller vi la koden under i vår functions.php filer, tenkte det var bedre:
Accentsconagua
"; add_action ('wp_head', 'add_stylesheet_to_head');?> I tilfellene ovenfor kan WordPress ikke avgjøre om CSS-filene er lastet inn på siden eller ikke. Det kan være en forferdelig feil!
Hvis et annet plugin bruker samme CSS-fil, ville det ikke være i stand til å sjekke om CSS-filen allerede er inkludert på siden. Deretter laster plugin den samme filen for en gang, noe som resulterer i duplikatkode.
Heldigvis har WordPress en ganske enkel løsning på problemer som dette: registrering og enqueueing stilark.
Som vi sa tidligere, har WordPress vokst mye gjennom årene og vi må Tenk på hver eneste WordPress-bruker i verden.
I tillegg til dem må vi også ta hensyn til tusenvis av WordPress-plugins. Men ikke la disse store tallene skremme deg: WordPress har ganske nyttige funksjoner for oss å ordentlig laste CSS-stiler inn i WordPress.
La oss se.
Hvis du skal laste inn CSS stilark, bør du registrere dem først med wp_register_style () funksjon:
$ håndtak (streng, kreves) er unikt navn for stilarket ditt. Andre funksjoner vil bruke denne "handle" til enqueue og skrive ut stilarket.$ src (streng, kreves) refererer til nettadressen til stilarket. Du kan bruke funksjoner som get_template_directory_uri () for å få stilfilene i temaets katalog. Ikke tenk på hardkoding av det!$ deps (array, valgfritt) håndterer navn for avhengige stiler. Hvis stilarket ditt ikke fungerer hvis noen annen stilfil mangler, bruk denne parameteren til å angi "avhengighetene". $ ver (streng eller boolesk, valgfritt) er versjonen. Du kan bruke temaets versionsnummer eller sminke en, hvis du vil. Hvis du ikke vil bruke et versjonsnummer, må du sette det til null. Det er som standard falsk, som gjør at WordPress legger til sitt eget versjonsnummer.$ media (streng, valgfritt) er CSS-medietyper som "skjerm" eller "håndholdt" eller "utskrift". Hvis du ikke er sikker på at du må bruke dette, må du ikke bruke det. Det er som standard "alt".Her er et eksempel på wp_register_style () funksjon:
Registrering av stiler er en slags "valgfri" i WordPress. Hvis du ikke tror at stilen din skal brukes av noen plugin, eller du ikke skal bruke noen kode for å laste den en gang til, Du kan fritt legge stilen uten å registrere den. Se hvordan det gjøres nedenfor.
Etter å ha registrert vår stilfil, må vi "enqueue" den for å gjøre den klar til å lastes inn i vårt tema seksjon.
Vi gjør dette med wp_enqueue_style () funksjon:
Parametrene er nøyaktig det samme med wp_register_style () funksjon, så det er ikke nødvendig å gjenta dem.
Men som vi sa wp_register_style () funksjon er ikke obligatorisk, jeg burde fortelle deg at du kan bruke wp_enqueue_style () på to forskjellige måter:
Husk at hvis et plugin må finne stilarket ditt eller du har tenkt å laste det i ulike deler i temaet ditt, bør du definitivt registrere det først.
Vi kan ikke bare bruke wp_enqueue_style () fungere hvor som helst i vårt tema - vi må bruke "handlinger". Det er tre handlinger vi kan bruke til ulike formål:
wp_enqueue_scripts for å laste inn skript og stiler i fronten av nettstedet vårt,admin_enqueue_scripts for å laste inn skript og stiler på sidene i administrasjonspanelet,login_enqueue_scripts for å laste inn skript og stiler i WordPress-innloggingssiden.Her er eksemplene på disse tre handlingene:
Det er en viktig kunngjøring i Make WordPress: "Bruk wp_enqueue_scripts (), ikke wp_print_styles ()!". Det forteller deg om en mulig inkompatibilitetsfeil med WordPress v3.3.
Det finnes noen svært nyttige funksjoner om CSS i WordPress: De tillater oss å skrive ut inline-stiler, kontrollere enqueue-tilstanden til stilfilene våre, legge til metadata for stilfilene våre og avregistreringsstiler.
La oss se.
wp_add_inline_style () Hvis temaet ditt har muligheter til å tilpasse stilen til temaet, kan du bruke inline styling for å skrive ut dem med wp_add_inline_style () funksjon:
Fort og lett. Husk om: Du må bruke det samme hadle-navnet med stilarket du vil legge til i styling etter.
wp_style_is () I noen tilfeller kan vi trenge informasjonen i en stilstilstand: Er det registrert, er det enqueued, skrives det ut eller venter på å bli skrevet ut? Du kan bestemme det med wp_style_is () funksjon:
wp_style_add_data () Her er en fantastisk funksjon som heter wp_style_add_data () som lar deg legge til metadata i stilen din, inkludert betingede kommentarer, RTL-støtte og mer!
Sjekk det ut:
add_data ('mytheme-ie', 'conditional', 'lte IE 9'); * wp_style_add_data () er imidlertid renere. * / add_action ('wp_enqueue_scripts', 'mytheme_ie_style'); ?> Fantastisk, er det ikke?
[Hvis jeg ikke gjør feil, er dette den første opplæringen som er skrevet om denne lille men nyttige funksjonen.
wp_deregister_style () Hvis du noen gang trenger å "avregistrere" et stilark (for å registreere det med en endret versjon, for eksempel), kan du gjøre det med wp_deregister_style ().
La oss se et eksempel:
Selv om det ikke er nødvendig, bør du alltid omregistrere en annen stil hvis du avregistrerer en - du kan bryte noe hvis du ikke gjør det.
[Det er også en lignende funksjon som heter wp_dequeue_style (), som fjerner de enqueued stylesheets som navnet antyder.
Gratulerer, nå vet du alt om å inkludere CSS i WordPress riktig! Håper du likte opplæringen.
Har du noen tips eller erfaringer du vil dele? Kommentar nedenfor og del dine kunnskaper med oss! Og hvis du likte denne artikkelen, ikke glem å dele den med vennene dine!
