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
'programing' 카테고리의 다른 글
| Wordpress에서 커스텀 포스트 유형의 기본 관리 정렬 순서를 커스텀 열로 설정하려면 어떻게 해야 합니까? (0) | 2023.02.28 |
|---|---|
| 잭슨 매퍼 사용에 대한 올바른 종속성 집합 (0) | 2023.02.28 |
| 요청한 URL /about을 이 서버에서 찾을 수 없습니다. (0) | 2023.02.28 |
| 재료.UI 사용자 지정 호버 스타일 (0) | 2023.02.28 |
| 각도에서JS와 플럭스 연결 - 반응 방식 (0) | 2023.02.23 |