programing

상위 테마 css 뒤에 워드프레스 하위 테마 css를 로드하는 방법

golfzon 2023. 3. 10. 23:02
반응형

상위 테마 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

반응형