WP홈페이지 제작 - 카테고리 레이아웃 수정

제품소개 카테고리로 들어가보면 제품들이 일렬로 쭈욱~ 나열되어 있습니다. 별로 보기가 좋지 않죠.

여기도 메인화면처럼 3행으로 뿌려지게 하면 좋겠습니다. 기본적인 방법은 메인화면에 포스트를 뿌려주는 코드와 크게 다르지 않습니다.

 

 

 

우선 제품 전체를 볼 수 있게 메뉴를 하나 더 추가합니다.

관리자의 외모 - 메뉴에 가서 카테고리 항목을 펼치고 "제품소개"항목을 우측 메뉴리스트에 추가하고 네비게이션 라벨을 "모두보기"로 입력한 후 저장합니다. 이제 제품소개의 하위 카테고리는 이 메뉴를 통해 모두 볼 수 있습니다.

 

 

 

윈도우 탐색기에서 archive.php 파일을 복사한 후 category.php 라는 이름으로 저장하고, FTP나 WP-Editor 의 파일업로드 기능을 사용하여 테마 구성파일에 추가합니다.

이제 워드프레스는 archive.php 를 불러오기 전에 category.php를 불러올 것입니다.

 

 

 

category.php 의 코드 중에서 내용이 불려와지는 곳의 소스에 부트스트랩 레이아웃을 위한 요소 및 클래스를 추가합니다. 이를 통해 제품들이 3열로 뿌려질 것입니다.

</header><!-- .page-header --> 아래쪽을 수정합니다.

      	<div id="products-list" class="row">
			<?php $post_count = 1; ⁄⁄카운터 ?>
			<?php ⁄* Start the Loop *⁄ ?>
			<?php while ( have_posts() ) : the_post(); ?>

				<?php
					⁄* Include the Post-Format-specific template for the content.
					 * If you want to override this in a child theme, then include a file
					 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
					 *⁄

					echo('<div class="span3">');
							get_template_part( 'content', get_post_format() );
					echo('<⁄div>');
				?>

			<?php if ($post_count % 3 == 0) { echo '<div class="clear"><⁄div>'; } ?>
			<?php $post_count++; endwhile; ?>
		<⁄div><!-- #products-list .row -->

 

 

 

 

이미지를 영역 크기에 맞춰서 보이게 하기 위해 스타일도 수정합니다. custom.css 에 아래 코드를 추가합니다.

⁄* 제품리스트 썸네일 크기 *⁄
#products-list .autoexcerpt_thumb {
  width: 100%;
  height: auto;
}

 

 

 

이미지 크기를 수정했는데 문제가 생겼습니다. 기본 섬네일크기가 150*150 인데 영역 크기에 맞추려니 강제 확대가 되어 깨져보입니다. 플러그인에 가서 기본으로 보여지는 이미지를 좀 더 고해상도 이미지로 볼 수 있게 설정을 바꿔야 합니다.

 

Auto Excerpt everywhere 셋팅에 가서 Include post thumbnail 종류를 Medium 으로 바꿉니다.

단점은 분명 큰 사이즈를 불러와서 트래픽이 늘어나겠지만, 이미지가 깨지는 것 보다는 더 나을 것입니다.

 

 

 

 

 

그리고 홈화면의 제품이미지 크기를 위한 스타일도 수정합니다. 그렇지 않으면 플러그인 셋팅으로 인해 사이즈가 Medium에 맞춰져서 커지게 됩니다.

⁄* 홈포스트 썸네일 크기 *⁄
#homepost .autoexcerpt_thumb {
  width: 150px;
  height: 150px;
}

제품소개 리스트의 제품명도 너무 크니까 홈화면 처럼 폰트 크기를 줄입니다.

⁄* 제품리스트 타이틀 폰트 크기 *⁄
#products-list .entry-title { font-size: 1.6em; }