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

Question

我想在我的Wordpress主题(Avada)中插入一个简单的jQuery代码,如下所示:

$(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 创建了一个子主题以便能够随时更新它,对吗？:)),在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文档以供参考.

然后,在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))已完成.