Question

我一直致力于wordpress主题，我在网站中使用了不同的javascript元素。在谈到Javascript和JQuery时，我更像是一个菜鸟，所以我将脚本和cdn链接直接插入到Header.php的<head>部分。

当我的某些下拉列表停止工作时，我发现它在JQuery版本之间产生了冲突，并且我一直都在做错了。

所以我已经学会了关于注册和排队脚本的方法，但没有运气让下拉菜单再次运行。

您是否能够从我在下面发布的代码中了解可能导致此问题的原因？我知道我很有可能因为刚接触它而犯了一个愚蠢的错误，我只是无法理解它是什么。

这两个片段是网站上两个重复元素的脚本。一个滑出式切换盒和一个下拉式手风琴盒。

Accordion.js

  jQuery(document).ready(function($) {
$( "#accordion" ).accordion({
collapsible: true, active: false
});
$('#accordion2').accordion({collapsible: true, active: false});
 $('#accordion3').accordion({collapsible: true, active: false});

}）;

Togglebox.js

    jQuery(document).ready(function($) {
    $( ".dropdown" ).click(function() {
  $( ".togglebox" ).toggle( "slide", 1000 );
    });
});

以下代码段是我在Functions.php文件中放置的代码。

       function my_scripts_method() {
if ( !is_admin() ) {
    wp_enqueue_script('jquery-ui-accordion');
    wp_enqueue_script(
        'custom-accordion',
        get_template_directory_uri() . '/js/accordion.js',
        array('jquery')
        );
    wp_enqueue_script(
    'custom-script',
    get_template_directory_uri() . '/js/tabs.js',
    array('jquery')
    );
    wp_enqueue_script('jquery-ui-toggle');
}
    }

add_action('wp_enqueue_scripts', 'my_scripts_method');

我已经保存了'accordion.js＆＃39;和＆＃39; togglebox.js＆＃39;在我使用的主题的JS文件夹中本地存档。

对此有任何帮助将不胜感激。

Answer 1

创建2个JS文件：

accordion.js
togglebox.js

将2个文件保存在主题的JS文件夹中。之后注册并将主题的Functions.php文件中的脚本排入队列。

你不必注册已存在于Wordpress中的jquery和jquery ui。这里有两个有用的链接：
https://developer.wordpress.org/reference/functions/wp_enqueue_script/ https://developer.wordpress.org/reference/functions/wp_register_script/

在Togglebox.js中尝试：

jQuery(document).ready(function($) {
    $( ".dropdown" ).click(function() {
      $( ".togglebox" ).slideToggle( 1000 );
    });
});

在functions.php中尝试这个：

 wp_enqueue_script('jquery-ui-accordion');
    wp_register_script( 'custom-accordion', get_template_directory_uri() . '/js/accordion.js', array('jquery-ui-accordion'), '1', true );
    wp_enqueue_script( 'custom-accordion' );
    wp_register_script( 'custom-togglebox', get_template_directory_uri() . '/js/togglebox.js', array('jquery'), '1', true );
    wp_enqueue_script('custom-togglebox');

将functions.php中的自定义更改为主题的slug。我尝试了这段代码，它对我有用。

正确地在wordress中注册和排队脚本 - 让脚本工作的问题

1 个答案: