WordPress tarjoaa useita tapoja lis\u00e4t\u00e4 tyylej\u00e4 ja komentosarjoja k\u00e4ytt\u00f6liittym\u00e4lle ja j\u00e4rjestelm\u00e4nvalvojalle, sek\u00e4 tiedostojen lis\u00e4\u00e4miseen ett\u00e4 muuttujien\/tulosteen suoraan tulostamiseen. T\u00e4m\u00e4 viesti k\u00e4sittelee yksityiskohtaisesti koodiesimerkkej\u00e4 siit\u00e4, kuinka skriptej\u00e4 ja tyylej\u00e4 lis\u00e4t\u00e4\u00e4n WordPressiin oikealla tavalla.<\/p>\n
Skriptej\u00e4 ja tyylej\u00e4 voidaan rekister\u00f6id\u00e4 ja asettaa jonoon m\u00e4\u00e4ritt\u00e4m\u00e4ll\u00e4 yksil\u00f6lliset kahvat (slug-tyyppiset tunnukset), jolloin WordPress voi poistaa kaksoiskappaleet, kuten useita jQuery-kirjastoja, ja k\u00e4sitell\u00e4 riippuvuuksia (mik\u00e4 tyyli tai komentosarja ladataan ennen t\u00e4t\u00e4 ja sit\u00e4) .<\/p>\n
Jos ei ole erityist\u00e4 tarvetta rekister\u00f6id\u00e4 tyylej\u00e4 tai komentosarjoja, voit laittaa ne heti jonoon ja j\u00e4tt\u00e4\u00e4 rekister\u00f6innin v\u00e4liin. Tyylien ja komentosarjojen ( PS: Tyylien ja komentosarjojen lis\u00e4\u00e4minen Gutenbergiin (sek\u00e4 j\u00e4rjestelm\u00e4nvalvojan ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4n lohkot) selitet\u00e4\u00e4n viestiss\u00e4ni Gutenberg: The Basics<\/a>.<\/p>\n Jos haluat lis\u00e4t\u00e4 tyylej\u00e4 ja skriptej\u00e4 vain k\u00e4ytt\u00f6liittym\u00e4\u00e4n, k\u00e4yt\u00e4 koukkua Kolmas argumentti sek\u00e4 tyyleille ett\u00e4 skripteille on riippuvuuksia sis\u00e4lt\u00e4v\u00e4 matriisi. Esim. skriptej\u00e4 varten saatat haluta ladata jQuery-kirjaston ennen komentosarjatiedostoasi. Huomautus<\/strong>: WordPress-asennuksissa on mukana joukko yleisi\u00e4 komentosarjakirjastoja (esimerkiksi jQuery, jQuery UI, Backbone ja Underscore). Niin kauan kuin lis\u00e4\u00e4t jonkin n\u00e4ist\u00e4 kahvoista<\/a> riippuvuudeksi enqueue_script-tiedostoosi, WordPress lis\u00e4\u00e4 ne jonoon, joten sinun ei tarvitse lis\u00e4t\u00e4 omia tiedostojasi n\u00e4ihin kirjastoihin.<\/p>\n Viides argumentti komentosarjoille on, pit\u00e4isik\u00f6 skripti ladata tunnisteen loppuun Jotta voit k\u00e4ytt\u00e4\u00e4 laajennusta, sinun on k\u00e4ytett\u00e4v\u00e4 muita menetelmi\u00e4 paikallisen tiedoston URL-osoitteen saamiseksi, esimerkiksi WordPress tarjoaa toisen koukun, Koska kumpikaan yll\u00e4 olevista koukuista ei n\u00e4y j\u00e4rjestelm\u00e4nvalvojan kirjautumisn\u00e4yt\u00f6ss\u00e4, WordPress tarjoaa t\u00e4h\u00e4n tarkoitukseen erillisen koukun, Javascript-muuttujien tulostamiseen (esim. polkujen, k\u00e4\u00e4nnettyjen merkkijonojen tai muiden muuttujien hankkimiseen voit k\u00e4ytt\u00e4\u00e4 wp_localize_scriptia. T\u00e4m\u00e4 toiminto vaatii jonossa olevan komentosarjan kahvan. Toinen parametri olisi muuttujan nimi ja kolmas sen arvo. Arvo voi olla taulukko, kuten esim. :<\/p>\n Skriptin sis\u00e4ll\u00e4 sinulla on p\u00e4\u00e4sy v\u00e4litettyihin muuttujiin, kuten:<\/p>\n T\u00e4ss\u00e4 koukussa voit k\u00e4ytt\u00e4\u00e4 globaaleja muuttujia Jos haluat tulostaa tekstin sis\u00e4isi\u00e4 tyylej\u00e4, esimerkiksi Customizerissa m\u00e4\u00e4ritt\u00e4millesi teemamuuttujille (esim. k\u00e4ytt\u00e4m\u00e4ll\u00e4 Valitettavasti komentosarjatunnisteihisi ei ole lis\u00e4tt\u00e4v\u00e4\u00e4 suoraa toimintoa tai suodatinta wp_dequeue_script<\/code>ja wp_dequeue_style<\/code>) rekister\u00f6inti on my\u00f6s mahdollista kahvaan viittaamalla. Se yleens\u00e4 auttaa lis\u00e4\u00e4m\u00e4ll\u00e4 suuremman numeron koukun prioriteettiin (saamalla sen juoksemaan sen koukun j\u00e4lkeen, jossa kohteet olivat jonossa).<\/p>\nSkriptien ja tyylien lis\u00e4\u00e4minen k\u00e4ytt\u00f6liittym\u00e4\u00e4n<\/h2>\n
wp_enqueue_scripts<\/code>. Koukun nimest\u00e4 huolimatta sit\u00e4 k\u00e4ytet\u00e4\u00e4n sek\u00e4 skripteihin ett\u00e4 tyyleihin. T\u00e4ss\u00e4 on esimerkki tyylitaulukon ja javascript-tiedoston asettamisesta jonoon teemassa:<\/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>(alatunnisteeseen) <head><\/code>tunnisteen sijaan.<\/p>\nplugin_dir_url(__FILE__)<\/code>.<\/p>\nSkriptien ja tyylien lis\u00e4\u00e4minen j\u00e4rjestelm\u00e4nvalvojaan<\/h2>\n
admin_enqueue_scripts<\/code>, tyylien ja komentosarjojen lis\u00e4\u00e4miseen vain j\u00e4rjestelm\u00e4nvalvojalle. K\u00e4yt\u00e4 samoja menetelmi\u00e4 kuin yll\u00e4 skriptien ja tyylien rekister\u00f6intiin, jonoon ja lokalisoimiseen:<\/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>\nSkriptien ja tyylien lis\u00e4\u00e4minen kirjautumissivulle<\/h2>\n
login_enqueue_scripts<\/code>.<\/p>\nadd_action('login_enqueue_scripts', function() {\n \/\/ wp_enqueue_style or wp_enqueue_script\n});<\/code><\/pre>\nJavascript-muuttujien tulostaminen<\/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>m\u00e4\u00e4ritt\u00e4\u00e4 tarkemmin, mihin haluat asettaa tyylisi ja komentosarjasi.<\/p>\nSis\u00e4isten tyylien tulostaminen<\/h2>\n
get_theme_mod<\/code>), voit tulostaa ne k\u00e4ytt\u00e4m\u00e4ll\u00e4 wp_add_inline_style<\/code>toimintoa. Se toimii melko samalla tavalla kuin Javascript-muuttujien tulostaminen, jossa sinun on annettava jonossa oleva tyylikahva:<\/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>\nAsynkronisten tunnisteiden lis\u00e4\u00e4minen skripteihin<\/h2>\n
async<\/code>, mutta voimme saavuttaa t\u00e4m\u00e4n manipuloimalla merkkijonoa, jota WordPress k\u00e4ytt\u00e4\u00e4 kaikkien jonossa olevien komentosarjojen komentosarjatunnisteiden tulostamiseen, kuten n\u00e4in (muista m\u00e4\u00e4ritt\u00e4\u00e4 skriptisi sen kahvalla):<\/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>\nHy\u00f6dyllisi\u00e4 linkkej\u00e4 dokumentaatioon<\/h2>\n
\n