WP홈페이지 제작 - Bootstrap 레이아웃 - 홈

header.php 즉, 헤더 부분에 부트스트랩 레이아웃을 적용한 후 다음으로는 "홈" 부분에 레이아웃을 적용해야 합니다.
그냥 쭉 나열되어 있는 콘텐츠들을 (여기서는 최근 포스트 6개) 3열 2행으로 나열하는 것을 목표로 합니다.

 

 

 

우선 윈도우 탐색기를 통해 aca 테마 파일 중 "index.php"를 선택하고 [ctrl+c] 후 [ctrl+v]로 사본을 만듭니다. 그리고 사본의 이름을 "home.php"로 바꾼 후 FTP 나 테마 에디터를 통해 웹서버에 업로드 합니다.

이제 워드프레스는 "홈"을 불러올 때 "home.php"를 불러올 것입니다(워드프레스의 php 파일 로딩 순서에서 home.php가 index.php 보다 먼저 불러오게 되어 있습니다).

 

 

 

 

홈 화면에서는 사이드바를 삭제할 것이므로, "home.php" 소스에서 사이드바 관련 코드를 삭제해야 합니다.
<?php get_sidebar(); ?> 를 삭제하면 페이지 하단에 있던 사이드바가 사라집니다.

 

 

 

 

 

 

 

"header.php" 맨 아래 줄에서 클래스에 "row"를 추가했기 때문에 "home.php" 소스에서는 "span" 클래스를 추가합니다.

id가 primary 인 div 요소의 클래스명 content-area 뒤에 span12 를 추가합니다. 포트스 내용이 브라우저의 가운데로 제대로 정열이 되면서 마진이 생깁니다.

 

<div id="primary" class="content-area span12">

 

 

이제 포스트들을 3열 2행으로 만들어야 합니다. home.php 소스에 보면 워드프레스의 루프(Loop) 소스가 있습니다. 이 부분을 수정해서 구현합니다.

 

<?php if ( have_posts() ) : ?> 부터 <?php endif; ?> 까지의 내용을 아래와 같이 수정합니다.

			<section class="row">
					<?php $post_count = 1; ⁄⁄카운터 ?>
					<?php if ( have_posts() ) : ?>

					<?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="span4">');
							get_template_part( 'content', get_post_format() );
						echo('<⁄div>');
					?>

					<?php if ($post_count % 3 == 0) { echo '<div class="clear"><⁄div>'; } ?>
					<?php $post_count++; endwhile; ?>

					<?php aca_paging_nav(); ?>

					<?php else : ?>

					<?php get_template_part( 'content', 'none' ); ?>

					<?php endif; ?>
			<⁄section><!-- .row -->

 

3열 2행의 레이아웃으로 변경되었습니다.
루프 소스 중에 카운터를 넣은 것은 3열마다 css의 클리어 요소(clear: both)를 넣어서 줄바꿈을 해 주어야 하기 때문입니다. 클리어 요소를 넣지 않으면 포스트의 내용에 따라 줄바꿈이 뒤죽박죽 되어 버립니다.
만일 3열이 아닌 4열로 포스트로 나열하고 싶다면 {span4} 대신에 {span3}을 넣고,{$post_count % 3} 을 {$post_count % 4}로 수정하면 됩니다.

 

 

포스트의 내용이 제각각이라서 좀 들쭉날쭉 합니다. 입력된 내용이 전부 보여지게 되어 있기 때문인데 이를 해결하기 위해 플러그인을 설치합니다.

 

Auto Excerpt everywhere
http://wordpress.org/plugins/auto-excerpt-everywhere/

 

이 플러그인은 포스트의 내용을 요약하여 출력하는 기능을 가지고 있습니다. 플러그인을 설치한 후 Excerpt length 값을 300 으로, Read more text 에 들어갈 문구를 ...more 로 설정했습니다. 출력되는 내용이 일정하게 잘려서 깔끔하게 정리된 모습을 볼 수 있습니다.