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

4

Tengo este código que quiero agregar a una página específica mía. No quiero crear un archivo para él y luego incluir etc. (aunque diga si esa sería la única manera). Tampoco 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 () {
        if ($(this).val() === "Yes") {
            $('#p-days').show();
        } else {
            $('#p-days').hide();
        }
    });
    $('input[name=already-b]:radio').click(function () {
        if ($(this).val() === "Yes") {
            $('#div-name').show();
        } else {
            $('#div-name').hide();
        }
    });
});
</script>

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

Gracias.

    
pregunta ISnoculrucdees 27.06.2013 - 20:02

3 respuestas

5

A pesar de que @s_ha_dum es correcto, WILL necesita usar jQuery, no hay conflicto dentro de WordPress, la pregunta original queda sin respuesta.

  

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

Hay un par de maneras de hacer esto

Basado en el nombre / slug de WordPress en las funciones del tema.php

Este método utiliza el enlace de WordPress wp_enqueue_scripts

  1. Crea un nuevo archivo js para tu script my-nifty-custom.js
  2. En tu functions.php agrega lo siguiente

    /* Enqueue scripts (and related stylesheets) */
        add_action( 'wp_enqueue_scripts', 'my_nifty_scripts' );
    /**
     * Registers scripts for the theme and enqueue those used site wide.
     *
     * @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'); 
    }}
    

Tenga en cuenta que si está utilizando un tema secundario o si desea hacerlo más fácilmente, envuelva todo en after_setup_theme ie:

add_action( 'after_setup_theme', 'nifty_theme_setup' );
function nifty_theme_setup() {
// script function and other functions that should happen after the initial theme setup
}

Basado en clase de cuerpo (enrutamiento basado en DOM)

Esto es un poco más complicado. Afortunadamente, Paul Irish escribió un fantástico blog al respecto aquí: enlace

Si usa este método, obtendrá su JS personalizado por página, según la Clase de cuerpo. Por ejemplo <body class="nifty">

Entonces usarías:

//clip 
 nifty : {
    init     : function(){ //custom script goes here }
  }
//clip

El único problema con esto es que la página debe tener la clase de cuerpo que está 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;
}

Entonces, ¿qué método debes 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 a ese método.

Lazy header.php method

Por último, siempre está la forma perezosa (lo cual no recomiendo, pero estoy apuntando solo 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>'); 
        } ?>
    
respondido por el BandonRandon 28.06.2013 - 00:00
1

WordPress carga jQuery en el modo "No hay conflicto" . El alias "$" no funciona. Use el "jQuery" completo - jQuery.$.ajax({... o ajuste su script como el ejemplo de los documentos de jQuery ...

(function($) { 
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);

Hay información sobre este en el Codex también .

    
respondido por el s_ha_dum 27.06.2013 - 20:17
-1

Me he topado con este problema cada vez que quería usar un complemento de jQuery en mis publicaciones y páginas. Mi solución fue crear un código abreviado de jQuery genérico enlace

    
respondido por el John Negoita 26.08.2016 - 08:05

Lea otras preguntas en las etiquetas