반응형
상위 테마 css 뒤에 워드프레스 하위 테마 css를 로드하는 방법
내 워드프레스 아이 테마 css 파일은 메인 테마 css보다 먼저 로드되었습니다.내 아이 테마 css 기능.php 파일은 다음과 같습니다.
function my_theme_enqueue_styles(){
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/../enfold-child/plugins/bootstrap/css/bootstrap.min.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
부모 테마 css 다음에 아이 테마 css를 로드하고 싶습니다.
priority를 추가합니다.여기서는 99가 높기 때문에 마지막이 될 가능성이 높지만 일부 플러그인은 드물게 css를 높은 우선순위로 추가할 수 있습니다.
function my_theme_enqueue_styles(){
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/../enfold-child/plugins/bootstrap/css/bootstrap.min.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 99 );
참조: https://developer.wordpress.org/reference/functions/add_action/
문서(https://codex.wordpress.org/Child_Themes),에 따르면 부모 스타일을 자식 스타일의 종속성으로 설정하고 기능에 로드합니다.php:
<?php
function my_theme_enqueue_styles() {
// You'll find this somewhere in the parent theme in a wp_enqueue_style('parent-style').
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
단, 일부 테마는 여러 개의 스타일시트를 사용합니다.이 경우 다음과 같이 모든 항목을 함수에 추가할 수 있습니다.
$parent_style = 'parent-style';
$parent_style2 = 'other-parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( $parent_style2, get_template_directory_uri() . '/inc/css/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style, $parent_style2 ),
wp_get_theme()->get('Version')
);
CHILD THEME get_stylesheet_directory_uri()의 경우
부모 테마 get_template_directory_uri()의 경우
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'owl-carousel-style', get_stylesheet_directory_uri() . '/assets/owlcarousel/assets/owl.carousel.min.css' );
wp_enqueue_style( 'owl-theme-style', get_stylesheet_directory_uri() . '/assets/owlcarousel/assets/owl.theme.default.min.css' );
wp_enqueue_script( 'owl-carousel-js', get_stylesheet_directory_uri() . '/assets/owlcarousel/owl.carousel.min.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
언급URL : https://stackoverflow.com/questions/41938369/how-to-load-wordpress-child-theme-css-after-parent-theme-css
반응형
'programing' 카테고리의 다른 글
| WordPress에 정적 페이지를 추가하려면 어떻게 해야 합니까? (0) | 2023.03.10 |
|---|---|
| AngularJS에서 필터 내의 파라미터를 사용하는 방법 (0) | 2023.03.10 |
| 여러 모델 서브클래스의 Backbone.js 컬렉션 (0) | 2023.03.10 |
| React/J에서 물결 괄호를 일반 텍스트로 렌더링SX (0) | 2023.03.10 |
| MUI 스타일을 사용하여 부모 위로 이동할 때 자녀의 스타일을 어떻게 변경합니까? (0) | 2023.03.10 |