Divi에서 외부 JavaScript 조각을 사용하기 위한 모범 사례

WordPress와 Divi는 웹 사이트를 쉽게 구축할 수 있도록 즉시 사용할 수 있는 많은 놀라운 기능을 제공합니다. 그러나 때로는 JavaScript로만 수행할 수 있는 고급 기능이 필요합니다.

Divi를 사용하면 하위 테마가 설정되지 않은 경우에도 플러그인 없이 테마 또는 웹 페이지에 JavaScript 또는 jQuery 스니펫(코드 덩어리)을 쉽게 추가할 수 있습니다. 이 튜토리얼에서는 Divi에서 외부 JavaScript 스니펫을 사용하기 위한 몇 가지 모범 사례를 살펴보겠습니다.

JavaScript 및 jQuery에 대한 간략한 설명

JavaScript는 웹사이트에서 볼 수 있는 동적 기능 뒤에 숨겨진 마법입니다. HTML 또는 CSS만으로는 불가능한 브라우저를 통해 모든 테마 파일에 액세스하고 모든 유형의 기능을 수행할 수 있는 웹용으로 구축된 클라이언트 측 코딩 언어입니다.

JQuery(가장 인기 있는 JavaScript 라이브러리 중 하나)를 사용하면 다양한 브라우저 유형에서 작동하는 JavaScript 스니펫을 웹사이트에 쉽게 추가할 수 있습니다. 이것이 오늘날 웹사이트에서 많은 jQuery가 사용되는 이유입니다. JQuery는 또한 WordPress에 내장되어 있으므로 Divi에 추가하는 jQuery 코드는 형식이 적절하면 작동합니다.

Divi/WordPress에서 적절한 JQuery 조각 형식 지정

문서 준비 기능 사용

대부분의 경우 jQuery 조각에서 $(document).ready() 를 사용하는 것이 좋습니다. $(document).ready() 추가된 모든 JavaScript는 JavaScript를 실행하기 전에 문서(또는 DOM)가 로드되고 준비되었는지 확인합니다. 이렇게 하면 페이지를 안전하게 조작할 준비가 되지 않았을 때 JavaScript가 실행될 수 있는 특정 상황을 피할 수 있습니다.

Divi에서 함수는 다음과 같아야 합니다.

jQuery( document ).ready(function() {

    // Add jQuery code here to be loaded once the DOM is ready

});

WordPress에서 jQuery를 사용할 때 "$" 대신 "jQuery" 사용

WordPress는 이미 호환성 모드의 jQuery 버전과 함께 제공되므로 jQuery의 표준 $ 는 작동하지 않습니다. 이것은 WordPress에서 사용하거나 사용하지 않을 수 있는 다른 JavaScript 라이브러리와 충돌하지 않도록 하기 위한 것입니다. 대신 $ 바로 가기 대신 jQuery 를 사용해야 합니다.

그래서 이거…

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

이걸로 바꿔야 하나...

jQuery(document).ready(function(){
  jQuery("p").click(function(){
    jQuery(this).hide();
  });
});

그러나 코드를 덜 부풀리게 하고 $ 단축키를 유지하려면 문서 준비 함수에 전달된 인수로 $ 를 추가하면 jQuery 대신 $ 를 사용할 수 있습니다. 이렇게 하면 해당 함수에 포함된 jQuery 스니펫에 $를 유지할 수 있습니다.

다음과 같이 보일 것입니다.

jQuery( document ).ready(function( $ ) {
    // Add jQuery code here, using $ to refer to jQuery.
    $( "div" ).hide();
});

또는 문서 준비 기능과 함께 이와 같은 간단한 기능을 사용하여 jQuery $ in을 전달할 수 있습니다.

(function($) {
    
    // Add jQuery code here, using $ to refer to jQuery.
    $(document).ready(function(){

      $( "div" ).hide();

    });
    
})( jQuery );

이제 JavaScript 스니펫의 형식을 지정하는 방법에 대한 몇 가지 모범 사례를 이해했으므로 이를 Divi 사이트에 올바르게 추가하는 방법을 살펴보겠습니다.

코드 모듈을 사용하여 단일 페이지에 JavaScript 조각 추가

Divi의 단일 페이지에 javascript(또는 jquery) 스니펫을 추가하려는 경우 코드 모듈을 사용할 수 있습니다. 이렇게 하면 JS가 모든 페이지에 불필요하게 로드되지 않아 필요하지 않은 페이지에서도 페이지 로드 시간이 약간 증가합니다.

방법은 다음과 같습니다. 먼저 JS 스니펫이 필요한 페이지를 편집할 때 divi 빌더를 활성화합니다. 그런 다음 페이지에 코드 모듈을 추가합니다.

코드는 페이지의 어느 곳에서나 작동하므로 원하는 위치에 코드를 입력하면 됩니다.

코드 모듈을 추가한 후 JavaScript 스니펫을 붙여넣습니다. 코드가 자바스크립트로 인식될 수 있도록 <script> 태그로 코드를 감싸야 합니다.

코드가 JavaScript로 인식될 수 있도록 <script> 태그로 래핑하여 스니펫이 올바른 형식으로 코딩되었는지 확인하는 것을 잊지 마십시오. 그리고 jQuery를 사용하는 경우 문서 준비 기능을 포함하여 문서가 준비될 때마다 로드되도록 합니다. 또한 스니펫에서 약식 $ 대신 jQuery 를 사용해야 합니다.

그게 다야! 스니펫은 예상대로 페이지에서 실행되어야 합니다.

참고: <script> 태그는 일반적으로 다음과 같이 스크립트의 미디어 유형을 지정해야 합니다.

<script type="text/javascript">
</script>

그러나 "text/javascript"가 기본 유형이므로 JavaScript 코드 스니펫에 사용할 때 생략해도 됩니다.

Divi 테마 옵션을 사용하여 모든 페이지/게시물에 JavaScript 스니펫 추가(하위 테마 필요 없음)

테마 옵션에서 Divi의 코드 통합 탭을 사용하여 JavaScript 스니펫을 Divi에 추가할 수도 있습니다. 이 방법은 웹사이트의 모든 페이지/게시물에 로드하려는 JS 스니펫에 적합합니다. 자식 테마가 없거나 Divi 사이트에 추가해야 하는 JS 스니펫이 몇 개만 있고 외부 JS 파일에 포함하고 싶지 않은 경우에도 좋은 옵션입니다.

코드 통합 섹션을 찾으려면 Divi > 테마 옵션으로 이동하여 통합 탭을 클릭합니다.

JavaScript 스니펫을 어디에 둘 것인지 파악하기

Divi 사이트에 사용자 정의 코드를 추가할 수 있는 4개의 영역이 표시됩니다. 대부분의 경우 본문에 JS 스니펫을 추가하는 것이 가장 좋습니다. 이렇게 하면 실제로 스니펫이 페이지 하단에 배치되어 페이지 로드 속도에 좋은 다른 모든 항목 다음에 로드됩니다. 어떤 경우에는 코드를 더 빨리 로드할 수 있도록 헤드에 코드를 추가할 수 있습니다(또는 문서가 더 빨리 실행되는 JavaScript에 의존하는 경우). 따라서 성능, 타이밍 및 기능의 최상의 균형을 제공하는 최상의 옵션을 테스트하고 결정해야 합니다.

예를 들어 헤더에 스타일을 추가하는 jQuery 스니펫이 있을 수 있습니다. 이 경우 스니펫을 읽을 때까지 해당 스타일 없이 헤더가 처음에 로드되기 때문에 본문(페이지 끝 부분)에 로드하고 싶지 않습니다. 이렇게 하면 스크롤 없이 볼 수 있는 부분이 잠시 동안 방문자에게 보기 흉해 보일 수 있습니다. 그러나 머리에 로드하면 스타일링에 지연이 발생하지 않습니다.

블로그 게시물에만 적용되는 코드가 있는 경우 게시물 하단에 JS 스니펫을 추가하도록 선택할 수도 있습니다. 이렇게 하면 코드가 불필요하게 다른 페이지에 로드되지 않습니다.

코드 통합 영역은 코드를 페이지에 직접 추가하므로 코드 조각을 <script> 태그로 래핑해야 합니다.

별도의 JS 파일에서 Divi에 JS 스니펫 추가(하위 테마 사용)

Divi 사이트에는 항상 하위 테마를 사용하는 것이 좋습니다. 그리고 자식 테마를 올바르게 설정했으면 사용자 정의 JS 스니펫을 보관하는 데 사용할 수 있는 JS 파일을 통합할 수도 있습니다.
이것은 확실히 WordPress 사이트에서 자바 스크립트를 처리하는 데 선호되는 방법이며 Divi에서도 잘 작동합니다.

자식 테마에서 JS 파일 만들기

특히 테마 파일을 변경할 계획이라면 항상 Divi 하위 테마를 설정하는 것이 좋습니다. Divi 하위 테마를 만든 후에는 모든 JS 스니펫을 한 곳에 배치할 수 있는 JavaScript 파일을 쉽게 만들 수 있습니다.

방법은 다음과 같습니다.

JavaScript 파일을 생성하여 하위 테마 폴더에 추가합니다.

코드 편집기를 사용하여 새 파일을 만들고 JavaScript 파일로 저장합니다. 예를 들어 파일을 "scripts"라는 이름의 "js" 유형으로 저장한 경우 전체 파일 이름은 "scripts.js"가 됩니다. 여기에서 Divi에 추가하려는 모든 js 스니펫을 추가합니다. 파일이 js 파일로 저장되기 때문에 <script> 태그에 스니펫을 래핑할 필요가 없습니다.

파일이 생성되면 하위 테마 폴더에 추가해야 합니다. 나는 더 나은 조직을 위해 내 사용자 정의 js 파일을 보관할 js 폴더를 만들고 싶습니다. 이렇게 하려면 하위 테마 폴더의 루트에 "js"라는 새 폴더를 만들고 해당 폴더에 "scripts.js" 파일을 추가하기만 하면 됩니다.

자식 테마의 Functions.php 파일에 스크립트를 대기열에 추가하기

이제 js 파일을 큐에 넣어 Divi에 로드해야 합니다. 이미 자식 테마를 만들었다면, 다음과 같은 자식 테마의 style.css 파일을 이미 대기열에 넣은 functions.php 파일이 있어야 합니다.

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

이제 새 js 파일에 대해 동일한 작업을 수행해야 합니다. 이렇게 하려면 함수에 다음 스니펫을 추가해야 합니다.

    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );

style.css 및 scripts.js 파일을 대기열에 추가하는 데 필요한 최종 코드는 다음과 같습니다.

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

마지막 생각들

웹 디자인이 처음이거나 Divi를 처음 시작하는 경우 JavaScript 또는 웹 사이트에 추가하는 방법에 익숙하지 않을 수 있습니다. 이 게시물이 올바른 방향을 제시하고 노련한 웹 개발자도 이해할 수 있는 몇 가지 모범 사례를 제공하는 데 도움이 되었기를 바랍니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!