Usa wp_enqueue_script()
en tu tema
La respuesta básica es usar wp_enqueue_script()
en un gancho wp_enqueue_scripts
para el front end admin_enqueue_scripts
para admin . Puede parecer algo como esto (lo que supone que está llamando desde el archivo functions.php
de su tema; tenga en cuenta cómo hago referencia al directorio de la 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.
Scripts predefinidos y dependientes múltiples
Pero supongamos que desea incluir jQuery y jQuery UI Sortable de la lista de guiones incluidos por defecto incluidos en la lista de scripts predeterminados incluidos con WordPress > y ¿quieres que tu script dependa de ellos? Fácil, solo incluye los dos primeros scripts que utilizan los manijas predefinidos definidos en WordPress y para su script, proporcione un tercer parámetro para wp_enqueue_script()
, que es una matriz de los manejadores de script utilizados por cada script, de este modo:
<?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 complemento
¿Qué pasa si quieres hacerlo en un plugin? Use la función plugins_url()
para especificar la 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 de sus scripts
También tenga en cuenta que arriba le dimos a nuestro complemento un número de versión y lo pasamos como un cuarto parámetro a wp_enqueue_script()
. El número de versión se envía en la fuente como argumento de consulta en la URL a la secuencia de comandos y sirve para forzar que el navegador vuelva a descargar posiblemente el archivo en caché si la versión cambia.
Cargar scripts solo en las páginas donde sea necesario
La la primera regla del rendimiento web dice que Minimice las solicitudes HTTP , siempre que sea posible debe limitar los scripts para cargar solo donde sea necesario. Por ejemplo, si solo necesita su secuencia de comandos en el administrador, limítelo a las páginas de administración utilizando el gancho admin_enqueue_scripts
en su 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 );
}
Cargue sus scripts en el pie de página
Si sus scripts son uno de los que deben cargarse en el pie de página, hay un quinto parámetro de wp_enqueue_script()
que le dice a WordPress que lo retrase y lo coloque en el pie de página (suponiendo que su tema no se haya portado mal y que efectivamente llama al gancho wp_footer como todos los buenos temas de WordPress deben ):
<?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 );
}
Control de grano fino
Si necesita un control más preciso que el Ozh tiene un gran artículo titulado How To: Javascript con su plugin de WordPress que detalla más.
Deshabilitar scripts para obtener control
Justin Tadlock tiene un buen artículo titulado Cómo deshabilitar scripts y estilos en caso de que quieras:
- Combine varios archivos en archivos individuales (el kilometraje puede variar con JavaScript aquí).
- Cargue los archivos solo en las páginas en las que estamos usando el script o el estilo.
- ¡Deje de tener que usar! important en nuestro archivo style.css para realizar ajustes CSS simples.
Pasando valores de PHP a JS con wp_localize_script()
En su blog, Vladimir Prelovac tiene un gran artículo titulado Best practica para agregar código JavaScript a los complementos de WordPress , donde analiza el uso de wp_localize_script()
para permitirte establecer el valor de las variables en tu PHP del lado del servidor para que luego se use en tu Javascript del lado del cliente.
Control de grano realmente fino con wp_print_scripts()
Y, finalmente, si necesita un control realmente detallado, puede consultar wp_print_scripts()
como se explica en Beer Planet en una publicación titulada Cómo incluir CSS y JavaScript condicionalmente y solo cuando sea necesario por las publicaciones .
Epiloque
Eso es todo para las Mejores Prácticas de incluir archivos Javascript con WordPress. Si me perdí algo (que probablemente tengo), asegúrese de avisarme en los comentarios para poder agregar una actualización para futuros viajeros.