Mejor manera de incluir scripts en una plantilla de página específica

Question

Mejor manera de incluir scripts en una plantilla de página específica

17 mar 2012, 23:47:02

Vistas: 13.9K

Votos: 2

Esto es algo que siempre me ha confundido y agradecería algo de ayuda.

Quiero hacer cuatro cosas directamente antes de la etiqueta de cierre del body:

Incluir jQuery (la versión de WordPress está bien)
Incluir un plugin de jQuery que depende de jQuery debajo de este
Inicializar el plugin directamente debajo de este plugin Y evitar problemas de conflicto usando $ en lugar de jQuery
Hacer esto sólo en plantillas de páginas o archivos de tema específicos

Entiendo que probablemente debería usar wp_enqueue_script, pero no estoy seguro si debería usarlo en functions.php o directamente en la página donde lo quiero.

Respecto al punto número 3, he visto soluciones como:

jQuery(function ($) {
/* Puedes usar $ de forma segura en este bloque de código para referenciar jQuery */
});

Pero honestamente estoy confundido sobre cómo implementar esto.

¿Cuál es la mejor manera de lograr esto?

Muchas gracias.

jw60660

1.55K

jquery wp enqueue script

Todas las respuestas a la pregunta

Comentarios

Gracias por la respuesta. ¿Tienes algún consejo sobre el problema de la variable $ de jQuery y el uso correcto de atajos para solucionar este problema? No estoy del todo seguro de cómo manejarlo. ¿Es solo el script que activa el plugin en la página el que necesita esta solución, o también hay que cambiar el archivo real del plugin de jQuery que se encola?

jw60660

18 mar 2012 01:54:04

@jw60660 Sé que ha pasado tiempo (6 años) pero por si alguien más lo necesita, puedes escribir tu archivo .js así jQuery(document).ready(function ($) { //some_code_here }); y some_code_here puede usar la variable $ en lugar de jQuery

dev_masta

19 mar 2018 17:16:36

muchas gracias. tu último párrafo me salvó Alternativamente, si estás usando 3.3+ y tu tema llama a wp_footer() entonces puedes simplemente llamar a wp_enqueue_script('my_custom_script') dentro de la página de plantilla real.

Shady Mohamed Sherif

14 jul 2019 08:55:08

Comentarios

Esa publicación era para short-codes. :D

Stephen Harris

18 mar 2012 00:11:07

Stephen Harris 32.6K · Answer 1 · 2012-03-18T00:09:25Z

Lo siguiente (en el archivo functions.php de tu tema) registrará tu script y establecerá jQuery como una dependencia. De modo que cuando lo encoles, jQuery también se encolará.

function my_scripts_method() {
   // registrar la ubicación de tu script, dependencias y versión
   wp_register_script('my_custom_script',
       get_template_directory_uri() . '/js/custom_script.js',
       array('jquery'),
       '1.0' );

}
add_action('wp_enqueue_scripts', 'my_scripts_method');

Luego puedes encolar tu script de dos maneras. En el archivo functions.php de tu tema puedes usar el filtro template_include para obtener la plantilla que se está utilizando con is_page_template()

add_filter( 'template_include', 'my_load_script_for_template', 1000 );
function my_load_script_for_template( $template ){
     if(is_page_template('my-template.php'))
        wp_enqueue_script('my_custom_script');

return $template;
}

Alternativamente, si estás usando WordPress 3.3+ y tu tema llama a wp_footer(), entonces puedes simplemente llamar a wp_enqueue_script('my_custom_script') dentro de la página de plantilla real.

Jeremy Jared 3.36K · Answer 2 · 2012-03-18T00:04:22Z

No estoy seguro si sigue siendo (o alguna vez fue) la "mejor manera", ya que no he tenido tiempo de revisar las últimas actualizaciones de desarrollo, pero comenzaré publicando cómo lo hago:

function my_slider_script() {
  if ( !is_page_template( 'slider.php' ) )
  return;
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-tabs');
    wp_enqueue_script( 'my_rotator_script', get_template_directory_uri() . '/js/photo_rotator_tabs.js', array('jquery'));
  }
add_action( 'template_redirect', 'my_slider_script' )

Los primeros dos usan los archivos JS incluidos en WordPress, y el 'my_rotator_script' es uno que he incluido en la carpeta de mi plantilla, dentro de una carpeta js en la raíz del tema llamada photo_rotator_tabs.js. Solo se incluye en las páginas que usan la plantilla slider.php.

Creo que Scribu ha escrito un post muy detallado sobre este tema, pero no recuerdo el enlace. Creo que él usa el método wp_print_scripts, o el método "WordPress Ninja". Quizás él pueda ayudarte si mi método está obsoleto.