programing

wordpress 페이지 템플릿에 사용자 지정 css 추가

javajsp 2023. 2. 28. 23:14

wordpress 페이지 템플릿에 사용자 지정 css 추가


안녕하세요, 페이지 템플릿용 커스텀 css 파일 작성에 도움이 필요합니다.이 문제에 대해서는 많은 토픽이 있습니다만, 각 스레드를 읽을 때마다 더 많은 정보와 혼란이 발생합니다.

저는 24번째 테마의 아이 테마를 만들고 페이지 템플릿을 추가했습니다.이 템플릿에 커스텀 css를 추가하려면 어떻게 해야 하나요?나는 이 코드가 어린이 테마의 기능에 추가된 것을 발견했다.php는 css에서 적절한 클래스를 선택합니다.하지만 이 수업을 어떻게, 어디에 둘까요?헤더에 있는 본문 태그에 클래스를 추가해야 한다고 읽었습니다.php 하지만 잘 모르겠어요.이 길이 맞습니까?

if (is_page_template( 'mytemplate.php' )){
$classes[] = 'myclass';
}

를 사용합니다.is_page_template()CSS를 선택적으로 로드합니다.

아래 기능에서는 다음 기능에 접속합니다.wp_enqueue_scripts커스텀 페이지템플릿에 있는지 확인하고 추가 CSS를 로드할지 여부를 판단합니다.

결과가 참일 경우 다음 제목의 CSS 파일을 로드합니다.page-template.css에서css/폴더를 선택합니다.경로를 업데이트하여 올바른 파일을 로드합니다.

function wpse_enqueue_page_template_styles() {
    if ( is_page_template( 'mytemplate.php' ) ) {
        wp_enqueue_style( 'page-template', get_stylesheet_directory_uri() . '/css/page-template.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse_enqueue_page_template_styles' );

이 솔루션은 어떻습니까?

<?php 
function mypage_head() {
    echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('stylesheet_directory').'/includes/mypage.css">'."\n";
}
add_action('wp_head', 'mypage_head');
?>
<?php get_header(); ?>

사용할 수 있습니다.wp_head훅을 사용하여 커스텀템플릿에 커스텀 아이템(Javascript, CSS 등)을 추가합니다.모든 변경 내용이 템플릿 파일에 포함되므로 다른 곳에서 체크인할 필요가 없기 때문에 이 방법이 더 좋다고 생각합니다.

이 솔루션은 http://scratch99.com/wordpress/development/custom-page-template-external-css-file/ 에서 입수할 수 있습니다.

이것은 어떠세요?

 function my_custom_styles() {

    wp_register_style( 'custom-styles', get_template_directory_uri().'/lib/styles/custom-styles.css' ) );

    if ( is_home ) {

    wp_enqueue_style( 'custom-styles' );
    }
 }

 add_action( 'wp_enqueue_scripts', 'my_custom_styles' );

여기서 세 가지 답을 모두 테스트했는데 모두 잘 작동합니다.어떤 것이 더 빠르고 더 나은지 아는 사람 있나요?

언급URL : https://stackoverflow.com/questions/28249774/add-custom-css-to-a-page-template-in-wordpress