워드프레스에서 자바스크립트 다루기

워드프레스 사이트에서도 자바스크립트(JavaScript)를 사용할 일들이 많이 있습니다. 예를 들면, 사이트에 간단하게 애니메이션 효과를 추가하거나 jQuery로 무언가 사이트에 인터랙티브한 기능을 주려 할 때 등이죠. 이럴 때 어떻게 하세요? 물론 자바스크립트 사용법은 정해져 있고, 워드프레스라고 해서 그 방법이 완전히 다른 것은 아니지만, 워드프레스에는 워드프레스만의 자바스크립트 관리 방법이 존재하는 것도 사실이죠. 여기서는 플러그인을 사용하지 않고, 테마의 템플릿 파일을 직접 건드리지 않으면서도 간단하게 워드프레스에 자바스크립트를 추가하는 방법을 소개합니다. 다양한 자바스크립트 라이브러리들이 존재하지만 여기서는 가장 흔히 사용되는 jQuery 라이브러리를 기준으로 잡겠습니다.

내 사이트에 jQuery가 설치되어 있나요?

많은 웹사이트들이 자바스크립트 위에 jQuery를 사용합니다. 그래서 워드프레스에서는 코어(core) 차원에서 이미 jQuery를 사용하기 쉽도록 내장(builtin) 라이브러리로 등록해 두었습니다. 또한 많은 워드프레스 테마들도 jQuery를 이미 포함하고 있죠. 따라서 내 테마 역시 이미 jQuery가 설치되어 있을 가능성이 높습니다. 내 테마에서 이미 jQuery가 설치되었는지는 어떻게 확인할까요? 여러 방법이 있지만, 간단한 방법 중 하나는 웹브라우저의 콘솔(console) 창을 열어 jQury를 호출하는 것입니다. ‘jQuery’를 입력했을 때 다음과 같이 출력되면 이미 jQuery가 설치되어 있는 거죠.
만약 설치가 안 되었다면요? 유감스럽지만 약간의 작업이 필요합니다. 테마 파일 속 functions.php 파일을 찾아 다음과 같이 수정합니다. 또는 관리자 대시보드의 테마 편집기를 열어 테마 파일 목록에서 ‘테마함수(functions.php)’ 파일을 찾아 하단에 다음과 같이 코드를 추가해도 됩니다.

주의: 이렇게 functions.php 파일을 테마 편집기에서 직접 건드리는 방법은 일반적으로 권장되지 않는 방법입니다. 주의해서 사용하세요!!

add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts() {
    wp_enqueue_script( 'jquery' );
}
이제 jQuery가 보일 것입니다. 앞서도 잠깐 설명했듯 jQuery는 워드프레스 코어 속에 이미 내장되어 있습니다. 따라서 별도의 등록 절차 없이 간단하게 wp_enqueue_script( 'jquery' ); 명령만 주어 테마에서 바로 사용할 수 있습니다.

jQuery 플러그인 추가하기

jQuery는 설치했고, jQuery 플러그인을 추가해야 하는 경우라면요? 만약 그 플러그인이 워드프레스 코어에 이미 등록된 플러그인이라면 앞서와 마찬가지로 그냥 wp_enqueue_script로 포함시켜 쓰면 됩니다. 하지만 등록되어 있는 플러그인이 아닌 경우라면 직접 처리해 줘야 합니다. 테마 파일 속 해당 스크립트를 업로드하거나 하는 방법으로 워드프레스에 알려줘야 합니다. 여기서는 텍스트에 타이핑(typewriter) 효과를 주는 jQuery 플러그인인 jquerytypewriter를 한번 사용해 보겠습니다. (그냥 임의로 선택한 플러그인으로 선택에 별다른 의미는 없습니다. 사실 간단한 타이핑 효과는 굳이 자바스크립트 없이 CSS 만으로도 구현 가능하긴 합니다) 알다시피 웹사이트에 자바스크립트를 설치하는 방법은 여러 가지가 있습니다. 직접 로컬 폴더에 두고 참조하는 방법도 있고 CDN으로 설치할 수도 있고 모듈(module) 방식으로 설치할 수도 있습니다. (그때 그때 다르죠!) 이 플러그인은 CDN에도 없고 따로 모듈 방식을 지원하는 것도 아니기에 직접 로컬 폴더에 다운로드 받아 설치하도록 하겠습니다. 플러그인 파일인 jquerytypewriter.js 파일을 다운로드 받아 테마 파일 속 적당한 곳에 둡니다. 여기서는 테마 파일 속의 js/ 폴더 에 두는 것으로 하겠습니다. 위치는 테마 파일 내라면 어디든 상관 없습니다. 그런 다음 앞서 jQuery를 추가할 때 설명한 방법과 마찬가지 방법으로 테마 속 functions.php 파일을 열어 아래 코드를 추가합니다. (코드에 대한 자세한 설명은 생략합니다. 글 마지막에 소개한 참고자료를 참조하세요!)
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts() {
    wp_enqueue_script( 'jquerytypewriter', get_stylesheet_directory_uri() . '/js/jquerytypewriter.js', array('jquery'), '', true );
}
만약 이렇게 직접 코드를 추가하는 작업이 부담스러우면 WP Enqueue 같은 플러그인을 이용하는 것도 좋은 방법입니다. WP Enqueue 플러그인은 위에서 설명한 자바스크립트 파일의 enqueue 처리를 자동으로 해주는 플러그인으로, 사용법은 아래 문서에 잘 소개되어 있으니 참고하세요.
워드프레스 테마에 Bootstrap 적용하기

자바스크립트 코드 추가하기

jQuery가 등록된 것을 확인했고 필요한 플러그인도 추가했다면 이제 할 일은 나만의 자바스크립트 코드를 추가하는 일이겠죠. 여기서는 간단하게 “안녕하세요, 여러분!” 텍스트를 화면에 표시하는 간단한 자바스크립트 코드를 실행하겠습니다. 다만 앞서 설치한 jquerytypewriter 플러그인도 같이 사용해 보도록 하죠. 사용할 자바스크립트 코드는 아래와 같습니다. 페이지 속 typewriter 클래스(class)로 지정된 문서 객체(DOM)를 찾아 타이핑 효과를 적용합니다.
jQuery(function($) {
    // ready!
    $('.typewriter').typewrite();
});
이 코드를 어디에 어떻게 넣으면 좋을까요?

포스트/페이지 속에 직접 삽입하기

특정 페이지나 포스트에서만 필요로 하는 코드라면 굳이 번거롭게 할 것 없이 바로 포스트나 페이지 속에 입력하면 되겠죠? 예를 들어 랜딩페이지(landing page)를 하나 만드는데 그 페이지 속에서만 필요한 자바스크립트 코드라면 페이지 편집기 속에서 직접 다음과 같이 입력하면 될 것입니다. (주의: 편집기의 텍스트 모드에서 입력하세요!)
이렇게 스크립트를 직접 포스트 속에 넣는 방식이 마음에 들지 않거나(사실 별로 좋은 방식은 아니죠^^. 워드프레스 코덱 문서에서는 아주 간단한 스크립트만 사용하라고 하고 있구요)
사실 이렇게 직접 편집기에서 자바스크립트를 입력하는 방식은 좋은 방법이 아닙니다. 웬만하면 사용하지 마세요!!
비주얼 편집기 모드로 인해 잘 작동하지 않는 분들은 플러그인을 이용하면 간단합니다. 포스트나 페이지 단위로 스크립트를 포함시킬 수 있도록 해주는 Scripts n Styles 같은 플러그인을 사용하거나 숏코드(shortcode) 등으로 처리할 수 있도록 해주는 플러그인들이 많이 있습니다. 예를 들면 다음과 같은:
  • Shortcoder 스크립트를 숏코드로 만들어 숏코드를 편집기에 추가
  • Raw Html 스크립트를 raw 숏코드로 감싸 워드프레스의 자동 포매팅을 방지
  • Code Embed 커스텀 필드를 이용한 코드 입력 방식
스크립트가 적용된 결과는 아래와 같습니다.
안녕하세요, 여러분!

사이트 전체에 적용하기

만약 특정 페이지나 포스트가 아닌, 웹사이트 전체에 걸쳐 적용하고 싶은 경우라면요? 그럴 때는 functions.php 파일을 열어 다음과 같이 코드를 추가해 주면 됩니다. 워드프레스는 헤더 영역이나 푸터 영역에 스크립트를 추가할 수 있도록 wp_headwp_footer 훅(hook)을 각각 제공하기 때문에 이 훅을 활용하면 간단하게 굳이 별도 플러그인 없이도 간단하게 해결 됩니다.
add_action( 'wp_footer', function() { ?>
    <script>
        jQuery(function($) {
          // ready!
          $('.typewriter').typewrite();
        });
    </script>
<?php } );
물론 이 작업이 번거롭거나 부담스럽다면 플러그인을 사용하면 됩니다. 예를 들면 Insert Headers and Footers 같은 플러그인이 바로 이 작업을 관리자 대시보드에서 쉽게 처리할 수 있도록 해주는 플러그인입니다. 이 플러그인의 자세한 사용법은 아래 문서를 참고하세요.
WordPress 사이트에서 메타 태그 관리하기

마무리 & 참고자료

여기서는 워드프레스에서 기본적으로 제공하는 자바스크립트 관련 API 함수들을 이용한 방법을 소개했지만, 워드프레스에서 자바스크립트를 다루는 방법은 이 밖에도 다양한 방법들이 많이 있습니다. 간단하게 <script> 태그를 직접 테마 속에 집어 넣는 방법에서 부터 워드프레스의 커스텀 필드(Custom Fields)를 활용하는 방법까지. 자바스크립트를 적용하는 상황도 각양 각색이고 또 사용할 자바스크립트 파일이나 라이브러리도 제각각이라 일률적으로 말하긴 어렵지만 원리는 똑같습니다. 그러니 원리만 익히고 나면 그때 그때 가장 적당한 방법을 찾아 적용하면 됩니다. 워드프레스에서 자바스크립트와 jQuery를 사용하는 방법들을 자세하게 다룬 아래 문서들도 참고하면 좋겠습니다. 🙂

0 thoughts on “워드프레스에서 자바스크립트 다루기”