使用wp_enque_script(）在Wordpress-functions.php中添加Javascript

Add Javascript in Wordpress - functions.php with wp_enqueue_script()

本文关键字：php Wordpress-functions 添加 Javascript wp enque script 使用      更新时间：2023-11-27

我想将自定义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");
});

函数中的函数.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/文件夹。

或

我可以像一样使用吗

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

在您的函数中.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_hooper_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_enque_script函数中的"false"参数更改为"true"（以便将脚本添加到标头中）

我希望这能有所帮助。

试试这个，用is_home() 更改!is_admin()

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

或：

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

试试这个：

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

检查完整的编码：https://developer.wordpress.org/reference/functions/wp_enqueue_script

除非不能打印JS，否则不应该在"wp_head"中打印JS。

滑块_悬停_效果.js

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

我相信您在回调mytheme_custom_scripts 中调用时忘记了wp_enqueue_script中的src参数

来自wordpress文档：

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

参数

$handle（string）（必需）脚本的名称。

$src（string|bool）（可选）WordPress根目录中的脚本路径。示例："/js/myscript.js"。默认值：错误

所以我认为你的代码应该是：

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

另一种方法是，如果你可以创建你的自定义插件并激活该插件，允许你在插件的index.php文件中包括这样的自定义js或css：

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__));
    }
}

您将文件放在js/或css/dir中，这样就可以运行

相关文章：