Share
Zonder CSS kunt u zeer beperkte keuzes maken om uw webpagina's vorm te geven. En zonder de juiste CSS-insluiting in WordPress, kunt u het zeer moeilijk maken voor de gebruikers van uw thema om de styling van het thema aan te passen.
In deze zelfstudie gaan we kijken naar de juiste manier om CSS in te huren voor WordPress.
WordPress is momenteel het populairste contentbeheersysteem ter wereld en heeft tientallen miljoenen gebruikers. Daarom moeten we, om een succesvol thema te maken, denken als elke WordPress-gebruiker en proberen het boek te doorlopen en onze CSS-bestanden correct in onze thema's te laden.
In de loop der jaren heeft WordPress zijn code uitgebreid om het steeds flexibeler te maken, en het in de hand houden van CSS en JavaScript was een stap in die richting. Onze slechte gewoonten bleven echter nog een tijdje bestaan. Omdat we wisten dat WordPress CSS en JavaScript-inquisitie introduceerde, bleven we deze code toevoegen aan onze header.php bestanden:
... of we hebben de onderstaande code toegevoegd aan onze functions.php bestanden, denkend dat het beter was:
Accentsconagua
"; add_action ('wp_head', 'add_stylesheet_to_head');?> In de bovenstaande gevallen kan WordPress niet bepalen of de CSS-bestanden in de pagina zijn geladen of niet. Dat is misschien een vreselijke fout!
Als een andere plug-in hetzelfde CSS-bestand gebruikt, kan deze niet controleren of het CSS-bestand al in de pagina is opgenomen. Vervolgens laadt de plug-in hetzelfde bestand voor een tweede keer, wat resulteert in dubbele code.
Gelukkig heeft WordPress een vrij eenvoudige oplossing voor dit soort problemen: het registreren en bijhouden van stylesheets.
Zoals we eerder al zeiden, is WordPress door de jaren heen enorm gegroeid en wij moet denk na over elke WordPress-gebruiker ter wereld.
Naast deze moeten we ook duizenden WordPress-plug-ins meenemen. Maar laat deze grote aantallen je niet afschrikken: WordPress heeft behoorlijk nuttige functies om CSS-stijlen correct in WordPress te laden.
Laten we eens kijken.
Als u CSS-stylesheets gaat laden, moet u ze eerst registreren bij de wp_register_style () functie:
$ handle (string, vereist) is een unieke naam voor uw stylesheet. Andere functies gebruiken dit "handvat" om uw stylesheet in te checken en af te drukken.$ src (string, vereist) verwijst naar de URL van het stylesheet. U kunt functies zoals gebruiken get_template_directory_uri () om de stijlbestanden binnen de directory van uw thema te krijgen. Denk nooit aan hardcodering!$ deps (array, optioneel) verwerkt namen voor afhankelijke stijlen. Als je stylesheet niet werkt als een ander stijlbestand ontbreekt, gebruik dan deze parameter om de "afhankelijkheden" in te stellen. $ ver (string of Boolean, optioneel) is het versienummer. U kunt het versienummer van uw thema gebruiken of verzinnen, als u dat wilt. Als u geen versienummer wilt gebruiken, stelt u dit in op nul. Het is standaard ingesteld op vals, waardoor WordPress zijn eigen versienummer toevoegt.$ media (string, optioneel) is de CSS-mediatype zoals "scherm" of "handheld" of "print". Als u niet zeker weet of u dit moet gebruiken, gebruik het dan niet. Het staat standaard op "alles".Hier is een voorbeeld voor de wp_register_style () functie:
Het registreren van stijlen is een soort van "optioneel" in WordPress. Als je denkt dat je stijl door geen enkele plug-in gebruikt gaat worden, of als je geen code gebruikt om het te laden nog een keer, je bent vrij om de stijl in te voeren zonder deze te registreren. Kijk hoe het hieronder staat.
Nadat we ons stijlbestand hebben geregistreerd, moeten we het 'in de wachtrij plaatsen' om het gereed te maken voor laden in onze thema's sectie.
We doen dit met de wp_enqueue_style () functie:
De parameters zijn precies hetzelfde met de wp_register_style () functie, dus niet nodig om ze te herhalen.
Maar zoals we zeiden de wp_register_style () functie is niet verplicht, ik moet u zeggen dat u kunt gebruiken wp_enqueue_style () op twee verschillende manieren:
Houd er rekening mee dat als een plug-in je stylesheet moet vinden of als je het in verschillende delen van je thema wilt laden, je het zeker eerst moet registreren.
We kunnen niet alleen het wp_enqueue_style () functioneer overal in ons thema - we moeten "acties" gebruiken. Er zijn drie acties die we voor verschillende doeleinden kunnen gebruiken:
wp_enqueue_scripts voor het laden van scripts en stijlen in de front-end van onze website,admin_enqueue_scripts voor het laden van scripts en stijlen in de pagina's van ons administratiepaneel,login_enqueue_scripts voor het laden van scripts en stijlen op de aanmeldingspagina van WordPress.Hier zijn de voorbeelden voor deze drie acties:
Er is een belangrijke aankondiging in Make WordPress: "Gebruik wp_enqueue_scripts (), niet wp_print_styles ()!". Het vertelt je over een mogelijke incompatibiliteitsfout met WordPress v3.3.
Er zijn een aantal zeer nuttige functies over CSS in WordPress: ze stellen ons in staat om inline-stijlen af te drukken, de wachtstatus van onze stijlbestanden te controleren, metadata toe te voegen voor onze stijlbestanden en stijlen te de-registreren..
Laten we eens kijken.
wp_add_inline_style () Als uw thema opties heeft om de stijl van het thema aan te passen, kunt u inline-styling gebruiken om ze af te drukken met de wp_add_inline_style () functie:
Snel en gemakkelijk. Onthoud echter: u moet dezelfde wachtleestijl gebruiken met het stijlblad waaraan u inline styling later wilt toevoegen.
wp_style_is () In sommige gevallen is het mogelijk dat we de informatie over de stijl van een stijl nodig hebben: is deze geregistreerd, is deze in de wachtrij geplaatst, is deze afgedrukt of wacht deze te worden afgedrukt? Je kunt het bepalen met de wp_style_is () functie:
wp_style_add_data () Hier is een geweldige functie genaamd wp_style_add_data () waarmee je metadata aan je stijl kunt toevoegen, inclusief voorwaardelijke opmerkingen, RTL-ondersteuning en meer!
Bekijken:
add_data ('mytheme-ie', 'conditional', 'lte IE 9'); * wp_style_add_data () is echter schoner. * / add_action ('wp_enqueue_scripts', 'mytheme_ie_style'); ?> Geweldig, is het niet?
[Als ik me niet vergis, is dit de eerste tutorial die ooit over deze kleine, maar nuttige functie is geschreven.
wp_deregister_style () Als u ooit een stylesheet wilt "afmelden" (om het bijvoorbeeld opnieuw te registreren met een gewijzigde versie), kunt u dit doen met wp_deregister_style ().
Laten we een voorbeeld zien:
Hoewel het niet verplicht is, moet je altijd een andere stijl opnieuw registreren als je je uitschrijft - je kunt iets breken als je dat niet doet.
[Er is ook een soortgelijke functie genaamd wp_dequeue_style (), die de in de wacht geplaatste stylesheets verwijdert zoals de naam doet vermoeden.
Gefeliciteerd, nu weet u alles over het correct opnemen van CSS in WordPress! Ik hoop dat je de tutorial leuk vond.
Heb je tips of ervaringen die je wilt delen? Reageer hieronder en deel uw kennis met ons! En als je dit artikel leuk vond, vergeet dan niet om het met je vrienden te delen!
