使用wp_enqueue_script()在Wordpress-functions.php中添加Javascript [英] Add Javascript in Wordpress - functions.php with wp_enqueue_script()

问题描述

我想将自定义javascript添加到我的wordpress页面.

I want to add my custom javascript to my wordpress page.

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

I tried it usign wp_enqueue_script() but its not working. When I tried to add script directly in Inspect element it works properly so my script is correct.

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

Now I create function in function.php file to add script and its not working. It shows script / file is loaded in page when I check source of page. But it doing nothing.

下面是我的脚本和功能.

Below is my script and function.

JavaScript-

Javascript -

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

function.php中的函数

Function in 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/目录位置，我的脚本使用文件名slider_hover_effect.js填充，其中包含上述javascript代码.

In /wp-content/themes/circles/js/ directory location my script is palced with file name of slider_hover_effect.js which contain above javascript code.

请告知我，还有其他方法可以在我的wordpress网站中添加此脚本.我也只想为首页添加/应用此脚本.这是可能的.

Please let me know is there any other way I can add this script in my wordpress website. Also I want to add/apply this script only for Homepage. So is this possible.

谢谢

我不确定我应该在get_stylesheet_directory_uri()文件夹之后还是在/js/文件夹后面提供完整的路径.

I am not sure about that I should provide complete path after get_stylesheet_directory_uri() or just /js/ folder.

或

我可以像-

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

推荐答案

在您的functions.php中

In your 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)

JavaScript file (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"(以便将脚本添加到标头).

我希望这会有所帮助.

这篇关于使用wp_enqueue_script()在Wordpress-functions.php中添加Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！