dougu5886
dougu5886
2016-04-04 04:01

在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 doulao2916 5年前

    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.

    点赞 评论 复制链接分享
  • drpjdfj618393 drpjdfj618393 5年前

    I believe you forgot the src parameter in the wp_enqueue_script when you called it in your callback mytheme_custom_scripts

    From wordpress docs:

    wp_enqueue_script ( string $handle, string|bool $src = false, array $deps = array(), string|bool $ver = false, bool $in_footer = false )
    

    Parameters

    $handle (string) (Required) Name of the script.

    $src (string|bool) (Optional) Path to the script from the root directory of WordPress. Example: '/js/myscript.js'. Default value: false

    So I believe your code should be:

     wp_enqueue_script( 'myhandle' , $scriptsrc . 'slider_hover_effect.js');
    

    Another way is if you can create your custom plugin and activate that plugin to allow you to include custom js or css like this in your index.php file of the plugin:

    add_action( 'init', 'my_script' );
    
    function my_script() {
        if( is_home() ){
            wp_enqueue_script('my_script', plugins_url('js/script.js', __FILE__), array('jquery'));
            wp_enqueue_style('my_style', plugins_url('css/style.css', __FILE__));
        }
    }
    

    You place the files in the js/ or css/ dir and this works

    点赞 评论 复制链接分享
  • dta43039 dta43039 5年前

    Try this ,change !is_admin() with is_home()

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

    or:

    function slider_effect() {
    if ( is_home() ) {
     ?>
        <script type="text/javascript">
    jQuery(function(){
    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');
    
    点赞 评论 复制链接分享
  • duanhao4909 duanhao4909 5年前

    Try this:

    functions.php

    function mytheme_custom_scripts() {
    // No need to check admin, 'wp_enqueue_scripts' only enqueues at the frontend 
                $scriptsrc = get_stylesheet_directory_uri() . '/js/';
                wp_register_script( 'myhandle', $scriptsrc . 'slider_hover_effect.js', array('jquery'), '1.0',  false );
                wp_enqueue_script( 'myhandle' );
    
        }
    
    add_action( 'wp_enqueue_scripts', 'mytheme_custom_scripts' );
    

    Check full codex: https://developer.wordpress.org/reference/functions/wp_enqueue_script

    You should not print JS in 'wp_head' unless you can't do otherwise.

    slider_hover_effect.js

    jQuery(document).ready(function($){
       $(".tp-tab").mouseenter(function() {
         $(this).removeClass("selected");
       });
       $(".tp-tab").click(function() {
         $(this).addClass("selected");
       });
    });
    
    点赞 评论 复制链接分享

相关推荐