제품소개 카테고리로 들어가보면 제품들이 일렬로 쭈욱~ 나열되어 있습니다. 별로 보기가 좋지 않죠.
여기도 메인화면처럼 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; }
'워드프레스 > 중급 홈페이지 제작' 카테고리의 다른 글
| WP홈페이지 제작 - 회사소개 내용 입력 (0) | 2014.05.06 |
|---|---|
| WP홈페이지 제작 - 코멘트(댓글) 부분 수정 (0) | 2014.05.03 |
| WP홈페이지 제작 - Contact 폼 수정 (0) | 2014.04.28 |
| WP홈페이지 제작 - Contact 폼 작성 (0) | 2014.04.28 |
| WP홈페이지 제작 - 아래 내용 중 일부 변경 (0) | 2014.04.22 |
환타73
디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.
