WordPress tarjoaa useita tapoja lisätä tyylejä ja komentosarjoja käyttöliittymälle ja järjestelmänvalvojalle, sekä tiedostojen lisäämiseen että muuttujien/tulosteen suoraan tulostamiseen. Tämä viesti käsittelee yksityiskohtaisesti koodiesimerkkejä siitä, kuinka skriptejä ja tyylejä lisätään WordPressiin oikealla tavalla.
Skriptejä ja tyylejä voidaan rekisteröidä ja asettaa jonoon määrittämällä yksilölliset kahvat (slug-tyyppiset tunnukset), jolloin WordPress voi poistaa kaksoiskappaleet, kuten useita jQuery-kirjastoja, ja käsitellä riippuvuuksia (mikä tyyli tai komentosarja ladataan ennen tätä ja sitä) .
Jos ei ole erityistä tarvetta rekisteröidä tyylejä tai komentosarjoja, voit laittaa ne heti jonoon ja jättää rekisteröinnin väliin. Tyylien ja komentosarjojen (wp_dequeue_scriptja wp_dequeue_style) rekisteröinti on myös mahdollista kahvaan viittaamalla. Se yleensä auttaa lisäämällä suuremman numeron koukun prioriteettiin (saamalla sen juoksemaan sen koukun jälkeen, jossa kohteet olivat jonossa).
PS: Tyylien ja komentosarjojen lisääminen Gutenbergiin (sekä järjestelmänvalvojan että käyttöliittymän lohkot) selitetään viestissäni Gutenberg: The Basics.
Skriptien ja tyylien lisääminen käyttöliittymään
Jos haluat lisätä tyylejä ja skriptejä vain käyttöliittymään, käytä koukkua wp_enqueue_scripts. Koukun nimestä huolimatta sitä käytetään sekä skripteihin että tyyleihin. Tässä on esimerkki tyylitaulukon ja javascript-tiedoston asettamisesta jonoon teemassa:
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 argumentti sekä tyyleille että skripteille on riippuvuuksia sisältävä matriisi. Esim. skriptejä varten saatat haluta ladata jQuery-kirjaston ennen komentosarjatiedostoasi. Huomautus: WordPress-asennuksissa on mukana joukko yleisiä komentosarjakirjastoja (esimerkiksi jQuery, jQuery UI, Backbone ja Underscore). Niin kauan kuin lisäät jonkin näistä kahvoista riippuvuudeksi enqueue_script-tiedostoosi, WordPress lisää ne jonoon, joten sinun ei tarvitse lisätä omia tiedostojasi näihin kirjastoihin.
Viides argumentti komentosarjoille on, pitäisikö skripti ladata tunnisteen loppuun <body>(alatunnisteeseen) <head>tunnisteen sijaan.
Jotta voit käyttää laajennusta, sinun on käytettävä muita menetelmiä paikallisen tiedoston URL-osoitteen saamiseksi, esimerkiksi plugin_dir_url(__FILE__).
Skriptien ja tyylien lisääminen järjestelmänvalvojaan
WordPress tarjoaa toisen koukun, admin_enqueue_scripts, tyylien ja komentosarjojen lisäämiseen vain järjestelmänvalvojalle. Käytä samoja menetelmiä kuin yllä skriptien ja tyylien rekisteröintiin, jonoon ja lokalisoimiseen:
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
});Skriptien ja tyylien lisääminen kirjautumissivulle
Koska kumpikaan yllä olevista koukuista ei näy järjestelmänvalvojan kirjautumisnäytössä, WordPress tarjoaa tähän tarkoitukseen erillisen koukun, login_enqueue_scripts.
add_action('login_enqueue_scripts', function() {
// wp_enqueue_style or wp_enqueue_script
});Javascript-muuttujien tulostaminen
Javascript-muuttujien tulostamiseen (esim. polkujen, käännettyjen merkkijonojen tai muiden muuttujien hankkimiseen voit käyttää wp_localize_scriptia. Tämä toiminto vaatii jonossa olevan komentosarjan kahvan. Toinen parametri olisi muuttujan nimi ja kolmas sen arvo. Arvo voi olla taulukko, kuten esim. :
Skriptin sisällä sinulla on pääsy välitettyihin muuttujiin, kuten:
jQuery(document).ready(function($) {
console.log(Theme_Variables.ajax_url);
});Tässä koukussa voit käyttää globaaleja muuttujia $pagenowja $post_typemäärittää tarkemmin, mihin haluat asettaa tyylisi ja komentosarjasi.
Sisäisten tyylien tulostaminen
Jos haluat tulostaa tekstin sisäisiä tyylejä, esimerkiksi Customizerissa määrittämillesi teemamuuttujille (esim. käyttämällä get_theme_mod), voit tulostaa ne käyttämällä wp_add_inline_styletoimintoa. Se toimii melko samalla tavalla kuin Javascript-muuttujien tulostaminen, jossa sinun on annettava jonossa oleva tyylikahva:
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);
});Asynkronisten tunnisteiden lisääminen skripteihin
Valitettavasti komentosarjatunnisteihisi ei ole lisättävää suoraa toimintoa tai suodatinta async, mutta voimme saavuttaa tämän manipuloimalla merkkijonoa, jota WordPress käyttää kaikkien jonossa olevien komentosarjojen komentosarjatunnisteiden tulostamiseen, kuten näin (muista määrittää skriptisi sen kahvalla):