WordPress에 JavaScript 코드를 추가하는 가장 좋은 방법

JavaScript는 웹 개발의 필수적인 부분이 되었으며, 이를 통해 개발자는 웹 사이트에 대화형 요소와 동적 효과를 만들 수 있습니다. WordPress 사이트는 PHP로 구동되지만 WordPress 사이트에 일부 사용자 정의 JavaScript 코드를 추가해야 할 때가 있을 수 있습니다.

WordPress 테마 또는 플러그인 파일에 JavaScript 코드를 직접 추가하는 것은 업데이트 중에 덮어쓰여질 수 있으므로 권장되지 않습니다. 더 나은 해결책은 사이트에 사용자 정의 JS 코드를 쉽게 추가할 수 있는 전용 JavaScript 플러그인을 사용하는 것입니다.

이 기사에서는 핵심 파일을 수정하지 않고도 사이트에 사용자 정의 JS 코드를 쉽게 추가할 수 있게 해주는 WordPress용 최고의 JavaScript 플러그인 중 일부를 살펴보겠습니다. 우리는 JavaScript가 무엇인지, 왜 그것이 필요한지에 대해 다루고 WordPress에 JavaScript를 추가하기 위한 5가지 필수 플러그인을 검토할 것입니다. 올바른 플러그인을 사용하면 JavaScript를 WordPress 사이트에 원활하게 통합할 수 있습니다.

자바스크립트란 무엇입니까?

JavaScript는 1995년 Brendan Eich가 개발한 스크립팅 언어로 웹의 핵심 기술 중 하나입니다. 이는 대화형 동작, 애니메이션, 데이터 시각화 및 웹 브라우저에서 기본적으로 이해하는 기타 동적 기능을 추가하는 웹 페이지용 스크립팅 언어로 가장 잘 알려져 있습니다. JavaScript 코드는 HTML 페이지에 삽입될 수 있으며 DOM(문서 개체 모델)을 통해 상호 작용할 수 있으므로 프로그램은 사용자 작업에 대한 응답으로 페이지 구조, 스타일 및 콘텐츠를 조작할 수 있습니다.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

해석된 언어인 JavaScript는 컴파일할 필요 없이 명령을 직접 처리합니다. HTML 및 CSS와 함께 JavaScript는 웹 개발의 세 가지 기본 요소를 구성하여 풍부한 사용자 경험과 웹 애플리케이션을 가능하게 합니다. JavaScript의 다양성, 크로스 플랫폼 특성 및 광범위한 채택으로 인해 JavaScript는 지난 20년 동안 클라이언트 측 스크립팅을 위한 필수 언어로 확고히 자리 잡았습니다.

JavaScript는 웹사이트에서 많은 일을 할 수 있습니다. 예를 들어 -

• 대화형 UI 요소 - JavaScript를 사용하면 드롭다운 메뉴, 슬라이더, 모달 등과 같은 복잡한 UI 상호 작용을 만들 수 있습니다.
• 동적 스타일 - JavaScript를 사용하여 애니메이션 효과를 위해 CSS 스타일을 동적으로 업데이트하거나 활성 상태를 강조 표시합니다.
• 비동기 통신 - JavaScript는 동적 콘텐츠 업데이트에 대한 AJAX 요청을 통해 서버와의 비동기 통신을 허용합니다.
• 양식 유효성 검사 - 서버에 제출하기 전에 양식 데이터와 입력의 유효성을 검사합니다. 실시간 검증 메시지를 제공합니다.
• 애니메이션 및 시각 효과 - 페이지 요소에 애니메이션을 적용하고, CSS 전환을 트리거하고, 창의적인 시각 효과를 개발하여 UX를 향상합니다.
• 게임 개발 - JavaScript는 일반적으로 대화형 브라우저 기반 게임을 개발하는 데 사용됩니다.
• 웹 애플리케이션 - JavaScript는 백엔드 데이터베이스/API와의 동적 클라이언트 측 논리 및 연결을 활성화하여 전체 스택 웹 애플리케이션을 강화합니다.
• 더 나은 UX - 전반적으로 JavaScript는 효과적으로 사용될 때 사이트 상호 작용성, 미학 및 UX를 크게 향상시킬 수 있습니다.

WordPress에 JavaScript를 추가하는 방법

WordPress에 JavaScript를 추가하는 경우 다양한 대안이 있습니다.

WordPress JavaScript 플러그인을 활용하는 것이 대부분의 사용자에게 가장 쉬운 옵션이지만, 보다 실용적인 접근 방식을 원하는 경우 사용할 수 있는 수동 대안이 있습니다.

하위 테마의 function.php 파일 사용하기

WordPress 테마 및 WordPress 후크 시스템의 function.php 파일을 사용하여 WordPress에 JavaScript를 수동으로 추가할 수 있습니다.

이 접근 방식은 조금 더 까다롭습니다. 본질적으로 WordPress 후크 시스템을 사용하면 웹 사이트의 머리글이나 바닥글에 JavaScript를 포함한 모든 정보를 포함할 수 있습니다.

일부 JavaScript를 후크용 PHP 코드와 융합하여 사이트에 자동으로 삽입할 수 있습니다. 다음은 웹 사이트 헤더에 JavaScript를 포함하는 데 사용하는 코드의 그림입니다.

function wpcom_javascript() {
    ?>
    <script>
        Replace with your JavaScript
    </script>
    <?php
}
add_action('wp_head', 'wpcom_javascript');

또한 더 복잡한 PHP를 사용하여 특정 웹 사이트 페이지나 블로그 게시물에만 JavaScript를 추가하는 등 조건부 IF 문을 만들 수 있습니다.

다음은 한 페이지에만 JavaScript를 적용하도록 페이지 ID를 타겟팅하는 방법을 보여줍니다.

function wpcom_javascript() {
if (is_page ('42')) { 
    ?>
    <script>
        Replace with your JavaScript
    </script>
    <?php
   }
}
add_action('wp_head', 'wpcom_javascript');

테마를 업데이트할 때 JavaScript 스니펫이 덮어쓰이는 것을 방지하려면 테마의 function.php 파일을 사용하는 경우 WordPress 하위 테마를 사용하세요.

하위 테마의 function.php 파일을 사용하는 대신 이러한 조각을 보관할 수 있는 고유한 플러그인을 만들 수 있습니다.

하위 테마의 function.php 파일이 아닌 사용자 정의 플러그인을 사용하면 코드 조각이 테마 독립적이 됩니다. 즉, 테마를 전환하더라도 모든 JavaScript 스니펫은 계속 사용됩니다.

JavaScript WordPress 플러그인 사용

코드 조각 관리 플러그인 또는 이와 유사한 것으로 알려진 JavaScript WordPress 플러그인을 사용하는 것이 일반적으로 가장 좋고 가장 간단한 선택입니다.

특정 기능은 플러그인에 따라 다르지만 일반적인 개념은 이러한 플러그인이 WordPress 관리자에서 JavaScript 코드 조각을 추가하고 관리할 수 있는 간단한 인터페이스를 제공한다는 것입니다.

다음은 예시입니다.

WordPress 전용 JavaScript 플러그인을 사용하면 다음과 같은 몇 가지 유용한 이점이 있습니다.

• 더욱 쉬워진 스니펫 관리 - 이 플러그인을 사용하면 제목을 지정하고 태그 또는 카테고리를 사용하여 여러 JavaScript 스니펫을 구성할 수 있습니다. 이를 통해 필요할 때마다 특정 조각을 쉽게 찾고 활성화하거나 비활성화할 수 있습니다.

• 모든 테마에서 작동 - 플러그인은 테마 파일과 별도로 스니펫을 저장합니다. 따라서 완전히 다른 테마로 변경하더라도 모든 JavaScript 스니펫은 계속 작동합니다. Google Analytics 추적 코드 추가와 같이 테마 독립적인 JavaScript가 있는 경우 유용합니다.

• 조건부 로드 - 플러그인을 사용하면 스니펫을 로드할 위치와 시기에 대한 규칙을 설정할 수 있습니다. 예를 들어, 특정 페이지, 일부 사용자, 모바일과 데스크톱 등에서만 스니펫이 로드되도록 할 수 있습니다.

전반적으로 이러한 JavaScript 플러그인을 사용하면 WordPress에 유연한 방식으로 JavaScript를 추가하는 것이 매우 간단해집니다. 테마 파일을 수정할 필요가 없으며 사용자 정의 JavaScript가 사이트에서 실행되는 시기와 장소를 세밀하게 제어할 수 있습니다.

웹사이트에 JS를 추가하기 위한 상위 3개 WordPress 플러그인

WordPress 플러그인을 사용하여 웹 사이트에 사용자 정의 JS를 추가하는 가장 쉬운 방법은 다음과 같습니다. 이 중 무엇이든 자유롭게 사용해 보세요.

Elementor에 JS 코드를 추가하는 방법

특정 Elementor 페이지에 사용자 정의 JS를 추가하려면 다음을 수행하십시오.

1. Elementor에서 대상 페이지를 편집합니다.
2. 페이지 설정 > 고급 > 사용자 정의 CSS/JS를 엽니다.
3. JS 코드를 Custom JS 섹션에 붙여넣습니다.

페이지별 JS의 경우 Elementor 페이지 설정에서 사용자 정의 JS 상자를 사용하세요. 이렇게 하면 사용자 정의 JavaScript가 깔끔하게 정리됩니다.

마무리

WordPress에 사용자 정의 JavaScript를 추가하는 것은 골치 아픈 일이 아닙니다. 올바른 스니펫 플러그인을 사용하면 JavaScript를 WordPress 사이트에 원활하게 통합하여 향상된 상호작용성과 사용자 경험을 제공할 수 있습니다. 우리가 다룬 최고의 플러그인을 사용하면 사이트 전체에 JS를 쉽게 추가하거나 특정 위치를 대상으로 지정할 수 있을 뿐만 아니라 스크립트가 로드되는 시기와 위치를 정확하게 구성, 관리 및 제어할 수 있는 도구를 제공합니다.