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

Posted 2023-05-09

【中文标题】如何在 Avada 主题中插入 jQuery 代码？

【英文标题】：How to insert jQuery code in Avada theme?

【发布时间】：2016-09-13 07:20:56

【问题描述】：

我想在我的 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”的插件插入我的代码，但没有帮助。

【问题讨论】：

您是否将“$”符号替换为“jQuery”？

将它添加到 wp_footer 并用 jQuery 替换 $ 并在此处进一步阅读：codex.wordpress.org/Plugin_API/Action_Reference/wp_footer

您是如何将 JS 插入“页面”的？您是否将其添加到页面模板内的脚本标记中？

我尝试用 JQuery 替换 $，但它不起作用:(

我用了一个插件名 CSS & Javascript toolbox

【参考方案1】：

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

【讨论】：

感谢我们的帮助，但我在

你是否看到任何错误，尝试检查元素，看看是否有任何错误

也让它准备好文档 jQuery(document).ready(function($)

谢谢！我有这个错误：(index):218 Uncaught TypeError: jQuery(...).tabs is not a function

.tabs 是 jQuery UI 函数，如果加载了 jQuery UI 脚本，请添加 jQuery UI 文件。你可以在这里获得更多关于标签的信息jqueryui.com/tabs

【参考方案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)) 是否已完成。

【讨论】：

非常感谢！！我有一个儿童主题是的；）我刚刚测试了你的建议，脚本没有添加到页面中。你知道我可以把文件放在 FTP 的什么地方吗？谢谢

你的js文件应该在wp-content/themes/<your-child-theme>/js/，你应该在wp-content/themes/<your-child-theme>/functions.php添加函数。如果你做对了，但它仍然不起作用，请检查你的主题 footer.php 文件是否包含对wp_footer() 函数的调用。

我检查了footer.php，我发现了这个：”字段的脚本 echo Avada()->settings->get( 'space_body' ); ?> 但我在页面中找不到 tabs-script.js

您是否添加了我在 functions.php 中粘贴的确切代码？您需要函数 + add_action 调用。

是的，我完全按照你的解释去做

【参考方案3】：

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

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

https://codex.wordpress.org/Using_Javascript

【讨论】：

你应该避免将你的 JS 代码直接放在你的模板中，因为它不容易维护——所有的 JS 都应该被加入队列以提供版本和依赖控制。这在性能方面也非常重要，因为可以缓存、缩小单独的文件...参见Is it better to put the JS code on the html file or in an external file?

抱歉，我的意思是functions.php。

谢谢！我已经尝试过 Function.php 但它不起作用