본문 바로가기

워드프레스 기본 style.css load하기

web/wordpress by 코나인 2023. 5. 17.
반응형

워드프레스 테마의 기본 style.css load하는 방법

 

 

설정

wp_enqueue_style 함수를 wp_enqueue_scripts 액션 태그에 등록한다.

파라미터

'account-style' : id값에 사용, 접미사(-css) 추가됨, 아래 이미지 참조

get_stylesheet_uri() : 테마의 기본 스타일 시트 주소

 

전체 소스

theme/functions.php

add_action('wp_enqueue_scripts', function() {
  wp_enqueue_style('account-style', get_stylesheet_uri());
});

 

 

참고로 wp_enqueue_scripts 액션 태그는 js도 로드할 수 있다.

wp_enqueue_scripts는 아래와 같이 css(wp_enqueue_style)나

script(wp_enqueue_script)를 프론트엔드에서 표시할 때 사용한다.

 

theme/functions.php

function themeslug_enqueue_style() {
    // id, file, version or false
    wp_enqueue_style( 'my-theme', 'style.css', false );
}

function themeslug_enqueue_script() {
    // id, file, version or false
    wp_enqueue_script( 'my-js', 'filename.js', false );
}

add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );

 

 

wp_enqueue_scripts는 FE에 표시할 js/css를 큐에 넣을 때 사용한다. 
출처 : https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/

 

WordPress Developer Resources | Official WordPress Developer Resources

Official WordPress developer resources including a code reference, handbooks (for APIs, plugin and theme development, block editor), and more.

developer.wordpress.org

 

반응형

댓글