web-dev-qa-db-fra.com

Comment ajouter un script jQuery à une page individuelle?

J'ai ce code que je veux ajouter dans une page spécifique de la mienne. Je ne veux pas créer un fichier pour cela et ensuite inclure etc (bien que ne dis pas si ce serait le seul moyen). De plus, je ne veux pas que ce soit dans l'en-tête, car il serait inclus dans toutes les pages. Le code est:

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

J'ai ajouté ceci dans l'éditeur en sélectionnant le texte (pas en mode visuel.) Mais cela ne fonctionne pas. Des idées que je fais mal?

Merci.

pagesjquery
4
ISnoculrucdees

Bien que @s_ha_dum soit correct, vousDEVREZutiliser jQuery sans conflit dans WordPress, la question initiale demeurant sans réponse.

J'ai ce code que je veux ajouter dans une page spécifique de la mienne.

Il y a plusieurs façons de faire ça

Basé sur le nom de page/slug WordPress dans le fichier functions.php du thème

Cette méthode utilise le hook WordPress wp_enqueue_scripts

  1. Créez un nouveau fichier js pour votre script my-nifty-custom.js

  2. Dans votre functions.php, ajoutez ce qui suit

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

Notez que si vous utilisez un thème enfant ou si vous voulez le faire mieux, enveloppez le tout dans 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
}

Basé sur la classe de corps (routage basé sur le DOM)

C'est un peu plus compliqué. Heureusement, Paul Irish a écrit un blog fantastique à ce sujet ici: http://www.paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/

Si vous utilisez cette méthode, votre JS personnalisé obtiendra une page par page en fonction de la classe de corps. Par exemple <body class="nifty">

Ensuite, vous utiliseriez:

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

Le seul problème avec ceci est que la page doit avoir la classe de corps que vous appelez. Pour cela, WordPress a la fonction body_class

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

    return $classes;
}

Alors, quelle méthode devriez-vous utiliser?

Je recommande une combinaison des deux. Créez un fichier JavaScript qui utilise la méthode de Paul. Ensuite, utilisez wp_enqueue_scripts pour appeler cette méthode.

Méthode header.php paresseuse

Enfin, il y a toujours IS toujours paresseux (ce que je ne recommande pas mais que je note juste pour référence.

Dans votre header.php, vous pouvez faire:

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

WordPress charge jQuery dans "No Conflict" mode. Le "$" alias ne fonctionne pas. Utilisez l'intégralité de "jQuery" - jQuery.$.ajax({... ou enveloppez votre script comme dans l'exemple de la documentation jQuery ...

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

Il existe également des informations sur ce dans le Codex .

1
s_ha_dum