it-swarm-eu.dev

Jaký je preferovaný způsob přidávání vlastních souborů javascript na web?

Už jsem přidal své skripty, ale chtěl jsem znát preferovaný způsob.
Právě jsem umístil tag <script> přímo do header.php mé šablony.

Existuje preferovaný způsob vkládání externích nebo vlastních souborů js?
Jak bych vázal soubor js na jednu stránku? (Mám na mysli domovskou stránku)

68
naugtur

Použijte wp_enqueue_script() ve svém motivu

Základní odpovědí je použití wp_enqueue_script() v wp_enqueue_scripts háku pro front end admin_enqueue_scripts pro admin. Mohlo by to vypadat něco takového (což předpokládá, že voláte ze souboru functions.php vašeho tématu; poznamenejte si, jak odkazuji na adresář stylesheet):

<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );

function mysite_enqueue() {
  $ss_url = get_stylesheet_directory_uri();
  wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js" );
}

To jsou základy.

Předdefinované a více závislé skripty

Ale řekněme, že chcete zahrnout jak jQuery, tak i jQuery UI Sortable z seznamu výchozích skriptů, které jsou součástí WordPressua, na kterém chcete, aby na nich skript závisel? Snadné, stačí zahrnout první dva skripty pomocí předdefinovaných úchyty definovaných ve WordPressu a pro váš skript poskytnout třetí parametr wp_enqueue_script(), což je pole popisovačů skriptů používaných každým skriptem, jako tak:

<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );

function mysite_enqueue() {
  $ss_url = get_stylesheet_directory_uri();
  wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js", array( 'jquery', 'jquery-ui-sortable' ) );
}

Skripty v zásuvném modulu

Co když to chcete udělat v zásuvném modulu? Pomocí funkce plugins_url() určete adresu URL souboru Javascript:

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue' );

function my_plugin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url('/js/my-script.js',__FILE__), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION );
}

Verze vašich skriptů

Všimněte si také, že výše jsme dali náš plugin číslo verze a předali jej jako 4. parametr wp_enqueue_script(). Číslo verze je výstupem ve zdrojovém kódu jako argument dotazu v URL na skript a slouží k vynucení prohlížeče, aby v případě změny verze znovu stáhl soubor v mezipaměti.

Načíst skripty pouze na stránkách, kde je to potřeba

1. pravidlo Web Performance říká, že Minimize HTTP Requests tak, kdykoliv je to možné, měli byste omezit skripty na načtení pouze v případě potřeby. Například pokud potřebujete pouze skript v admin, omezte ho na administrační stránky pomocí háku admin_enqueue_scripts místo:

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );

function my_plugin_admin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION );
}

Načte skripty do zápatí

Pokud jsou vaše skripty jedním z těch, které je třeba načíst do zápatí, je zde pátý parametr wp_enqueue_script(), který říká WordPressu, aby ji zpozdil a umístil do zápatí (za předpokladu, že se vaše téma neznepokojilo a že to skutečně volá wp_footer hák jako všechny dobré WordPress témata by měla ):

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );

function my_plugin_admin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION, true );
}

Jemnější ovládání zrna

Pokud potřebujete jemnější zrnitost, než to Ozh má skvělý článek s názvem Jak: Načíst Javascript s WordPress Plugin , že podrobnosti více.

Zakázání skriptů pro řízení zisku

Justin Tadlock má hezký článek s názvem Jak zakázat skripty a styly v případě, že chcete:

  1. Kombinovat více souborů do jednotlivých souborů (najetých kilometrů se může lišit s JavaScript zde).
  2. Načtěte soubory pouze na stránkách, které používáme skript nebo styl.
  3. Přestat muset použít! Důležité v našem souboru style.css, aby se jednoduché CSS úpravy.

Předávání hodnot z PHP do JS s wp_localize_script()

Na svém blogu má Vladimir Prelovac skvělý článek s názvem Nejlepší postup pro přidávání kódu JavaScript do zásuvných modulů WordPress kde diskutuje o použití wp_localize_script(), které vám umožní nastavit hodnotu proměnných ve vaší straně serveru PHP. používané ve vašem Javascriptu na straně klienta.

Opravdu jemné ovládání zrna s wp_print_scripts()

A konečně, pokud potřebujete opravdu jemnozrnné ovládání, můžete se podívat do wp_print_scripts(), jak je diskutováno na Pivní planetě v příspěvku s názvem Jak zahrnout CSS a JavaScript podmíněně a pouze v případě, že je to nezbytné pro příspěvky .

Epiloque

To je o tom pro Best Practices, včetně souborů Javascript s WordPress. Pokud jsem něco vynechal (což pravděpodobně mám), dejte mi vědět v komentářích, abych mohl přidat aktualizaci pro budoucí cestující.

78
MikeSchinkel

Abych komplimentoval Mikesovi skvělou ilustraci používání enqueues, chci jen zdůraznit, že skripty, které jsou součástí závislostí, nemusejí být enquued ...

Budu používat příklad pod Skripty v Pluginu záhlaví v Mikeově odpovědi.

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-sortable');
    wp_enqueue_script('my-script',plugins_url('/js/my-script.js',__FILE__),array('jquery','jquery-ui-sortable'),MY_PLUGIN_VERSION);
}

To může být upraveno tak, aby bylo možné číst.

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('my-script', plugins_url( '/js/my-script.js', __FILE__ ), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION);
}

Když nastavíte závislost, WordPress je najde a připraví je pro váš skript, takže nemusíte dělat žádné nezávislé volání pro tyto skripty.

Někteří z vás možná uvažují, zda by nastavení více závislostí mohlo způsobit, že skripty budou mít výstup ve špatném pořadí.

wp_enqueue_script( 'first-script', 'example/path/example_script_1.js', array('second-script','third-script') );

Kdyby byly dva scénáře závislé na skriptu tři (tj. První skript by se měl načíst), nezáleželo by na tom, WordPress určí priority enqueue pro tyto skripty a vydá je ve správném pořadí. pro vás WordPress.

11
t31os

Pro malé kousky skriptů, které nechcete zahrnout do samostatného souboru, například proto, že jsou generovány dynamicky, WordPress 4.5 a další nabídky wp_add_inline_script . Tato funkce v podstatě blokuje skript na jiný skript.

Řekněme například, že vyvíjíte téma a chcete, aby váš zákazník mohl vkládat své vlastní skripty (například Google Analytics nebo AddThis) prostřednictvím stránky možností. Pak můžete použít wp_add_inline_script pro zablokování tohoto skriptu do hlavního souboru js (řekněme mainjs) takto:

$custom_script = get_option('my-script')
if (!empty($custom_script)) wp_add_inline_script ('mainjs', $custom_script);
0
cjbj

Můj preferovaný způsob je dosáhnout dobrého výkonu, takže místo použití wp_enqueue_script používám HEREDOC s API Fetch pro načtení všeho asynchronně paralelně:

$jquery_script_path = '/wp-includes/js/jquery/jquery.js?ver=1.12.4';
$jquery_dependent_script_paths = [
  get_theme_file_uri( '/assets/js/global.js' ),
  get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ),
  get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ),
  get_theme_file_uri( '/assets/js/navigation.js' )
];
$jquery_dependent_script_paths_json = json_encode($jquery_dependent_script_paths);
$inline_scripts = <<<EOD
<script>
(function () {
  'use strict';
  if (!window.fetch) return;
  /**
   * Fetch Inject v1.6.8
   * Copyright (c) 2017 Josh Habdas
   * @licence ISC
   */
  var fetchInject=function(){"use strict";const e=function(e,t,n,r,o,i,c){i=t.createElement(n),c=t.getElementsByTagName(n)[0],i.type=r.blob.type,i.appendChild(t.createTextNode(r.text)),i.onload=o(r),c?c.parentNode.insertBefore(i,c):t.head.appendChild(i)},t=function(t,n){if(!t||!Array.isArray(t))return Promise.reject(new Error("`inputs` must be an array"));if(n&&!(n instanceof Promise))return Promise.reject(new Error("`promise` must be a promise"));const r=[],o=n?[].concat(n):[],i=[];return t.forEach(e=>o.Push(window.fetch(e).then(e=>{return[e.clone().text(),e.blob()]}).then(e=>{return Promise.all(e).then(e=>{r.Push({text:e[0],blob:e[1]})})}))),Promise.all(o).then(()=>{return r.forEach(t=>{i.Push({then:n=>{"text/css"===t.blob.type?e(window,document,"style",t,n):e(window,document,"script",t,n)}})}),Promise.all(i)})};return t}();
  fetchInject(
    $jquery_dependent_script_paths_json
  , fetchInject([
    "{$jquery_script_path}"
  ]));
})();
</script>
EOD;

A pak je vložte do hlavy, někdy spolu se styly takto:

function wc_inline_head() {
  global $inline_scripts;
  echo "{$inline_scripts}";
  global $inline_styles;
  echo "{$inline_styles}";
}

Výsledek ve vodopádu, který vypadá takto, načítá vše najednou, ale kontroluje pořadí provedení:

 enter image description here 

Poznámka: Toto vyžaduje použití API Fetch, které není dostupné ve všech prohlížečích.

0
Josh Habdas