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

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

图片转代码服务由CSDN问答提供 功能建议

我想将自定义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 / 目录位置我的脚本附有文件名 slider_hover_effect.js ,其中包含上面的javascript代码。

请告诉我有没有其他方法可以在我的wordpress网站上添加此脚本。 另外,我想仅为主页添加/应用此脚本。 这是可能的。

谢谢,

更新

我不确定我应该在<代码后提供完整路径 > get_stylesheet_directory_uri()或只是 / js / 文件夹。

我可以使用like -

  function slider_effect(){?&gt;  
&lt; script type =“text / javascript”&gt; 
 
jQuery(“。tp-tab”)。mouseenter(function(){
 jQuery('。tp-tab')。removeClass(“selected”  ); 
}); 
jQuery(“。tp-tab”)。click(function(){
 jQuery(this).addClass(“selected”); 
}); 
 
&lt; / 脚本&gt; 
 
&lt;?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条)

相关推荐 更多相似问题