워드프레스에 js, css 올바르게 삽입하는 방법 – 워드프레스 강좌

이번 시간에는 워드프레스에서 자바스크립트(JS)와 CSS 파일을 올바르게 연결하는 방법에 대해 배워보겠습니다. 워드프레스에서 스크립트와 스타일시트를 등록하고 로드하는 방법을 알아보겠습니다.

워드프레스에 스크립트와 스타일시트를 등록하는 이유

기존의 HTML 파일에서 외부 스타일시트와 자바스크립트를 연결하는 방법도 있지만, 워드프레스에서는 특정 페이지나 특정 조건을 지정하여 스크립트를 로드할 수 있는 장점이 있습니다. 이를 위해 wp_enqueue_script와 wp_enqueue_style 함수를 사용합니다.

워드프레스에 스크립트 등록과 로드

function designbase_scripts_method() {
    // jQuery
    wp_enqueue_script('jquery-js', get_template_directory_uri() . '/assets/js/jquery-3.6.0.min.js', array('jquery'));

    // Custom JS
    wp_enqueue_script('custom-js', get_template_directory_uri() . '/assets/js/custom.min.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'designbase_scripts_method');

위 코드는 jquery-3.6.0.min.js와 custom.min.js 스크립트를 로드합니다.

wp_enqueue_script 함수 설명

wp_enqueue_script 함수는 스크립트를 등록하고 대기열에 추가합니다.
add_action('wp_enqueue_scripts', 'designbase_scripts_method')는 designbase_scripts_method 함수를 워드프레스의 wp_enqueue_scripts 액션에 연결합니다.

파라미터 설명

• $handle (string) (필수): 스크립트 이름.
• $src (string|bool) (옵션): 워드프레스 루트 디렉터리로부터 스크립트의 경로.
• $deps (array) (옵션): 이 스크립트가 의존하는 등록된 핸들의 array.
• $ver (string|bool) (옵션): 스크립트 버전 번호.
• $in_footer (bool) (옵션): 스크립트가 </head> 앞에 위치할지 </body> 앞에 위치할지 지정.

워드프레스에 메인 스타일시트 적용 방법

function designbase_styles_method() {
    wp_enqueue_style('designbase-stylesheet', get_template_directory_uri() . '/style.min.css');
}
add_action('wp_enqueue_scripts', 'designbase_scripts_method');

위 코드는 style.min.css 파일을 로드합니다.

특정 페이지에서 스크립트 로드

if 문을 사용하여 특정 페이지에서만 스크립트를 로드할 수 있습니다. 아래 코드는 홈 페이지와 “about” 페이지에서만 스크립트를 로드합니다.

function designbase_scripts_method() {
    if (is_front_page()) {
        wp_enqueue_script('page-home-js', get_template_directory_uri() . '/assets/js/page-home.min.js');
    }
    if (is_page('about')) {
        wp_enqueue_script('page-about-js', get_template_directory_uri() . '/assets/js/page-about.min.js');
    }
}
add_action('wp_enqueue_scripts', 'designbase_scripts_method');

defer 속성 사용

defer 속성은 페이지가 모두 로드된 후에 스크립트를 실행하도록 합니다.

// js 불러올때 defer 옵션 넣기
function defer_parsing_of_js($url) {
    if (is_user_logged_in()) return $url; // don't break WP Admin
    if (FALSE === strpos($url, '.js')) return $url;
    if (strpos($url, 'jquery.js')) return $url;
    return str_replace(' src', ' defer src', $url);
}
add_filter('script_loader_tag', 'defer_parsing_of_js', 10);

위 코드는 모든 JS 파일에 defer 속성을 추가합니다. 관리자 페이지와 jquery.js 파일은 제외합니다.

defer 속성 설명

<script> 태그의 defer 속성은 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행됨을 명시합니다.

<script src="/examples/scripts/script_src.js" defer></script>

이제 워드프레스에서 스크립트와 스타일시트를 올바르게 등록하고 로드하는 방법을 배웠습니다. 이를 통해 웹사이트의 성능을 최적화하고 유지 보수를 용이하게 할 수 있습니다.