WooCommerce Storefront 테마 여러 카테고리 템플릿 만들기
게시 됨: 2020-10-12
많은 온라인 상점에서 카테고리, 태그, 사용자 정의 게시물 유형 및 분류에 대해 서로 다른 템플릿을 사용하는 것이 일반적입니다. 카테고리에 다른 템플릿을 사용하는 경우 카테고리 페이지에 특정 기능을 추가할 수 있습니다. 예를 들어, 카테고리 이미지를 추가하고, 카테고리 설명을 표시하고, 사용자가 카테고리를 구독하도록 허용하고, 각 카테고리에 대해 다른 레이아웃을 선택할 수 있습니다.
WooCommerce Storefront 테마 여러 카테고리 템플릿 만들기
이 간단한 튜토리얼에서는 WooCommerce 스토어에서 카테고리 템플릿을 만드는 방법을 보여 드리겠습니다.
범주 페이지에 대한 템플릿 계층
WordPress에는 웹사이트 섹션마다 다른 템플릿을 사용하여 테마를 만들 수 있는 강력한 템플릿 시스템이 있습니다. 페이지를 표시할 때 WordPress는 미리 정의된 계층적 순서로 템플릿을 찾습니다. 예를 들어 카테고리 페이지를 표시하기 위해 다음 순서로 템플릿을 찾습니다.
category-slug.php > category-id.php > category.php > archive.php > index.php
찾을 첫 번째 템플릿은 카테고리 슬러그를 사용하는 특정 카테고리에 대한 템플릿입니다. category-design.php 템플릿은 '디자인' 카테고리를 표시하는 데 사용됩니다. 그러나 카테고리 슬러그 템플릿을 찾지 못하면 WordPress는 카테고리 ID 템플릿을 찾습니다.
그런 다음 일반적으로 category.php인 일반 카테고리 템플릿을 찾습니다. 그러나 일반 카테고리 템플릿이 없으면 WordPress는 일반 아카이브 템플릿을 찾습니다.
그런 다음 index.php 템플릿을 사용하여 카테고리를 표시합니다.
카테고리 템플릿을 만드는 방법
일반적인 category.php 템플릿은 다음과 같습니다.
<?php
/**
* 간단한 카테고리 템플릿
*/
get_header(); ?>
<섹션 ID="기본" 클래스="사이트 콘텐츠">
<div id="콘텐츠" 역할="메인">
<?php
// 표시할 게시물이 있는지 확인
if ( have_posts() ) : ?>
<헤더 클래스="아카이브 헤더">
<h1 class="archive-title">카테고리: <?php single_cat_title( '', false ); ?></h1>
<?php
// 선택적 카테고리 설명 표시
if ( category_description() ) : ?>
<div class="archive-meta"><?php echo category_description(); ?></div>
<?php endif; ?>
</헤더>
<?php
// 루프
동안 ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute()에 대한 영구 링크; ?>"><?php the_title(); ?></a></h2>
<작은><?php the_time('F jS, Y') ?> 작성자 <?php the_author_posts_link() ?></small>
<div 클래스="항목">
<?php the_content(); ?>
<p class="postmetadata"><?php
comment_popup_link( '아직 댓글이 없습니다', '댓글 1개', '댓글 %', '댓글 링크', '댓글 닫힘');
?></p>
</div>
<?php 그 동안;
다른: ?>
<p>죄송합니다. 기준과 일치하는 게시물이 없습니다.</p>
<?php endif; ?>
</div>
</섹션>
<?php get_sidebar(); ?>
<?php get_footer(); ?>카테고리 슬러그가 "classy"인 "Classy Clothes"라는 카테고리가 있고 이 카테고리를 다른 카테고리와 다르게 표시하려고 한다고 가정해 보겠습니다. 이 결과는 해당 특정 범주에 대한 템플릿을 만들어 얻을 수 있습니다.
이렇게 하려면 모양 > 편집기로 이동합니다. 오른쪽에 몇 가지 테마 파일이 표시됩니다. archive.php 를 클릭합니다. 없는 경우 category.php 를 찾으십시오. 그러나 Storefront 테마를 사용하는 경우 archive.php 를 찾을 수 있습니다. 
archive.php 파일의 모든 내용을 복사하여 메모장과 같은 텍스트 편집기에 붙여넣습니다. 이 파일을 category-design.php로 저장합니다.
다음 단계는 wp-content > Themes > Storefront theme 으로 이동하는 것입니다. category-design.php 파일을 테마 디렉토리에 업로드하십시오.
이 템플릿에 대한 변경 사항은 이 특정 카테고리의 아카이브 페이지에만 나타납니다. 이 기술을 사용하여 원하는 만큼 범주에 대한 템플릿을 만들 수 있습니다. 파일 이름으로 category-{category-slug}.php를 사용하면 됩니다. 카테고리 슬러그는 WordPress 관리 영역의 카테고리 섹션에서 찾을 수 있습니다.
이것은 category-slug.php 템플릿의 또 다른 예입니다. 약간의 변경 사항만 제외하고 category.php 템플릿과 동일합니다.
<?php
/**
* 간단한 카테고리 템플릿
*/
get_header(); ?>
<섹션 ID="기본" 클래스="사이트 콘텐츠">
<div id="콘텐츠" 역할="메인">
<?php
// 표시할 게시물이 있는지 확인
if ( have_posts() ) : ?>
<헤더 클래스="아카이브 헤더">
<?php
// 이 템플릿은 디자인 카테고리에만 사용되기 때문에
// 카테고리 제목과 설명을 수동으로 추가할 수 있습니다.
// 또는 이미지를 추가하거나 레이아웃을 변경합니다.
?>
<h1 class="archive-title">디자인 기사</h1>
<div class="아카이브 메타">
디자인과 웹에 대한 기사와 튜토리얼.
</div>
</헤더>
<?php
// 루프
동안 ( have_posts() ) : the_post();
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute()에 대한 영구 링크; ?>"><?php the_title(); ?></a></h2>
<작은><?php the_time('F jS, Y') ?> 작성자 <?php the_author_posts_link() ?></small>
<div 클래스="항목">
<?php the_excerpt(); ?>
<p class="postmetadata"><?php
comment_popup_link( '아직 댓글이 없습니다', '댓글 1개', '댓글 %', '댓글 링크', '댓글 닫힘');
?></p>
</div>
<?php 그 동안; // 루프 종료
다른: ?>
<p>죄송합니다. 기준과 일치하는 게시물이 없습니다.</p>
<?php endif; ?>
</div>
</섹션>
<?php get_sidebar(); ?>
<?php get_footer(); ?>그러나 category-slug 템플릿을 사용하지 않으려면 category-id 템플릿을 사용하여 특정 카테고리 ID에 대한 템플릿을 만들 수 있습니다.
범주에 조건부 태그를 사용하는 방법
테마에 대한 템플릿을 만들 때 추가 템플릿이 필요한지 확인해야 합니다. 어떤 경우에는 만들고자 하는 것이 너무 복잡하지 않고 일반 템플릿 내부의 조건부 태그를 사용하여 달성할 수 있기 때문입니다.
WordPress는 많은 조건부 태그를 지원합니다. 그 중 하나는 is_category() 조건부 태그입니다. 조건이 일치하는 경우 다른 출력을 표시하도록 템플릿을 변경하는 데 사용할 수 있습니다. 예를 들어, 카테고리에 대한 카테고리 아카이브 페이지에 몇 가지 추가 정보를 표시할 수 있습니다. 이렇게 하려면 <?php if ( have_posts() ) : ?> 바로 뒤에 category.php 파일에 이 코드를 추가하기만 하면 됩니다.
<헤더 클래스="아카이브 헤더"> <?php if(is_category( '추천' )) : ?> <h1 class="archive-title">특집 기사:</h1> <?php 기타: ?> <h1 class="archive-title">카테고리 아카이브: <?php single_cat_title(); ?> </h1> <?php endif; ?> </헤더>
결론
이 게시물에서는 카테고리, 태그, 사용자 정의 게시물 유형 및 분류에 대해 다양한 템플릿을 사용할 수 있음을 강조했습니다. 또한 카테고리 페이지에 WordPress에서 사용되는 템플릿 계층 구조를 공유했습니다.
또한 범주 템플릿을 만드는 방법과 범주에 대한 조건부 태그를 사용하는 방법을 보여 주었습니다.
유사한 기사
- '한눈에' 대시보드 위젯 WordPress에 사용자 정의 게시물 유형을 추가하는 방법
- 플러그인 없이 WordPress에서 사용자 정의 게시물 유형을 만드는 방법
- 사용자 정의 게시물 유형 편집기에 기본 콘텐츠를 추가하는 방법
- _content 및 사용자 정의 게시물 유형 전후에 콘텐츠를 추가하는 방법
- 사용자 정의 게시물 유형에서 댓글을 제거하거나 숨기는 방법 » 사용자 정의 게시물 유형에서 댓글 비활성화
- 사용자 정의 게시물 유형에 대한 WordPress 페이지 매김을 만드는 방법
- WordPress 게시물 및 사용자 정의 게시물 유형에서 autop를 제거하거나 비활성화하는 방법