如何在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元素使用不同的类，并使用名为＆＃34的插件插入我的代码; CSS＆amp; Javascript工具箱＆＃34;，但它没有帮助。

Answer 1

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

Answer 2

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

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

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

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