Como agregar scripts a WP de la manera correcta

Tutoriales WordPress El PuasCuando desarrollamos temas o personalizamos un tema, y queremos agregarle nuestros estilos y scripts, aquí te voy a mostrar cómo seguir una buena práctica para añadir  tus scripts en WordPress adecuadamente.

WordPress tiene una gran comunidad de desarrolladores, hay una multitud de personas que se dedican al diseño de temas y desarrollo de plugins. Para asegurar el correcto funcionamiento, WordPress tiene una función de secuencia de comandos en cola. Esto ofrece una forma sistemática de carga de archivos JS y CSS.

Esta función se llama wp_enqueue_script() le dices a WordPress cuándo cargar una secuencia de comandos, de dónde y cuáles son sus dependencias. Esto ayuda a reducir el tiempo de carga y evita conflictos con otros temas y plugins.

La Manera Correcta de Agregar Scripts

/* Añadir Scripts y Estilos */
function theme_name_scripts() {
	wp_enqueue_style( 'style-nombre', get_stylesheet_uri() ); // añade style.css
	wp_enqueue_script( 'script-nombre', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Pero bien, veamos antes que nada los parámetros de la función wp_enqueue_script().

  • $handle – Nombre único de tu Script.
  • $src – La ubicación del script. Sólo es requerido si el script con el nombre $handle no ha sido registrado previamente con wp_register_script(). Se usa la función plugins_url() para obtener la URL correcta de la carpeta de plugins. Y la función get_template_directory_uri() para la ubicación en el tema.
  • $deps – Son las dependencias. Si tu script usa jQuery, añade jQuery en el área de la dependencia. WordPress cargará automáticamente jQuery si no se está cargando ya en el sitio.
  • $ver – Este es el número de versión de nuestro script. No es necesario este parámetro.
  • $in_footer – Para cargar el script en el footer se establece el valor en true y para cargarlo normalmente en el head dejarlo en false.

Algunos Ejemplos de como agregar tus JS y CSS

Carga una hoja de estilo CSS en el sitio.

function slug_adding_styles() {
wp_register_script('mi_stylesheet', get_template_directory_uri() . 'mi_stylesheet.css');
wp_enqueue_style('mi_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'slug_adding_styles' );

Ahora cómo añadir un script de tema con dependencia a jQuery. Esto quiere decir que el script que cargas necesita jQuery para funcionar, si no está incluido en el tema lo incluye.

function slug_adding_scripts() {
wp_register_script('my_script', get_template_directory_uri() . '/js/my_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'slug_adding_scripts' );

tambien puedes usar un condicional si la versión de jquery por defecto no es la que necesitas y quieres incluir la tuya

if( !is_admin()){
wp_deregister_script( 'jquery' );
wp_register_script('jquery', get_template_directory_uri().'/assets/js/jquery.min.js', false,'3.1.1',true);
wp_enqueue_script('jquery');
}

Para cargar correctamente scripts sobre la carpeta de plugins tenemos este ejemplo.

function slug_adding_scripts() {
wp_register_script('mi_script', plugins_url('mi_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('mi_script');
}
add_action( 'wp_enqueue_scripts', 'slug_adding_scripts' );

Si estás trabajando con un tema hijo (child theme) ten en cuenta que tienes que usar la función get_stylesheet_directory_uri() en lugar de get_template_directory_uri().

function slug_adding_scripts() {
wp_register_script('my_script', get_stylesheet_directory_uri() . '/js/my_script.js', array('jquery'));
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'slug_adding_scripts' );

defecto WordPress incluye algunos scripts populares comúnmente usados en el desarrollo de temas, lista de scripts por defecto en WordPress.

function slug_scripts_method() {
    wp_enqueue_script( 'scriptaculous' );
}

add_action( 'wp_enqueue_scripts', 'slug_scripts_method' );

Como puedes ver todos los parámetros del script ya están registrados y únicamente se debe cargar mediante wp_enqueue_script() y la inclusión al hook wp_enqueue_scripts el script o style en cuestión.