아바다 테마에 jQuery 코드를 삽입하는 방법은?

아바다 테마에 jQuery 코드를 삽입하는 방법은?

제 워드프레스 테마(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"라는 플러그인으로 코드를 삽입하려고 했지만 도움이 되지 않았습니다.

Avada 테마를 사용하고 있는 경우 테마 옵션->Advance->Code Fields(Tracking 등)로 이동하면 두 번째 상자(이전 공백)에 코드 추가에 필요한 텍스트 상자가 3개 표시됩니다.태그 안에 코드를 넣습니다.스크린샷 첨부합니다.

첫째, CSS/JS 플러그인을 사용하지 마십시오. 이러한 플러그인은 일반적으로 주요 보안 문제의 원인이 되며 유지 관리성이 좋지 않습니다.

워드프레스에서 자바스크립트를 추가하는 적절한 방법은 다음과 같습니다.

자녀 테마(언제든지 업데이트할 수 있도록 아바다에 자녀 테마를 만들었기 때문에? :)에서 다음 기능을 기능에 추가합니다.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');

이것은 워드프레스에게 모든 페이지의 바닥에 있는 당신의 테마 js 디렉토리에 있는 tabs-scripts.js에 링크하기 위한 적절한 스크립트 태그를 추가하고 jQuery UI 의존성을 로드하라고 알려줄 것입니다.참고는 설명서 참조.

그런 다음 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))이행하였습니다.

스크립트 코드를 기능에 추가하기만 하면 됩니다.php 파일.이렇게 하면 많은 작업 없이 스크립트 코드를 중앙 집중화할 수 있습니다.스크립트를 사용하기 전에 JQuery를 정의해야 합니다.

당신이 요구하는 것을 해결할 수 있는 많은 방법들이 있지만, 저는 정보를 출처로부터 얻는 것에 치우치는 경향이 있습니다.아래 링크가 도움이 되기를 바랍니다.

https://codex.wordpress.org/Using_Javascript

언급URL : https://stackoverflow.com/questions/37271931/how-to-insert-jquery-code-in-avada-theme