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

【问题标题】：How Can i add jquery code in single wordpress page?如何在单个 wordpress 页面中添加 jquery 代码？
【发布时间】：2020-08-18 21:24:53
【问题描述】：

我有一个需要 jQuery 的脚本，但我不知道如何将它添加到单个 wordress 页面中。我寻找了很多解决方案，但它们对我来说太难理解了。

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

【问题讨论】：

除了下面提供的答案之外，您还应该使用 enqueue_script() 根据 wordpress 法典从单独的文件中检索 jquery。

标签： javascript jquery ajax wordpress

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

首先 - 你应该重写你的 jQuery 包装器以使代码在 WP 页面中工作：

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

现在您可以通过两种方式将此代码添加到 Wordpress 页面：

使用插件进行自定义代码 sn-ps（如this one）

或者如果你的页面使用的是自定义编码的模板，你可以直接粘贴

<script>
...
</script>

在您需要的地方标记您的代码。

【讨论】：

【解决方案3】：

有很多方法可以将 JavaScript 添加到您的 WordPress。

最简单的方法是使用像 css javascript toolbox 这样的插件将脚本添加到 WordPress 上您需要的位置。

另一种方法是更新您的 WordPress 模板并将您的代码插入到需要的位置。此链接为您提供了如何实现此目的的完整示例：add-javascript-to-wordpress

【讨论】：

【解决方案4】：

使用如下代码：

  <?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');

另一个例子：

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

【讨论】：