如何在Avada主题中插入jQuery代码？ [英] How to insert jQuery code in Avada theme?

问题描述

我想在我的Wordpress主题（Avada）中插入一个简单的jQuery代码，像这样：

I want to insert a simple jQuery code in my Wordpress theme (Avada), something 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');
    });
});

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

In a page, but it doesn't work.

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

I tried to use different classes to all the HTML elements and to insert my code with a plugin named "CSS & Javascript Tool box", but it didn't helped.

推荐答案

首先不要使用任何CSS / JS插件，这是一个可怕的想法因为这样的插件通常是主要的原因安全问题并没有提供任何良好的可维护性。

First don't use any CSS/JS plugin, it's a terrible idea as such plugins are usually the reason for major security issues and doesn't provide any good maintainability.

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

Here is the proper way to add Javascript in Wordpress :

在您的子主题中（因为您为Avada创建了子主题，以便能够更新它在任何时候，对吗？:)），在 functions.php 文件中添加以下功能：

In your child theme (because you created a child theme to Avada in order to be able to update it at any time, right? :) ), add the following function in your functions.php file:

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添加适当的脚本标记以链接到 tabs-scripts.js 位于每个页面页脚的主题js目录中，并加载jQuery UI依赖项。请参阅 wp_register_script 文档以供参考。

This will tell Wordpress to add the appropriate script tag to link to tabs-scripts.js located in your theme js directory at the footer of every page, and to load the jQuery UI dependency. See wp_register_script documentation for reference.

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

Then, create your tabs-scripts.js file in your js directory and add the following script:

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 和 #acordion 是在运行脚本之前的页面中。

• That $ is available and reference to jQuery
• And the appropriate DOM elements #tabs and #accordion are in the page before running the script.

如果它不起作用，请检查脚本是否已添加到页面中，并且（$（'＃tabs'）。length&& $（'＃accordion'）。length））已履行。

If it doesn't work check that the script is added to the page, and that the ($('#tabs').length && $('#accordion').length)) is fulfilled.

这篇关于如何在Avada主题中插入jQuery代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！