Como adicionar o script jQuery a uma página individual?

4

Eu tenho este código que quero adicionar em uma página específica minha. Eu não quero criar um arquivo para ele e, em seguida, incluir etc (embora diga se isso seria o único caminho). Também não quero que esteja no cabeçalho, pois seria incluído em todas as páginas. O código é:

<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>

Eu adicionei isso no editor, selecionando o texto (não no modo visual). Mas não está funcionando. Alguma idéia do que estou fazendo errado?

Obrigado.

    
por ISnoculrucdees 27.06.2013 / 20:02

3 respostas

5

Embora @s_ha_dum esteja correto, você WILL precisa usar o jQuery sem conflitos no WordPress, a pergunta original fica sem resposta.

  

Eu tenho este código que quero adicionar em uma página específica minha.

Existem algumas maneiras de fazer isso

Baseado no nome da página / slug WordPress no theme's functions.php

Esse método usa o gancho do WordPress wp_enqueue_scripts

  1. Crie um novo arquivo js para seu script my-nifty-custom.js
  2. No seu functions.php , adicione o seguinte

    /* 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'); 
    }}
    

Note que se você estiver usando um tema infantil ou quiser fazê-lo, é melhor envolver a coisa toda em 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
}

Com base na classe corporal (roteamento baseado em DOM)

Isso é um pouco mais complicado. Por sorte, Paul Irish escreveu um blog fantástico sobre isso aqui: enlace

Se você usar esse método, ele obterá seu JS personalizado por página, com base na Classe Corporal. Por exemplo <body class="nifty">

Então você usaria:

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

O único problema com isso é que a página deve ter a classe de corpo que você está chamando. Para este WordPress tem a função body_class

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

    return $classes;
}

Então qual método você deve usar?

Eu recomendo uma combinação de ambos. Crie um arquivo JavaScript que use o método de Paul. Em seguida, use wp_enqueue_scripts para chamar esse método.

Método preguiçoso header.php

Por último, há sempre a maneira preguiçosa (que eu não recomendo, mas estou anotando apenas para referência.

No seu header.php você pode fazer:

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

O WordPress carrega o jQuery no modo "Sem Conflito" . O alias "$" não funciona. Use o "jQuery" completo - jQuery.$.ajax({... ou envolva seu script como o exemplo dos documentos do jQuery ...

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

Também há informações sobre este no Codex .

    
por s_ha_dum 27.06.2013 / 20:17
-1

Eu corri para este problema toda vez que eu queria usar um plugin jQuery em meus posts e páginas. Minha solução foi criar um shortcode de plugin jQuery genérico enlace

    
por John Negoita 26.08.2016 / 08:05

Tags