javascript - 使用 wp_enqueue_script() 在 Wordpress -functions.php 中添加 Javascript

Question

我想将自定义 JavaScript 添加到我的 WordPress 页面。

我尝试使用wp_enqueue_script()但它不起作用。当我尝试直接在 Inspect 元素中添加脚本时，它可以正常工作，因此我的脚本是正确的。

现在我在 function.php 文件中创建函数来添加脚本，但它不起作用。当我检查页面源时，它显示脚本/文件已加载到页面中。但它什么也没做。

下面是我的脚本和函数。

Javascript-

jQuery(".tp-tab").mouseenter(function() {
  jQuery('.tp-tab').removeClass("selected");
});
jQuery(".tp-tab").click(function() {
  jQuery(this).addClass("selected");
});

function.php 中的函数

    function mytheme_custom_scripts() {

            if ( !is_admin() ) {
                $scriptsrc = get_stylesheet_directory_uri() . '/wp-content/themes/circles/js/';
                wp_register_script( 'myhandle', $scriptsrc . 'slider_hover_effect.js', 'jquery', '1.0',  false );
                wp_enqueue_script( 'myhandle' );
            }

        }

add_action( 'wp_enqueue_scripts', 'mytheme_custom_scripts' );

在 /wp-content/themes/circles/js/ 目录位置中，我的脚本放置在包含上述 JavaScript 代码的 slider_hover_effect.js 文件名中。

请告诉我是否有其他方法可以在我的 WordPress 网站中添加此脚本。另外，我想仅为主页添加/应用此脚本。那么这可能吗。

谢谢

更新

我不确定是否应该在 get_stylesheet_directory_uri() 或仅 /js/ 文件夹之后提供完整路径。

或者

我可以使用类似 -

function slider_effect() { ?>
    <script type="text/javascript">

jQuery(".tp-tab").mouseenter(function() {
  jQuery('.tp-tab').removeClass("selected");
});
jQuery(".tp-tab").click(function() {
  jQuery(this).addClass("selected");
});

    </script>

    <?php

}

add_action('wp_head','slider_effect');

Answer 1

在你的functions.php中

function mytheme_custom_scripts(){
    if ( is_home() || is_front_page()) {
            $scriptSrc = get_template_directory_uri() . '/js/slider_hover_effect.js';
            wp_enqueue_script( 'myhandle', $scriptSrc , array(), '1.0',  false );
    }
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_scripts' );

JavaScript 文件 (slider_hover_effect.js)

$( document ).ready(function($) {
    $( 'body' ).on( 'mouseenter', '.tp-tab', function () {
        $(this).removeClass("selected");
    });
    $( 'body' ).on( 'click', '.tp-tab', function () {
        $(this).addClass("selected");
    });
});

1. 检查浏览器控制台是否有错误。
2. 查看页面源代码并查看该文件是否包含在源代码底部。
3. 可能存在一些优先级问题，请检查是否尝试将 wp_enqueue_script 函数中的“false”参数更改为“true”(以便脚本将添加到 header )。

我希望这会有所帮助。