Comment ajouter un script jQuery à une page individuelle?

4

J'ai ce code que je veux ajouter à une de mes pages. 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.

    
posée ISnoculrucdees 27.06.2013 - 20:02

3 réponses

5

Bien que @s_ha_dum soit correct, vous devez utiliser pour utiliser jQuery. Aucun conflit au sein de WordPress, la question initiale reste sans réponse.

  

J'ai ce code que je souhaite ajouter à une de mes pages.

Il y a plusieurs façons de le faire

Basé sur le nom de page / le 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'); 
    }}
    

Remarquez si vous utilisez un thème enfant ou si vous voulez le faire davantage, enveloppez-le dans after_setup_theme c'est-à-dire:

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

Si vous utilisez cette méthode, votre JS personnalisé sera attribué 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 cela 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 le moyen paresseux (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>'); 
        } ?>
    
réponse donnée BandonRandon 28.06.2013 - 00:00
1

WordPress charge le jQuery en mode "Aucun conflit" . Le "$" alias ne fonctionne pas. Utilisez le "jQuery" complet - jQuery.$.ajax({... ou enveloppez votre script comme dans l'exemple de la documentation jQuery ...

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

Des informations sur ce figurent également dans le Codex .

    
réponse donnée s_ha_dum 27.06.2013 - 20:17
-1

J'ai rencontré ce problème chaque fois que je voulais utiliser un plugin jQuery dans mes publications et pages. Ma solution était de créer un shortcode générique de plug-in jQuery enlace

    
réponse donnée John Negoita 26.08.2016 - 08:05

Lire d'autres questions sur les étiquettes