워드프레스를 제작시 CSS를 통해 디자인을 꾸미고, Javascript를 통해 기능 추가 또는 동적인 화면을 구현할 수 있습니다. Bootstrap 또는 각종 플러그인, 라이브러리를 적용하기 위해서 필요한 파일 삽입 방법을 안내하겠습니다.

CSS 추가

style.css 파일 등록(기본)

function 테마명_style(){
      wp_enqueue_style('theme-default-style', get_stylesheet_uri()); 
}
add_action('wp_enqueue_scripts', '테마명_style');

get_stylesheet_uri() 함수 사용시 자동으로 style.css를 삽입해줍니다.

CSS 파일 등록

function 테마명_style(){
      wp_enqueue_style('theme-default-style', get_stylesheet_directory_uri().'경로'); 
}
add_action('wp_enqueue_scripts', '테마명_style');

Script 추가

jQuery 불러오기

function 테마명_script(){
   wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', '테마명_script');

워드프레스 코어 속에 jQuery가 내장되어 있으므로 wp_enqueue_script('jquery'); 명령어를 통해 간단히 제이쿼리를 불러올 수 있습니다.

Script 파일 등록

function 테마명_script(){
      wp_enqueue_script('theme-default-script', get_template_directory_uri().'경로', array()); 
}
add_action('wp_enqueue_scripts', '테마명_script');

페이지별 스크립트 불러오기 - Contional tags를 통한 분기처리

if(is_front_page()) { //프론트 페이지의 경우
        wp_enqueue_script('front-script', get_stylesheet_directory_uri() . '/js/front.js', array(), '1.0.0', true);
    }

if(is_page('about')) { //슬러그 about 페이지의 경우
        wp_enqueue_script('about-script', get_stylesheet_directory_uri() . '/js/about.js', array(), '1.0.0', true);
    }

실제 사용되는 페이지에서만 CSS와 스크립트 코드가 로드되어야 불필요한 리소스가 동작하지 않고, 페이지 속도를 최적화 시킬 수 있습니다. 리소스 컨트롤을 위해 워드프레스에서 제공하는 conditional tags를 사용할 수 있습니다.

Conditional tags

• is_home(): 메인 페이지
• is_front_page(): 프론트 페이지
• is_single(): 싱글 페이지
• is_page(): 기본 페이지, is_page('about')은 about 페이지
• is_category(): 카페고리 페이지
• is_user_logged_in(): 로그인 됨
• !is_user_logged_in(): 로그인 안됨

📚 함께 읽으면 좋을 글

워드프레스 위젯 추가하는 방법
Bootstrap 워드프레스에서 사용(css)
워드프레스 폰트 추가 방법