워드프레스에서 스타일시트 파일(style.css)과 함수 파일(functions.php)을 자식 테마(차일드 테마) 폴더에 추가하여 자식 테마를 만들 수 있습니다. 이와는 별도로 다음 단계에 따라 새로운 스타일시트 파일을 추가할 수 있습니다.
메인 스타일시트 외에 별도의 스타일시트 파일 만들기
1. 다음 PHP 코드를 함수 파일에 붙여넣기 합니다. 자식 테마를 사용하는 경우 자식 테마 폴더의 함수 파일에 복사하여 넣습니다.
function custom_style_sheet() { wp_enqueue_style( 'custom-styling', get_stylesheet_directory_uri() . '/custom.css' ); } add_action('wp_enqueue_scripts', 'custom_style_sheet');
2. 자식 테마 폴더에서 새로운 파일을 하나 만들고 이름을 custom.css로 지정합니다.
3. custom.css 파일의 시작 부분에 다음 텍스트를 추가하고 적절히 수정하도록 합니다.
/* Theme Name: 자식 테마 Description: 자식테마 커스텀 CSS 코드를 위한 커스텀 스타일시트 Author: 이름 Author URI: http://example.com/ Version: 2.0 Template: yourparenttheme Template Version: 2.0 */ /* 이 라인 아래에 커스텀 CSS 추가 ---------------------------------------------------------------- */
이제 새로운 사용자 지정 CSS 코드는 위의 라인 아래에 추가할 수 있습니다.
위와 같이 wp_enqueue_scripts를 사용하여 CSS 파일을 후크할 경우 조건 태그를 사용하여 특정 페이지나 카테고리 등에만 적용되는 스타일시트를 만들 수 있습니다.
전면 페이지/홈페이지/특정 페이지용 커스텀 스타일시트
가령 일반적인 코드는 style.css 파일에 추가하고, 전면 페이지에 대폭적인 수정을 할 경우 전면 페이지에만 적용되는 스타일시트를 만들 수 있습니다.
function front_page_style_sheet() { if (is_front_page() ) { wp_enqueue_style( 'front-page-styling', get_stylesheet_directory_uri() . '/front-page.css' ); }} add_action('wp_enqueue_scripts', 'front_page_style_sheet'); // Source: WP SITES
위와 같은 함수를 함수 파일에 추가하고 front-page.css 파일을 위와 동일한 방식으로 만들면 됩니다.
마찬가지로 블로그 페이지에만 적용할 경우 is_home() 코드를 사용할 수 있습니다. 보통 is_front_page() || is_home() 코드를 사용하여 홈페이지(첫 페이지)에만 적용시킬 수 있습니다. 특정 페이지에만 적용할 경우에는 is_page('page ID')와 같은 코드를 사용할 수 있습니다.
카테고리 아카이브용 스타일시트
모든 카테고리 아카이브에 적용되는 별도의 스타일시트를 만들려면:
function category_style_sheet() { if (is_category() ) { wp_enqueue_style( 'category-styling', get_stylesheet_directory_uri() . '/css/category.css' ); }} add_action('wp_enqueue_scripts', 'category_style_sheet');
마찬가지로 특정 카테고리에만 적용하려면 카테고리 ID를 추가해주면 됩니다.
참고 사항
get_stylesheet_directory_uri와 get_template_directory_uri 비교
위의 코드에서 테마 경로를 지정하기 위해 get_stylesheet_directory_uri가 사용되었습니다. get_stylesheet_directory_uri는 자식 테마(차일드 테마)가 있을 경우 자식 테마의 경로를 가져옵니다. 반면 get_template_directory_uri는 부모 테마(상위 테마)의 경로를 가져옵니다. 이 부분에 대한 자세한 내용은 여기를 참고하시기 바랍니다.
사용자 함수 파일 추가하기
함수 파일도 메인 함수 파일 외에 커스텀 함수 파일(사용자 지정 함수 파일)을 추가할 수 있습니다. 사용자 지정 함수 파일을 추가하는 방법은 이 글을 참고하시기 바랍니다.
사이트 수준의 함수 파일 만들기
함수 파일은 보통 특정 테마에 종속됩니다. 따라서 테마가 바뀌면 함수 파일 내의 함수는 더 이상 적용되지 않습니다. 함수와 상관 없이 사이트 수준의 함수 파일을 만들려면 플러그인을 만들어야 합니다. 여기에서 사이트 수준의 함수 파일을 만드는 방법을 확인해보십시오.
댓글 남기기