¿Cómo agregar un script jQuery a una página individual?

Question

¿Cómo agregar un script jQuery a una página individual?

27 jun 2013, 21:02:38

Vistas: 37.8K

Votos: 7

Tengo este código que quiero agregar a una página específica mía. No quiero crear un archivo para ello y luego incluirlo, etc. (aunque díganme si esa sería la única manera). Además, no quiero que esté en el encabezado ya que se incluiría en todas las páginas. El código es:

<script type="text/javascript">
$(function () {
    $('input[name=done]:radio').click(function () {
        // Si el valor es "Yes", muestra el elemento p-days
        if ($(this).val() === "Yes") {
            $('#p-days').show();
        } else {
            $('#p-days').hide();
        }
    });
    $('input[name=already-b]:radio').click(function () {
        // Si el valor es "Yes", muestra el elemento div-name
        if ($(this).val() === "Yes") {
            $('#div-name').show();
        } else {
            $('#div-name').hide();
        }
    });
});
</script>

Agregué esto en el editor seleccionando Texto (no en modo Visual). Pero no está funcionando. ¿Alguna idea de qué estoy haciendo mal?

Gracias.

ISnoculrucdees

71

páginas jquery

Comentarios

Gracias, funcionó. Por favor responde como respuesta para que pueda aceptarla.

ISnoculrucdees

27 jun 2013 21:15:14

¿Cómo sabes exactamente en qué página quieres incluir este script?

Chip Bennett

27 jun 2013 21:47:30

puedes usar la función de WordPress is_page

Rohit Kishore

26 ago 2016 11:47:28

Todas las respuestas a la pregunta

Comentarios

Añade la esencia de la respuesta además de enlazar a un recurso externo.

bravokeyl

26 ago 2016 09:12:44

Voto negativo porque la respuesta debería estar en este sitio, no en un sitio externo desconocido y poco confiable

Mark Kaplun

26 ago 2016 09:26:38

Voto negativo. Esto no es una respuesta a la pregunta. Más bien, es un enlace a tu sitio externo, que además requiere que el usuario se suscriba a tu boletín para poder obtener incluso el plugin que presentas como "respuesta" a la pregunta.

omega33

2 sept 2017 13:56:20

Brooke. 3.89K · Answer 1 · 2013-06-28T01:00:10Z

Aunque @s_ha_dum tiene razón en que DEBERÁS usar jQuery en modo no conflict dentro de WordPress, la pregunta original sigue sin respuesta.

Tengo este código que quiero agregar a una página específica de mi sitio.

Hay un par de formas de hacer esto:

Basado en el nombre/slug de la página en WordPress (en el functions.php del tema)

Este método utiliza el hook de WordPress wp_enqueue_scripts

Crea un nuevo archivo JS para tu script: my-nifty-custom.js

En tu functions.php agrega lo siguiente:

/* Encolar scripts (y hojas de estilo relacionadas) */
add_action( 'wp_enqueue_scripts', 'my_nifty_scripts' );
/**
 * Registra scripts para el tema y encola aquellos usados en todo el sitio.
 *
 * @since 0.1.0.
 */

function my_nifty_scripts() {
    wp_register_script('my-nifty-custom', get_stylesheet_directory_uri() . '/js/my-nifty-custom.js', false, null, true);
    if(is_page('page-slug-here')){
        wp_enqueue_script('my-nifty-custom'); 
    }
}

Nota: Si estás usando un child-theme o quieres hacerlo mejor, envuelve todo en after_setup_theme así:

add_action( 'after_setup_theme', 'nifty_theme_setup' );
function nifty_theme_setup() {
// función de script y otras funciones que deberían ejecutarse después de la configuración inicial del tema
}

Basado en Clases del Body (Enrutamiento basado en DOM)

Esto es un poco más complicado. Por suerte Paul Irish escribió un fantástico blog sobre esto: http://www.paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/

Si usas este método, cargarás tu JS personalizado por página basado en la Clase del Body. Por ejemplo: <body class="nifty">

Entonces usarías:

//clip 
nifty : {
    init : function(){ //tu script personalizado va aquí }
}
//clip

El único problema es que la página debe tener la clase de body que estás llamando. Para esto WordPress tiene la función body_class

add_filter('body_class','nifty_class_names');
function nifty_class_names($classes) {
    if(is_page('page-slug-here')){
        $classes[] = 'nifty';
    }

    return $classes;
}

¿Qué método deberías usar?

Recomiendo una combinación de ambos. Crea un archivo JavaScript que use el método de Paul. Luego usa wp_enqueue_scripts para llamar ese método.

Método perezoso en header.php

Finalmente, SIEMPRE está el método perezoso (que no recomiendo pero menciono como referencia).

En tu header.php puedes hacer:

 <?php if(is_page('page-slug-here')){
           echo ('<script type="text/javascript" src="'. get_stylesheet_directory_uri() . '/js/my-nifty-custom.js"></script>'); 
        } ?>

s_ha_dum 65.5K · Answer 2 · 2013-06-27T21:17:21Z

WordPress carga jQuery en modo "Sin Conflicto". El alias "$" no funciona. Utiliza el nombre completo "jQuery"-- jQuery.$.ajax({... o envuelve tu script como en el ejemplo de la documentación de jQuery...

(function($) { 
  $(function() {
    // más código usando $ como alias de jQuery
  });
})(jQuery);

También hay información sobre esto en el Codex.

s_ha_dum

65.5K

27 jun 2013 21:17:21

John Negoita 9 · Answer 3 · 2016-08-26T09:05:24Z

Me he encontrado con este problema cada vez que quería utilizar un plugin de jQuery en mis publicaciones y páginas. Mi solución fue crear un shortcode genérico para plugins de jQuery http://www.coding-dude.com/wp/web-design/javascript/how-to-use-jquery-plugin-with-wordpress-plugin-tutorial/

John Negoita

9

26 ago 2016 09:05:24