如何在 Avada 主题中插入 jQuery 代码？

Question

我想在我的 Wordpress 主题 (Avada) 中插入一个简单的 jQuery 代码，like this:

$(function() {
    $("#tabs").tabs({ show: { effect: "blind", direction: "right", duration:300 }});
    $( "#accordion" ).accordion();

    var btn = $('#accordion li a');
    var wrapper = $('#accordion li');

    $(btn).on('click', function() {
        $(btn).removeClass('active');
        $(btn).parent().find('.addon').removeClass('fadein');

        $(this).addClass('active');
        $(this).parent().find('.addon').addClass('fadein');
    });
});

在一个页面中，但它不起作用。

我尝试对所有 HTML 元素使用不同的类，并使用名为“CSS & Javascript Tool box”的插件插入我的代码，但没有帮助。

Answer 1

您正在使用 Avada 主题，转到主题选项->高级->代码字段（跟踪等），您将看到三个文本框，您需要在第二个框中添加代码（空格前）。 将代码放在标签内。我附上截图。

Answer 2

首先不要使用任何 CSS/JS 插件，这是一个糟糕的主意，因为此类插件通常是主要安全问题的原因，并且不提供任何良好的可维护性。

这是在 Wordpress 中添加 Javascript 的正确方法：

在您的子主题中（因为您为 Avada 创建了一个 child theme 以便能够随时更新它，对吧？:)），在您的 functions.php中添加以下函数> 文件：

function my_theme_scripts() {
    wp_register_script('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js', array('jquery'), '1.11.2', true);
    wp_enqueue_script('jquery-ui');
    wp_register_script('tabs-scripts', get_stylesheet_directory_uri() . '/js/tabs-script.js', array('jquery', 'jquery-ui'), '1.0', true);
    wp_enqueue_script('tabs-scripts');
    wp_enqueue_style('jquery-style', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css');
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

这将告诉 Wordpress 添加适当的脚本标记以链接到位于每个页面页脚的主题 js 目录中的 tabs-scripts.js，并加载 jQuery UI 依赖项。参考wp_register_script documentation。

然后，在您的 js 目录中创建 tabs-scripts.js 文件并添加以下脚本：

jQuery(document).ready(function($) {
    if($('#tabs').length && $('#accordion').length) {
        $("#tabs").tabs({ show: { effect: "blind", direction: "right", duration:300 }});
        $( "#accordion" ).accordion();

        var btn = $('#accordion li a');
        var wrapper = $('#accordion li');

        $(btn).on('click', function() {
            $(btn).removeClass('active');
            $(btn).parent().find('.addon').removeClass('fadein');

            $(this).addClass('active');
            $(this).parent().find('.addon').addClass('fadein');
        });
    }
}

这将确保两件事：

• $ 可用并引用jQuery
• 在运行脚本之前，相应的 DOM 元素 #tabs 和 #accordion 在页面中。

如果它不起作用，请检查脚本是否已添加到页面中，并且 ($('#tabs').length && $('#accordion').length)) 是否已完成。

Answer 3

只需将您的脚本代码添加到您的 functions.php 文件中。这样做是无需太多工作即可集中您的脚本代码。您唯一的要求是在使用脚本之前定义了 JQuery。

有很多方法可以解决您的问题，但我倾向于从源头获取信息。下面的链接希望对您有所帮助。

https://codex.wordpress.org/Using_Javascript