Comment ajouter un script jQuery à une page individuelle?

Question

Comment ajouter un script jQuery à une page individuelle?

5

33361 2013-06-27

J'ai ce code queje veux ajouter dans une demespages spécifiques.Jene veuxpas créer unfichierpour celaet ensuiteinclureetc (mais dites si ce serait le seulmoyen).Deplus,je ne veuxpas qu'il soit dans l'en-tête caril seraitinclus danstoutes lespages.Le codeest:

 <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'éditeuren sélectionnant letexte (pasen mode visuel). Mais celane fonctionnepas.Desidées sur ce queje faismal?

Merci.

I have this code which I want to add into a specific page of mine. I don't want to create a file for it and then include etc (though do tell if that would be the only way). Also I don't want it to be in the header as it would be included in all pages. The code is:

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

I added this in the editor by selecting the Text (not in Visual mode.) But it is not working. Any ideas what I'm doing wrong?

Thanks.

- Merci,cela afonctionné.Veuillez répondre comme réponse afin queje puisse accepter.
  
  Thanks, it worked. Please reply as answer so that I can accept.
  - 0
  - 2013-06-27
  - ISnoculrucdees
- Comment savoirexactement sur quellepage vous souhaitezinclure ce script?>
  
  How do you know which page, exactly, you want to include this script on?>
  - 0
  - 2013-06-27
  - Chip Bennett
- vouspouvez utiliser lafonction wordpress [is_page] (https://developer.wordpress.org/reference/functions/is_page/)
  
  you can use wordpress [is_page](https://developer.wordpress.org/reference/functions/is_page/) function
  - 0
  - 2016-08-26
  - Rohit Kishore

3 réponses

votes

Brooke. · Answer 1 · 2013-06-27

6

2013-06-27

Bien que @s_ha_dum soit correct,vous AUREZ besoin d'utiliserjQuery sans conflit dans WordPress,la question d'origine reste sans réponse.

J'ai ce code queje souhaite ajouter dans une demespages spécifiques.

Ilexisteplusieursfaçons deprocéder.

Basé sur lenom de lapage/slug WordPress dans lefichierfunctions.php duthème

Cetteméthode utilise le hook WordPress wp_enqueue_scripts

Créez unnouveaufichierjspour votre script my-nifty-custom.js

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 si vous utilisez unthèmeenfant ou si vous souhaitez lefairemieux,enveloppez letout 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 (routagebasé sur DOM)

C'est unpeuplus compliqué. Heureusement,Paul Irish a écrit unblogfantastique à ce sujetici: http ://www.paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/

Si vous utilisez cetteméthode,vous obtiendrez votre JSpersonnaliséparpageen fonction de la classe Body. Parexemple <body class="nifty">

Ensuite,vous utiliseriez:

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

Le seulproblème avec ceciest que lapage doit avoir la classe de corps que vous appelez. Pour cela,WordPress a lafonction body_class

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

    return $classes;
}

Quelleméthode devriez-vous utiliser?

Je recommande une combinaison des deux. Créez unfichier JavaScript qui utilise laméthode de Paul. Utilisezensuite wp_enqueue_scriptspour appeler cetteméthode.

Méthode Lazy header.php

Enfin,il y atoujours la voieparesseuse (queje ne recommandepasmais queje notejustepour référence.

Dans votre header.php,vouspouvezfaire:

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

Although @s_ha_dum is correct you WILL need to use jQuery no conflict within WordPress the original question is left unanswered.

I have this code which I want to add into a specific page of mine.

There are a couple of ways to do this

Based on Page name/slug WordPress in theme's functions.php

This method uses the WordPress hook wp_enqueue_scripts

Create a new js file for your script my-nifty-custom.js

In your functions.php add the following

/* 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 if you are using a child-theme or want to do it morebetter wrap the whole thing in 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
}

Based on Body Class (DOM-based Routing)

This is a little bit more complicated. Luckily Paul Irish wrote a fantastic blog about it here: http://www.paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/

If you use this method it will get your custom JS on a per page basis based on the Body Class. For Example <body class="nifty">

Then you would use:

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

The only problem with this is the page must have the body class you are calling. For this WordPress has the function body_class

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

    return $classes;
}

So which method should you use?

I recommend a combination of both. Create one JavaScript file that uses Paul's method. Then use wp_enqueue_scripts to call that method.

Lazy header.php method

Lastly there IS always the lazy way (which I don't recommend but am noting just for reference.

In your header.php you can do:

 <?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 · Answer 2 · 2013-06-27

1

2013-06-27

WordPress charge jQueryen mode "No Conflict" .L'alias "$"ne fonctionnepas.Utilisez le "jQuery" complet - jQuery.$.ajax({... ouencapsulez votre script comme l'exemple de la documentationjQuery ...

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

Ilexiste également desinformations sur ce dans le Codex .

WordPress loads jQuery in "No Conflict" mode. The "$" alias doesn't work. Use the full "jQuery"-- jQuery.$.ajax({... or wrap your script like the example from the jQuery docs...

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

There is information about this in the Codex as well.

John Negoita · Answer 3 · 2016-08-26

-1

2016-08-26

J'ai rencontré ceproblème à chaquefois queje voulais utiliser unpluginjQuery dansmes articleset mespages.Ma solution a été de créer un shortcodegénérique depluginjQuery http://www.coding-dude.com/wp/web-design/javascript/how-to-use-jquery-plugin-with-wordpress-plugin-tutorial/

Ajoutez lenœud de la réponseen plus de créer un lien vers un lienexterne.

Add the crux of the answer in addition to linking to a external link.
- 2
- 2016-08-26
- bravokeyl
downvoté carianswer devrait être sur ce site,et sur un sitetiersinconnuet peufiable

downvoted as ianswer should be on this site, and in some unknown and unreliable third party site
- 0
- 2016-08-26
- Mark Kaplun
Voté à labaisse.Cen'estpas une réponse à la question.Il s'agitplutôt d'un lien vers votre siteexterne,qui obligeensuite l'utilisateur à s'abonner à votrenewsletter afin d'obtenirmême leplug-in que vous avezposé comme "réponse" à la question.

Down-voted. This is not an answer to the question. Rather, it's a link to your external site, which then requires the user to subscribe to your newsletter in order to even get the plug-in you've posed as the "answer" to the question.
- 0
- 2017-09-02
- omega33