Kõik WordPressis stiilide ja skriptide lisamise kohta
WordPress pakub mitut meetodit stiilide ja skriptide lisamiseks kasutajaliidese ja administraatori jaoks, nii failide lisamiseks kui ka muutujate/väljundite otse väljastamiseks. See postitus käsitleb üksikasjalikult koodinäiteid selle kohta, kuidas WordPressi skripte ja stiile õigesti lisada.
Skripte ja stiile saab registreerida ja järjekorda panna, määrates unikaalsed käepidemed (nälkjas sarnased ID-d), mis võimaldab WordPressil kõrvaldada duplikaadid (nt mitu jQuery teeki) ja käsitleda sõltuvusi (millist laadi või skripti laadida enne seda ja seda) .
Kui stiilide või skriptide registreerimiseks pole erilist vajadust, saate need kohe järjekorda panna, jättes registreerimise vahele. Samuti on käepidemele viidates võimalik stiile ja skripte (wp_dequeue_scriptja) kustutada või järjekorrast eemaldada. wp_dequeue_styleTavaliselt aitab see konksu prioriteedile suurema arvu lisamisest (pannes selle jooksma pärast konksu, kus üksused olid järjekorda pandud).
PS: Gutenbergi stiilide ja skriptide lisamist (nii administraatori- kui ka esiserva plokid) selgitatakse minu postituses Gutenberg: The Basics.
Skriptide ja stiilide lisamine kasutajaliidesele
Stiilide ja skriptide lisamiseks ainult kasutajaliidesele kasutage konksu wp_enqueue_scripts. Hooki nimest hoolimata kasutatakse seda nii skriptide kui ka stiilide jaoks. Siin on näide stiilitabeli ja javascripti faili järjekorda asetamisest teemas:
add_action('wp_enqueue_scripts', function() {
// Styles
wp_enqueue_style('main-style', get_stylesheet_directory_uri().'/style.css', [], '1.0');
// Scripts
wp_enqueue_script('main-script', get_stylesheet_directory_uri().'/assets/js/main.js', ['jquery'], '', true);
});Kolmas argument nii stiilide kui ka skriptide puhul on sõltuvustega massiiv. Näiteks skriptide puhul võiksite laadida jQuery teegi enne skriptifaili. Märkus. WordPressi installid on kaasas hunniku tavalisi skriptiteeke (nt jQuery, jQuery kasutajaliides, selgroog ja alakriips). Kuni lisate mõne nendest käepidemetest oma skripti enqueue_script sõltuvusena, paneb WordPress need järjekorda, nii et te ei pea nende teekide jaoks oma faile lisama.
Viies argument skriptide puhul on see, kas skript tuleks laadida sildi lõpus <body>(jaluses), mitte <head>märgendi sees.
Pluginas kasutamiseks peate kohaliku faili URL-i hankimiseks kasutama muid meetodeid, näiteks plugin_dir_url(__FILE__).
Skriptide ja stiilide lisamine administraatorile
WordPress pakub veel ühte konksu admin_enqueue_scriptsstiilide ja skriptide lisamiseks ainult administraatorile. Kasutage skriptide ja stiilide registreerimiseks, järjekorda seadmiseks ja lokaliseerimiseks samu meetodeid nagu ülal:
add_action('admin_enqueue_scripts', function() {
global $pagenow, $post_type;
// Example: $hook == 'edit.php'
// Example: $post_type == 'post'
// wp_enqueue_style or wp_enqueue_script
});Skriptide ja stiilide lisamine sisselogimislehele
Kuna kumbki ülaltoodud konks ei ilmu administraatori sisselogimisekraanile, pakub WordPress selleks eraldi konksu, login_enqueue_scripts.
add_action('login_enqueue_scripts', function() {
// wp_enqueue_style or wp_enqueue_script
});Javascripti muutujate väljastamine
Javascripti muutujate väljastamiseks (nt teede, tõlgitud stringide või muude muutujate hankimiseks võite kasutada faili wp_localize_script. See funktsioon nõuab järjekorda pandud skripti käepidet. Teine parameeter oleks muutuja nimi ja kolmas selle väärtus. Väärtus võib olla massiiv, näiteks :
Skripti sees on teil juurdepääs edastatud muutujatele, näiteks:
jQuery(document).ready(function($) {
console.log(Theme_Variables.ajax_url);
});Selles konksus pääsete juurde globaalsetele muutujatele $pagenowja $post_typesaate täpsemalt määrata, kuhu soovite oma stiilid ja skriptid järjekorda panna.
Tekstisiseste stiilide väljastamine
Kui teil on vaja väljastada tekstisiseseid stiile, näiteks kohandajas seadistatud teemamuutujate jaoks (nt kasutades get_theme_mod), saate need väljastada wp_add_inline_stylefunktsiooni abil. See toimib üsna sarnaselt Javascripti muutujate väljastamisele, milles peate esitama järjekorda pandud stiilikäepideme:
add_action('wp_enqueue_scripts', function() {
// wp_enqueue_style('main-style'); // Must exist!
$color = get_theme_mod('my-custom-color'); // e.g. #FF0000
$custom_css = "
body {
background: {$color};
}";
wp_add_inline_style('main-style', $custom_css);
});Asünkrooniliste siltide lisamine skriptidele
Kahjuks pole otsest funktsiooni ega filtrit, asyncmida teie skriptimärgenditele lisada, kuid me saame selle saavutada, manipuleerides stringiga, mida WordPress kasutab kõigi järjekorda pandud skriptide skriptimärgendite väljastamiseks (pidage meeles, et määrake oma skript selle käepideme järgi):