如何在单个 wordpress 页面中添加 jquery 代码？

Question

I have a script that requires jQuery, and I don't know how to add it into a single wordress page. I looked for many solution, but they are too hard for me to understand.

<script>
$(document).ready(function(e) {
$('#checkboxtest').change(function(){
    if( $('#checkboxtest').prop('checked') )
       {checkboxstatus = "YES";}
       else
       {checkboxstatus = "NO";}
$.ajax({
        type: "POST",
        url: "checkboxtestbackend.php",
        data: {checkboxstatus: checkboxstatus},
        })
        
});
});
</script>

Answer 1

Try this:

<?php if (is_page('my-page-slug')): ?>
<script>
$(document).ready(function(e) {
$('#checkboxtest').change(function(){
    if( $('#checkboxtest').prop('checked') )
       {checkboxstatus = "YES";}
       else
       {checkboxstatus = "NO";}
$.ajax({
        type: "POST",
        url: "checkboxtestbackend.php",
        data: {checkboxstatus: checkboxstatus},
        })
});
});
</script>
<?php endif; ?>

Answer 2

There are many ways to add javascript to your WordPress.

The easiest way is to use plugins like this one css javascript toolbox to add your scripts where you need on your WordPress.

Another way is to update your WordPress template and insert your code where it needed. This link provide you a full example of how achieved this: add-javascript-to-wordpress

Answer 3

First of all - you should rewrite your jQuery wrapper for code to work within WP pages:

jQuery(function($) {
    $('#checkboxtest').change(function(){
        if( $('#checkboxtest').prop('checked') )
           {checkboxstatus = "YES";}
           else
           {checkboxstatus = "NO";}
    $.ajax({
            type: "POST",
            url: "checkboxtestbackend.php",
            data: {checkboxstatus: checkboxstatus},
            })
            
    });
});

Now you can add this code to a Wordpress page in two ways:

Using a plugin for custom code snippets (like this one )

Or if your page is using a custom-coded template, you can directly paste the

<script>
...
</script>

tag with your code, where you need it.

Answer 4

Use code like below:

  <?php
    function myscript() {
        // if ( is_single() && 'post' == get_post_type() ) {
        // if ( is_singular( 'book' ) ) {  // book is a custom post type 
        if ( is_single()) {
            ?>
            <script type="text/javascript">
                alert("Hello! I am Added");
    
            </script>
        <?php
        }
    }
    add_action('wp_footer', 'myscript');

Another example:

/**
 * Proper way to enqueue scripts and styles.
 */
function wpdocs_theme_name_scripts() {
    // if ( is_single() && 'post' == get_post_type() ) {
    // if ( is_singular( 'book' ) ) {  // book is a custom post type 
    if ( is_single()) {
        wp_enqueue_style( 'style-name', get_stylesheet_uri() );
        wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );