如何在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))已滿足。

Answer 3

只需將腳本代碼添加到functions.php文件中即可。 這樣做是集中你的腳本代碼而不需要太多工作。 您唯一的必備條件是在使用腳本之前已經定義了JQuery。

有很多方法可以解決您的問題，但我傾向於從源頭獲取信息。 以下鏈接有望提供幫助。

https://codex.wordpress.org/Using_Javascript