¿Cuál es la forma preferida para añadir archivos JavaScript personalizados para el sitio?

https://wordpress.stackexchange.com/questions/556

16-10-2019
|

Pregunta

Ya he añadido mis guiones, pero yo quería saber la forma preferida.
Acabo de poner una etiqueta <script> directamente en la header.php de mi plantilla.

¿Hay un método preferido para la inserción de archivos JS externos o personalizados?
¿Cómo voy a enlazar un archivo JS a una sola página? (Tengo la página principal en mente)

Solución

Uso `wp_enqueue_script()` en su tema

La respuesta básica es usar wp_enqueue_script() en un gancho para wp_enqueue_scripts admin_enqueue_scripts extremo frontal para admin. Podría ser algo como esto (que se supone que está llamando de archivo functions.php de su tema; nota cómo hacer referencia al directorio de hoja de estilo):

<?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" );
}

Eso es lo básico.

pre-definida y Scripts dependientes múltiples

Pero digamos que desea incluir tanto jQuery y jQuery UI Sortable de la lista de de secuencias de comandos predeterminadas incluidas en WordPress y que desea que el script depende de ellos? Fácil, basta con incluir los dos primeros guiones utilizando los predefinidas asas definido en WordPress y para su escritura de proporcionar una tercera parámetro para wp_enqueue_script() que es una matriz de las asas de script utilizado por cada secuencia de comandos, así:

<?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' ) );
}

Scripts en un Plugin

¿Qué pasa si usted quiere hacerlo en un plugin en su lugar? Utilice la función plugins_url() para especificar la dirección URL de su archivo 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 );
}

Versiones sus secuencias de comandos

También tenga en cuenta que encima dimos nuestro plugin un número de versión y se lo pasó como un cuarto parámetro para wp_enqueue_script(). número de versión es la producción en origen como argumento de consulta en URL para la escritura y sirve para navegador fuerza para volver a descargar el archivo almacenado en caché, posiblemente, si la versión cambiada.

Secuencias de comandos de carga únicamente en las páginas donde sea necesario

El primera regla de rendimiento web dice a Minimizar solicitudes HTTP así que siempre que sea posible se debe limitar a los guiones de carga solamente cuando sea necesario. Por ejemplo, si sólo necesita su guión en el límite de administración a las páginas de administración usando el gancho admin_enqueue_scripts lugar:

<?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 );
}

Carga de scripts en el pie de página

Si las secuencias de comandos es uno de los que necesidad de ser cargado en el pie de página hay un quinto parámetro de wp_enqueue_script() que le dice a WordPress para retrasarlo y lo coloca en el pie de página (asumiendo que su tema no portaba mal y que de hecho llama al gancho wp_footer como todos los temas de WordPress buena debe ):

<?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 );
}

Finer control de grano

Si necesita control de grano más fino que el Ozh tiene un gran artículo titulado Cómo:. Cargar Javascript con su plugin de WordPress que los detalles más

Deshabilitar secuencias de comandos para controlar la ganancia

Justin Tadlock tiene un buen artículo titulado Cómo scripts y estilos desactivar en caso de que desee:

Combinar varios archivos en los archivos individuales (kilometraje puede variar con JavaScript aquí).
Cargar los archivos sólo en las páginas que estamos usando la secuencia de comandos o el estilo.
Detener tener que usar! Importante en nuestro archivo style.css para hacer ajustes simples CSS.

Valores Pasando de PHP a JS con `wp_localize_script()`

En su blog Vladimir Prelovac tiene un gran artículo titulado Mejor la práctica de añadir código JavaScript para plugins de WordPress donde se discute el uso de wp_localize_script() que le permite establecer el valor de las variables en su PHP del lado del servidor que se utilizará más adelante en el lado del cliente Javascript.

realmente fino control de grano con `wp_print_scripts()`

Y finalmente, si usted necesita realmente el control se puede mirar en wp_print_scripts() como se discutió en la Beer Planet en un post titulado grano fino Cómo incluir CSS y JavaScript condicional y sólo cuando sea necesario junto a los postes .

Epiloque

Eso es todo para las mejores prácticas de la inclusión de archivos de Javascript con WordPress. Si me he perdido algo (que probablemente tengo) Asegúrese de que me haga saber en los comentarios para que pueda agregar una actualización para futuros viajeros.

Otros consejos

Para complementar Mikes maravillosa ilustración de utilizar encola yo sólo deseo señalar que los scripts incluidos como dependencias no tienen que estar en cola ...

voy a utilizar el ejemplo en los Scripts en un plugin dirección en la respuesta de Mike.

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);
}

Esto se puede recortar hacia abajo para leer ..

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);
}

Cuando se establece dependencias, WordPress encontrar y poner en cola los prepara para su escritura, por lo que no es necesario realizar ninguna llamada independientes para estas secuencias de comandos.

Además, algunos de ustedes se estarán preguntando si el establecimiento de unas dependencias múltiples podría causar a los scripts de salida en el orden equivocado, aquí permítanme dar un ejemplo

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

Si la escritura dos eran dependientes de la escritura de tres (es decir. La escritura de tres debe cargar primero), esto no importaría, WordPress determinará las prioridades enqueue para esos guiones y salida de ellos, en el orden correcto, en fin, todo se vuelve elaborado automagicamente para usted con WordPress.

Para los pequeños trozos de scripts, que puede que no desee incluir en un archivo separado, por ejemplo debido a que se generan de forma dinámica, WordPress 4.5 y más ofertas wp_add_inline_script . Esta función básicamente retiene el guión a otro script.

Vamos a decir, por ejemplo, que está desarrollando un tema y quiere que su cliente sea capaz de insertar sus propias secuencias de comandos (como Google Analytics o AddThis) a través de la página de opciones. A continuación, puede utilizar wp_add_inline_script para enclavar el guión a su js-archivo principal (digamos mainjs) como esto:

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

Mi forma preferida es lograr un buen rendimiento, por lo que en lugar de utilizar el uso wp_enqueue_script I heredoc con la API de Fetch a la carga de todo de forma asíncrona en paralelo:

$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;

Y luego insertarlos en la cabeza, a veces junto con estilos como el siguiente:

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

Resultando en cascada que tiene este aspecto, carga todo a la vez, pero el control de la orden de ejecución:

Nota:. Esto requiere el uso de la API de Fetch, que no está disponible en todos los navegadores

Licenciado bajo: CC-BY-SA con atribución

No afiliado a wordpress.stackexchange