admin管理员组

文章数量:1022761

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.

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.

  • pages
  • jquery
Share Improve this question asked Jun 27, 2013 at 18:02 ISnoculrucdeesISnoculrucdees 711 gold badge1 silver badge2 bronze badges 3
  • Thanks, it worked. Please reply as answer so that I can accept. – ISnoculrucdees Commented Jun 27, 2013 at 18:15
  • How do you know which page, exactly, you want to include this script on?> – Chip Bennett Commented Jun 27, 2013 at 18:47
  • you can use wordpress is_page function – Rohit Kishore Commented Aug 26, 2016 at 8:47
Add a comment  | 

3 Answers 3

Reset to default 6

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

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

  2. 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/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>'); 
        } ?>

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.

I've ran into this problem every time I wanted to use a jQuery plugin in my posts and pages. My solution was to create a generic jQuery plugin shortcode http://www.coding-dude/wp/web-design/javascript/how-to-use-jquery-plugin-with-wordpress-plugin-tutorial/

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.

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.

  • pages
  • jquery
Share Improve this question asked Jun 27, 2013 at 18:02 ISnoculrucdeesISnoculrucdees 711 gold badge1 silver badge2 bronze badges 3
  • Thanks, it worked. Please reply as answer so that I can accept. – ISnoculrucdees Commented Jun 27, 2013 at 18:15
  • How do you know which page, exactly, you want to include this script on?> – Chip Bennett Commented Jun 27, 2013 at 18:47
  • you can use wordpress is_page function – Rohit Kishore Commented Aug 26, 2016 at 8:47
Add a comment  | 

3 Answers 3

Reset to default 6

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

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

  2. 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/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>'); 
        } ?>

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.

I've ran into this problem every time I wanted to use a jQuery plugin in my posts and pages. My solution was to create a generic jQuery plugin shortcode http://www.coding-dude/wp/web-design/javascript/how-to-use-jquery-plugin-with-wordpress-plugin-tutorial/

本文标签： How to add jQuery script to an individual page

版权声明：本文标题：How to add jQuery script to an individual page? 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745528970a2154660.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。