WordPress 페이지에 JavaScript를 추가하는 방법 (+ 디버깅 팁)

게시 됨: 2025-06-20

WordPress 페이지에 JavaScript를 추가하고 싶지만 잘못하고 있다고 생각하거나 어디서부터 시작 해야할지 모르겠습니다. 아니면 이미 그렇게했으며 문제 해결 방법을 모르는 오류 메시지 및/또는 성능 문제를보고 있습니까?

어느 쪽이든, 당신은 올바른 장소에 있습니다.

이 게시물은 JavaScript와 WordPress의 모든 것에 대한 첫 줄, 전액 교육이 될 것입니다. 결국, WordPress에서 JavaScript를 사용하는 것이 좋은 아이디어, 페이지에 추가하는 방법, 제대로 작동하지 않거나 사이트를 늦추지 않을 때 수행해야 할 일에 필요한 모든 것을 알 수 있습니다.

tl; dr

전체 게시물을 읽기에는 너무 바빠서 빠른 요약을 원하십니까? 좋아요,하지만 당신이기 때문입니다.

WordPress 페이지에 JavaScript를 추가하면 사이트를보다 대화식으로 만들 수 있으며 많은 타사 도구와 통합 할 수 있습니다. 동시에 사이트를 깨지 않도록 신중한 고려가 필요합니다.

신뢰할 수있는 소스에서 JavaScript를 사용하고 웹 사이트를 백업하고 자식 테마를 사용하여 스테이징 또는 개발 환경의 변경 사항을 먼저 테스트하는 것과 같은 안전 예방 조치를 취하십시오. 또한 사이트에 추가 한 코드의 성능 영향을 주시하십시오.

WordPress Hooks, Functions.php , 별도의 파일, WordPress 편집기 또는 플러그인을 통해 JavaScript를 사이트에 추가하는 방법에는 여러 가지가 있습니다.

브라우저 개발 도구, 플러그인 및 테마 충돌 조사 및 WordPress 디버그 모드를 통해 문제를 해결합니다.

스크립트를 결합, 미용, 연기 또는 지연시켜 JavaScript 성능을 향상시킵니다. WP 로켓과 같은 플러그인을 사용하여 프로세스를 자동화 할 수도 있습니다.

WordPress 페이지에 JavaScript를 추가하는 이유는 무엇입니까?

JavaScript는 종종 JS에 약칭하는 인기있는 프로그래밍 언어입니다. 웹 페이지를 만드는 데 사용되는 세 가지 주요 기술 중 하나입니다. 다른 두 개는 HTML로, 페이지 구조 및 컨텐츠와 스타일링을 담당하는 CSS를 정의합니다.

JavaScript는 클라이언트 측 언어이므로 서버가 아닌 브라우저에서 실행됩니다. 이 때문에 페이지가로드를 마친 후에도 기존 CSS 및 HTML을 수정하고 업데이트 할 수 있습니다.

그렇기 때문에 주요 용도 중 하나는 웹 페이지를보다 대화식으로 만드는 것입니다. 예를 들어, JavaScript는 종종 다음과 같은 페이지 요소에 전원을 공급합니다.

  • 슬라이드 인 메뉴
  • 팝업
  • 애니메이션

WordPress 블록 편집기는 주로 JavaScript로 작성됩니다.

JavaScript 기반 WordPress 블록 편집기

상호 작용 외에도 JavaScript는 웹 분석 용 스크립트 추적과 같은 타사 서비스를 귀하의 사이트에 통합하는 일반적인 방법입니다. 다른 예제는 다음과 같습니다.

  • 라이브 채팅
  • 이메일 옵트 인 및 연락처 양식
  • 내장 된 비디오
  • 대화식지도
  • 소셜 미디어 피드

중요한 고려 사항

잘못 완료하면 WordPress 페이지에 JavaScript를 추가하면 오류와 문제가 발생할 수 있습니다. 처음부터 예방 조치를 취하면 나중에 시간과 좌절감을 줄 수 있습니다.

  • 신뢰할 수있는 소스의 JavaScript 만 사용하여 사이트를 안전하고 안정적으로 유지하십시오.
  • 문제가 발생할 경우를 변경하기 전에 웹 사이트 파일 및 데이터베이스를 완전히 백업하십시오.
  • 테마 파일에 JavaScript를 직접 추가 할 때는 항상 하위 테마를 사용하십시오. 기본 테마를 수정하면 변경 사항을 업데이트 할 때 변경 사항을 잃게됩니다.
  • 스테이징 또는 개발 환경의 변경 사항을 실시간 사이트에 적용하기 전에 테스트합니다.
  • JavaScript는 WordPress 페이지에 추가 코드를 추가하여 속도를 늦출 수 있습니다. 사이트에 새로운 기능을 도입 할 때 성능을 추적하십시오.

WordPress의 페이지에 JavaScript를 추가하는 6 가지 방법

이론으로 충분합니다. 아래에서는 WordPress에 JavaScript를 추가하는 6 가지 방법을 보여줍니다.

1. WordPress 후크 및 기능을 사용하십시오

후크는 WordPress 로딩 프로세스 내부에 배치 된 코드 조각으로, 특정 시간 또는 위치에서 실행되도록 사용자 정의 코드 (소위 "함수")를 첨부 할 수 있습니다.

예를 들어, wp_head ()는 사이트 상단의 <head> 섹션에서 실행됩니다. WordPress 페이지에 JavaScript를 추가하는 데 사용하려면 (자식) 테마의 functions.php 파일에서 다음과 같이해야합니다.

 function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

"JavaScript 코드를 여기에 배치하십시오"라는 말에 JavaScript 코드를 입력하십시오. "add_custom_script"에서 함수 이름을보다 설명적인 것으로 변경할 수도 있습니다.

이 방법은 간단한 분석 추적 코드 또는 기본 대화 형 요소와 같이 매우 명확하게 정의 된 목적을 가진 작은 스크립트에 적합합니다. 또한 바닥 글에 JavaScript를로드하는 데 작동하며 페이지 성능을 향상시키는 인기있는 솔루션입니다. wp_head () 대신 wp_footer ()를 사용하기 만하면됩니다.

페이지 헤드와 바닥 글은 일반적으로 웹 사이트의 모든 곳에 나타나기 때문에 스크립트를로드하는 인기 위치입니다. 따라서 WordPress 사이트의 모든 페이지에 JavaScript를 추가하는 좋은 방법입니다.

특정 페이지에 JavaScript 만로드하려면이 메소드를 조건부 명령문과 결합 할 수 있습니다.

 function add_custom_script() { if (is_page(123)) { ?> <script> // Place your JavaScript code here </script> <?php } } add_action('wp_head', 'add_custom_script');

이것을 단일 페이지로 제한하는 부분은 is_page (123)입니다. "123"은 페이지 ID 이며이 코드를 사용하려면 페이지 ID로 업데이트해야합니다. WordPress 편집기에서 페이지를 열면 브라우저 바에 나타납니다. IS_PAGE ()를 사용하여 이름 또는 URL 슬러그로 페이지를 대상으로 할 수도 있습니다.

브라우저 바의 WordPress 페이지 ID
블로그 게시물의 경우 is_single (), 블로그 페이지의 is_home (), 아카이브 페이지의 is_archive () 및 카테고리 아카이브의 경우 is_category ()와 같은 다른 조건부 태그가 많이 있습니다.

2. 별도의 파일로 JavaScript를로드하십시오

또 다른 옵션은 JavaScript를 자체 파일에 넣는 것입니다. 이것은 특히 큰 스크립트의 경우 좋은 아이디어이지만 일반적으로 WP_Register_Script () 및 wp_enqueue_script () 함수로 파일을로드 할 수 있기 때문에 일반적으로 의미가 있습니다.

이는 충돌을 피하고 스크립트를 올바른 순서로로드하고 종속성을 관리하는 데 도움이되기 때문에 선호하는 방법입니다. 다음은 다음과 같습니다.

 function enqueue_custom_script() { wp_register_script( 'my-custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0.0', true ); wp_enqueue_script('my-custom-script'); } add_action('wp_enqueue_scripts', 'enqueue_custom_script');

이 예에서는 스크립트가 테마 디렉토리에 배치되며 Get_template_directory_uri ()로 대상으로합니다 (하위 테마의 경우 get_stylesheet_directory_uri ()를 대신 사용). 배열 ( 'jQuery') 은이 스크립트가 jQuery에 의존하고 그 후에로드해야 함을 나타냅니다. '1.0.0'은 버전 번호이며 'True'는 WordPress가 바닥 글에 스크립트를로드해야한다는 것을 의미합니다.

이것은 또한 작동하며 코드 추적과 같이 타사 JavaScript를로드하는 올바른 방법입니다. 사이트에 사용하기 전에 코드를 사용 케이스로 업데이트하십시오.

3. 테마 파일에 코드를 포함시킵니다

후크는 모든 JS 스크립트를 단일 장소에서 que 수있는 좋은 방법이지만 테마에로드하는 유일한 방법은 아닙니다.

wp_head ()를 사용하여 헤드 섹션에 무언가를로드하는 대신 스크립트 나 테마 파일에 직접 링크를 헤더 테마 파일에 게시하여 동일하게 달성 할 수 있습니다.

클래식 테마에서는 일반적으로 header.php 입니다. 테마에서 찾아서 사본을 만들어 자녀 테마에 배치 한 다음 <head> 섹션의 어딘가에 직접 스크립트를 포함시킵니다.

특정 페이지에만로드하려면 이전과 같이 조건부 명령문을 사용할 수 있습니다. 또는 템플릿 계층 구조 덕분에 해당 페이지에 대한 사용자 정의 파일 (예 : page-contact.php) 을 만들 수도 있습니다.

WordPress 블록 테마는 더 이상 이러한 테마 파일을 사용하지 않습니다. 테마가 블록 테마 인 경우 여기에 언급 된 다른 방법 중 하나를 선택하는 것이 좋습니다.

4. 사용자 정의 플러그인을 만듭니다

테마 파일을 사용하여 WordPress 페이지에 JavaScript를 추가하는 문제는 코드가 테마에 따라 다르다는 것입니다. 테마를 전환하면 JavaScript도 사라집니다.

사용자 정의 플러그인을 사용하여 피할 수 있습니다. 이로 인해 코드는 테마 독립적이며 WordPress 플러그인 메뉴에서 활성화 및 비활성화 할 수 있습니다.

WordPress 페이지에 JavaScript를 추가 할 간단한 플러그인의 마크 업은 다음과 같습니다.

 <?php /* Plugin Name: Custom JavaScript Loader Plugin URI: https://yourwebsite.com Description: A simple plugin to add custom JavaScript to WordPress pages. Author: Your Name Author URI: https://yourwebsite.com Version: 1.0 */ function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

이 코드를 PHP 파일에 넣고 WordPress 플러그인 메뉴에 표시되므로 플러그인 이름 , 플러그인 URI , Description , Author 및 URI를 자신의 정보로 조정하십시오.

파일의 의미가 의미있는 것, 예를 들어 커스텀 트래킹 코드 -plugin.php의 이름을 지은 다음 WordPress 설치의 WP-Content/플러그인 내부의 동일한 이름의 디렉토리에 업로드하십시오. 그런 다음 플러그인 메뉴에 나타나야합니다.

5. WordPress 편집기에 JavaScript를 추가하십시오

이것이 가장 권장되는 방법은 아니지만 WordPress 편집기를 사용하여 페이지에 JavaScript를 직접 추가 할 수도 있습니다. 이렇게하려면 새 블록을 추가하고 (플러스 버튼을 클릭하거나 전방 슬래시를 사용하십시오) 사용자 정의 HTML 블록을 선택하십시오.

자바 스크립트 코드를 페이지에 똑바로로드하도록 삽입하십시오.

오프닝 <cript> 및 닫는 </script> 태그를 사용하고 편집기의 변경 사항을 저장하여 적용되도록하십시오.

코드 탭을 사용하여 클래식 편집기에 JavaScript를 추가 할 수도 있습니다.

6. 코드 스 니펫 플러그인을 사용하십시오

사이트에 JavaScript를 추가하는 플러그인 솔루션이 없으면 WordPress가 아닙니다. 실제로 다음을 포함한 여러 가지가 있습니다.

  • wpcode
  • 헤더 바닥 글 코드 관리자
  • 간단한 커스텀 CSS 및 JS
  • CSS & JavaScript Toolbox

플러그인을 사용하면 JavaScript를 더 잘 관리 할 수 ​​있습니다. 스 니펫의 이름을 지정하고 카테고리로 구성하고 선택적으로 켜고 끄고 조건부 규칙을 설정할 수 있습니다. 또한 사용자 정의 플러그인 솔루션과 마찬가지로 JavaScript가 테마와 독립적으로 만듭니다.

이 플러그인을 사용하는 것도 간단합니다. 그들은 일반적으로 자바 스크립트 스 니펫을 관리 할 수있는 사이트에 새 메뉴를 추가합니다.

새 스 니펫을 만들고 코드를 삽입 한 다음 원하는 위치를 구성하십시오.

그것은 거의 그것입니다.

WordPress에서 JavaScript 문제 문제 해결

이제 WordPress 웹 사이트 및 페이지에 JavaScript를 추가하는 방법을 알았습니다. 그러나 무언가가 예상대로 작동하지 않으면 어떨까요? 우리는이 기사의 마지막 부분에 당신이 실행할 수있는 JavaScript 문제를 식별하고 해결하는 방법에 대해 이야기 할 것입니다.

1. 브라우저 개발자 도구를 확인하십시오

JavaScript 오류를 확인하는 한 가지 방법은 브라우저의 개발자 도구를 사용하는 것입니다. 스크립트를 포함하여 기본 사이트 코드를 검사 할 수 있습니다.

웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택하여 열 수 있습니다.

또는 크롬의 브라우저 메뉴를 통해 액세스 할 수 있습니다 .

Chrome, Edge 및 Firefox에서는 Ktrl/CMD+Shift+I , Safari CMD+OPT+C에서 키보드 단축키가 있습니다.

사이트에서 개발 도구를 열고 콘솔 탭으로 이동하십시오. JavaScript로 인한 오류를 포함하여 여기에 오류가 표시됩니다.

표시하려면 페이지를 다시로드해야 할 수도 있습니다. 가장 일반적인 JavaScript 오류는 다음과 같습니다.

  • 참조 오류 : 누락되거나 정의되지 않은 변수 또는 함수를 나타냅니다.
  • TypeError : 예를 들어, 부적절한 유형의 값을 사용하려고하는 작업에 문제가 있음을 제안합니다.
  • SyntaxError : 종종 누락 된 브래킷, 세미콜론 또는 따옴표와 같은 코드의 오타 또는 잘못된 형식으로 인해 발생합니다.

스크립트, 파일 또는 함수가 오류를 일으켜 수정할 수있는 스크립트를 찾으려고합니다. 소스 탭에서 중단 점을 사용하여 JavaScript 실행을 일시 중지하고 무슨 일이 일어나고 있는지 검사 할 수 있습니다.

좋아하는 검색 엔진 또는 AI를 사용하여 찾은 오류 메시지에 대해 자세히 알아보십시오. 또한 네트워크 탭을 확인하여 스크립트가 제대로로드되는지 확인할 수도 있습니다.

2. 테마 및 플러그인 충돌을 해결하십시오

예를 들어 호환되지 않는 라이브러리 또는 중복 함수를 사용할 때 테마 및 플러그인 충돌로 인해 JavaScript 오류가 발생할 수 있습니다.

이러한 JavaScript 문제를 해결하는 방법은 다음과 같습니다.

  • 테마 및 플러그인 업데이트 : 테마 또는 플러그인 개발자는 이미 문제에 대해 알고 있으며 최신 버전에서 수정했을 수 있습니다.
  • 기본 테마로 일시적으로 전환하십시오 : 25와 같은 WordPress 기본 테마를 활성화하십시오. 문제가 사라지면 테마가 잘못 될 수 있습니다.
  • 플러그인 비활성화 : 사이트의 모든 플러그인을 끄고 문제가 다시 나타날 때를 확인하기 위해 하나씩 켜십시오. 원인이되는 플러그인을 업데이트하거나 교체하십시오.

Health Check Plugin을 사용하면 WordPress 대시 보드 ( 문제 해결 탭으로 이동)에서 위에서 언급 한 모든 것을 시뮬레이션하고 한 번의 클릭으로 되돌릴 수 있습니다.

또한 웹 사이트 상태에 대한 추가 정보도 있습니다. 라이브 사이트가 아닌 개발 또는 준비 웹 사이트에서 이러한 테스트를 수행하는 것이 좋습니다.

3. 디버그 모드를 사용하십시오

WordPress에는 사이트 문제를 발견하고 해결하는 데 도움이되는 내장 디버그 모드가 있습니다. JavaScript의 문제를 직접 표시하지는 않지만 사이트의 스크립트를 방해 할 수있는 PHP, 플러그인 및 테마 오류를보다 쉽게 ​​찾을 수 있습니다.

디버그 모드를 활성화하려면 WP-config.php 파일 (FTP 또는 호스팅 파일 관리자를 통해)을 열고 다음 줄을 추가하십시오.

 define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); define('SCRIPT_DEBUG', true);

Define ( 'script_debug', false)를 이미 찾을 수 있습니다. 파일에서. 그렇다면 단순히“참”으로 변경하십시오. 파일을 저장하고 다시 업로드하십시오.

위의 설정은 디버그 모드를 활성화하고 오류 로깅 (오류가 WP-Content/Debug.log 에 오류가 나타납니다) 및 핵심 CSS 및 JavaScript 파일의 미확인 버전을로드하여 문제를보다 쉽게 ​​추적합니다.

다시, 방문자의 눈에서 멀리 떨어진 개발 사이트에서이를 수행하십시오. 또한이 코드를 제거하여 나중에 정상으로 돌아가는 것을 잊지 마십시오.

WP 디버깅 플러그인을 사용하여 WordPress 디버그 모드를 활성화 할 수도 있습니다.

4. 주소 성능 문제

다른 코드와 마찬가지로 WordPress 페이지에 JavaScript를 추가하면 웹 사이트가 느려질 수 있습니다. 웹 사이트 속도를 높이고 "사용하지 않은 JavaScript 감소"라는 경고를받을 때 종종 알 수 있습니다.

JavaScript로 인한 성능 문제를 피하려면 다음과 같은 모범 사례를 따르십시오.

  • 필요하지 않은 스크립트를 제거하십시오 : 사이트의 JavaScript로드를 정기적으로 감사하여 실제로 모든 타사 서비스가 필요한지 확인하십시오.
  • 바닥 글에 스크립트를로드하십시오. 조기로드해야 할 때 헤드 섹션에 JavaScript 파일 만 배치하십시오.
  • 스크립트를 결합하십시오 : 여러 스크립트를 단일 파일로 결합합니다 (이를 "연결"이라고합니다). 단일 대형 파일은 종종 작은 파일보다 더 빨리로드됩니다.
  • JavaScript 파일을 최소화하십시오 : 이것은 불필요하게 코드를 실행할 수있는 가독성에 적합한 불필요한 형식 및 공백을 제거합니다.
  • JavaScript를 비동기식으로로드합니다. 즉, 브라우저가 JavaScript 파일을로드하는 동안 사이트 처리를 중단하지 않지만 백그라운드에로드하여 다운로드 한 후에 실행합니다.
  • 대규모 스크립트를 연기하십시오 : 여기에서 파일은 백그라운드에서도 다운로드되지만 나머지로드 프로세스가 완료된 후에 만 ​​실행되므로 중단되지 않습니다.
  • 지연 JavaScript 실행 : 사용자 상호 작용이있을 때까지 모든 JavaScript 파일과 인라인 스크립트의로드를 연기합니다. 이미지의 게으른로드와 같지만 JavaScript 파일의 경우입니다.

WP 로켓으로 JavaScript 성능 최적화를 단순화합니다

이 작업을 손으로 수행하는 대신 WP 로켓을 사용하여 훨씬 쉽게 구현할 수있는 옵션도 있습니다. 사이트에서 활성화되면 플러그인은 기본적으로 JavaScript를 최소화하며 파일 최적화 메뉴에서 몇 개의 상자를 확인하여 WordPress 사이트의 스크립트를 결합, 지연, 연기 및 비동기로로드 할 수 있습니다.

WP 로켓의 JavaScript 최적화 설정

필요한 경우 페이지 요소의 응답 성을 방해 할 경우 개별 스크립트, 플러그인 및 파일을 최적화하지 못하게하는 옵션이 있습니다.

그 외에도 WP Rocket은 다음과 같은 백그라운드에서 여러 가지 성능 향상을 자동으로 구현합니다.

  • 별도의 모바일 캐시를 포함한 캐싱
  • GZIP 압축
  • 사전로드 캐시 및 링크
  • 가장 큰 콘텐츠 페인트를 향상시키기 위해 임계 이미지 최적화 (게으른 하중에서의 접힘 위의 이미지를 제외하기 위해)
  • 페이지에서 높은로드 요소에 자동 게으른 렌더링

사실, 플러그인을 설치하고 활성화하면 사이트에서 성능 모범 사례의 80%를 구현하고 즉시 더 빠르게 만듭니다. 그리고 충분하지 않은 경우, 사이트 속도를 높이기 위해 활성화 할 수있는 다른 많은 기능이 있습니다.

  • CSS 배경, 비디오 및 iframes를 포함한 이미지에 대한 게으른로드
  • 외부 파일 및 글꼴을 사전로드합니다
  • 자체 호스팅 Google 글꼴
  • 데이터베이스 최적화
  • RocketCDN을 포함한 CDN에 쉽게 연결하는 옵션

WordPress 페이지에 JavaScript를 추가 할 준비가 되셨습니까?

JavaScript는 상호 작용 또는 타사 소프트웨어와의 통합을 추가하기위한 WordPress 웹 사이트에 많은 흥미로운 가능성을 제공합니다. 기술 수준과 선호도에 따라 페이지에 추가 할 수있는 방법에는 여러 가지가 있습니다.

동시에 JavaScript는 오류를 도입하고 페이지 성능에 큰 요소가 될 수 있습니다. 이런 이유로, 당신은 당신의 WordPress 페이지에주의를 기울여 JavaScript를 추가하는 것이 필수적입니다.

JavaScript와 관련된 성능 문제로 어려움을 겪고 있다면 WP Rocket은 쉽고 효과적으로 해결하는 데 도움이됩니다. 또한 사이트 속도를 높이기위한 다른 많은 기능을 제공합니다. 오늘 WP 로켓을 받고 14 일 동안 위험없이 시도하십시오!