WordPress pakub mitut meetodit stiilide ja skriptide lisamiseks kasutajaliidese ja administraatori jaoks, nii failide lisamiseks kui ka muutujate\/v\u00e4ljundite otse v\u00e4ljastamiseks. See postitus k\u00e4sitleb \u00fcksikasjalikult koodin\u00e4iteid selle kohta, kuidas WordPressi skripte ja stiile \u00f5igesti lisada.<\/p>\n
Skripte ja stiile saab registreerida ja j\u00e4rjekorda panna, m\u00e4\u00e4rates unikaalsed k\u00e4epidemed (n\u00e4lkjas sarnased ID-d), mis v\u00f5imaldab WordPressil k\u00f5rvaldada duplikaadid (nt mitu jQuery teeki) ja k\u00e4sitleda s\u00f5ltuvusi (millist laadi v\u00f5i skripti laadida enne seda ja seda) .<\/p>\n
Kui stiilide v\u00f5i skriptide registreerimiseks pole erilist vajadust, saate need kohe j\u00e4rjekorda panna, j\u00e4ttes registreerimise vahele. Samuti on k\u00e4epidemele viidates v\u00f5imalik stiile ja skripte ( PS: Gutenbergi stiilide ja skriptide lisamist (nii administraatori- kui ka esiserva plokid) selgitatakse minu postituses Gutenberg: The Basics<\/a>.<\/p>\n Stiilide ja skriptide lisamiseks ainult kasutajaliidesele kasutage konksu Kolmas argument nii stiilide kui ka skriptide puhul on s\u00f5ltuvustega massiiv. N\u00e4iteks skriptide puhul v\u00f5iksite laadida jQuery teegi enne skriptifaili. M\u00e4rkus<\/strong>. WordPressi installid on kaasas hunniku tavalisi skriptiteeke (nt jQuery, jQuery kasutajaliides, selgroog ja alakriips). Kuni lisate m\u00f5ne nendest k\u00e4epidemetest<\/a> oma skripti enqueue_script s\u00f5ltuvusena, paneb WordPress need j\u00e4rjekorda, nii et te ei pea nende teekide jaoks oma faile lisama.<\/p>\n Viies argument skriptide puhul on see, kas skript tuleks laadida sildi l\u00f5pus Pluginas kasutamiseks peate kohaliku faili URL-i hankimiseks kasutama muid meetodeid, n\u00e4iteks WordPress pakub veel \u00fchte konksu Kuna kumbki \u00fclaltoodud konks ei ilmu administraatori sisselogimisekraanile, pakub WordPress selleks eraldi konksu, Javascripti muutujate v\u00e4ljastamiseks (nt teede, t\u00f5lgitud stringide v\u00f5i muude muutujate hankimiseks v\u00f5ite kasutada faili wp_localize_script. See funktsioon n\u00f5uab j\u00e4rjekorda pandud skripti k\u00e4epidet. Teine parameeter oleks muutuja nimi ja kolmas selle v\u00e4\u00e4rtus. V\u00e4\u00e4rtus v\u00f5ib olla massiiv, n\u00e4iteks :<\/p>\n Skripti sees on teil juurdep\u00e4\u00e4s edastatud muutujatele, n\u00e4iteks:<\/p>\n Selles konksus p\u00e4\u00e4sete juurde globaalsetele muutujatele Kui teil on vaja v\u00e4ljastada tekstisiseseid stiile, n\u00e4iteks kohandajas seadistatud teemamuutujate jaoks (nt kasutades Kahjuks pole otsest funktsiooni ega filtrit, wp_dequeue_script<\/code>ja) kustutada v\u00f5i j\u00e4rjekorrast eemaldada. wp_dequeue_style<\/code>Tavaliselt aitab see konksu prioriteedile suurema arvu lisamisest (pannes selle jooksma p\u00e4rast konksu, kus \u00fcksused olid j\u00e4rjekorda pandud).<\/p>\nSkriptide ja stiilide lisamine kasutajaliidesele<\/h2>\n
wp_enqueue_scripts<\/code>. Hooki nimest hoolimata kasutatakse seda nii skriptide kui ka stiilide jaoks. Siin on n\u00e4ide stiilitabeli ja javascripti faili j\u00e4rjekorda asetamisest teemas:<\/p>\nadd_action('wp_enqueue_scripts', function() {\n \/\/ Styles\n wp_enqueue_style('main-style', get_stylesheet_directory_uri().'\/style.css', [], '1.0');\n\u00a0\n \/\/ Scripts\n wp_enqueue_script('main-script', get_stylesheet_directory_uri().'\/assets\/js\/main.js', ['jquery'], '', true);\n});<\/code><\/pre>\n<body><\/code>(jaluses), mitte <head><\/code>m\u00e4rgendi sees.<\/p>\nplugin_dir_url(__FILE__)<\/code>.<\/p>\nSkriptide ja stiilide lisamine administraatorile<\/h2>\n
admin_enqueue_scripts<\/code>stiilide ja skriptide lisamiseks ainult administraatorile. Kasutage skriptide ja stiilide registreerimiseks, j\u00e4rjekorda seadmiseks ja lokaliseerimiseks samu meetodeid nagu \u00fclal:<\/p>\nadd_action('admin_enqueue_scripts', function() {\n global $pagenow, $post_type;\n \/\/ Example: $hook == 'edit.php'\n \/\/ Example: $post_type == 'post'\n \/\/ wp_enqueue_style or wp_enqueue_script\n});<\/code><\/pre>\nSkriptide ja stiilide lisamine sisselogimislehele<\/h2>\n
login_enqueue_scripts<\/code>.<\/p>\nadd_action('login_enqueue_scripts', function() {\n \/\/ wp_enqueue_style or wp_enqueue_script\n});<\/code><\/pre>\nJavascripti muutujate v\u00e4ljastamine<\/h2>\n
add_action('wp_enqueue_scripts', function() {\n \/\/ wp_enqueue_script('main-script'); \/\/ Must exist!\n $variable_to_js = [\n 'ajax_url' => admin_url('admin-ajax.php')\n ];\n wp_localize_script('main-script', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\njQuery(document).ready(function($) { \n console.log(Theme_Variables.ajax_url);\n});<\/code><\/pre>\n$pagenow<\/code>ja $post_type<\/code>saate t\u00e4psemalt m\u00e4\u00e4rata, kuhu soovite oma stiilid ja skriptid j\u00e4rjekorda panna.<\/p>\nTekstisiseste stiilide v\u00e4ljastamine<\/h2>\n
get_theme_mod<\/code>), saate need v\u00e4ljastada wp_add_inline_style<\/code>funktsiooni abil. See toimib \u00fcsna sarnaselt Javascripti muutujate v\u00e4ljastamisele, milles peate esitama j\u00e4rjekorda pandud stiilik\u00e4epideme:<\/p>\nadd_action('wp_enqueue_scripts', function() {\n \/\/ wp_enqueue_style('main-style'); \/\/ Must exist!\n\u00a0\n $color = get_theme_mod('my-custom-color'); \/\/ e.g. #FF0000\n $custom_css = \"\n body {\n background: {$color};\n }\";\n wp_add_inline_style('main-style', $custom_css);\n});<\/code><\/pre>\nAs\u00fcnkrooniliste siltide lisamine skriptidele<\/h2>\n
async<\/code>mida teie skriptim\u00e4rgenditele lisada, kuid me saame selle saavutada, manipuleerides stringiga, mida WordPress kasutab k\u00f5igi j\u00e4rjekorda pandud skriptide skriptim\u00e4rgendite v\u00e4ljastamiseks (pidage meeles, et m\u00e4\u00e4rake oma skript selle k\u00e4epideme j\u00e4rgi):<\/p>\nadd_filter('script_loader_tag', function($tag, $handle, $src) {\n if ('main-script' != $handle) {\n return $tag;\n }\n return str_replace('<script', '<script async', $tag);\n}, 11, 3);<\/code><\/pre>\nKasulikud dokumentatsioonilingid<\/h2>\n
\n