dougu5886 2016-04-04 04:01
浏览 172
已采纳

在Wordpress中添加Javascript - 使用wp_enqueue_script()函数.php

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

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.

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 -

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

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

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.

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.

Thanks,

Update

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

Or

Can I use like -

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');
  • 写回答

4条回答 默认 最新

  • doulao2916 2016-04-04 05:15
    关注

    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 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. Check if there is any error in browser console.
    2. View page source and see if the file is included at the bottom of source.
    3. There might be some precedence issue, to check that try to change 'false' parameter to 'true' in wp_enqueue_script function (so the script will be added to header).

    I hope this helps.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥100 关于注册表摄像头和麦克风的问题
  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退
  • ¥15 关于#python#的问题
  • ¥15 主机可以ping通路由器但是连不上网怎么办
  • ¥15 数据库一张以时间排好序的表中,找出多次相邻的那些行
  • ¥50 关于DynamoRIO处理多线程程序时候的问题
  • ¥15 kubeadm部署k8s出错
  • ¥15 Abaqus打不开cae文件怎么办?
  • ¥20 双系统开机引导中windows系统消失问题?
  • ¥15 小程序准备上线,软件开发公司需要提供哪些资料给甲方