이 게시물은 2016년 8월 9일 수정판입니다.

이야기에 앞서

이제부터는 실질적으로 방문객에게 컨텐츠를 제공할 수 있는 템플릿 구문을 사용해 보려고 합니다. 그 중 1개는 이미 index.php 파일에 삽입되어 있습니다. 게시물의 본문에 해당하는 내용을 출력해 주는 <?php the_content(); ?> 구문이 그것입니다.

이 구문은, 우리가 워드프레스에서 새로운 게시물을 작성할 때, 본문에 해당하는 내용을 화면에 뿌려줍니다.

하지만 게시물의 제목이나 조회수, 카테고리, 작성자 이름과 같은 정보를 출력해 주는 템플릿 구문이 없군요. 이 글에서는 컨텐츠의 다양한 정보를 출력해 주는 템플릿 구문을 넣어 컨텐츠를 더욱 풍성하게 만들어보려 합니다.

컨텐츠를 보여주는 틀 짜기

일단 우리가 사이트의 첫 화면에 보여줄 컨텐츠의 항목은 대강 제목, 작성 날짜, 카테고리 이름, 작성자 이름, 본문 정도입니다. 이런 정보들을 어떤 디자인으로 뿌려줄지 HTML과 CSS를 사용해서 미리 만들어 봅시다. 아래의 코드는 제가 임의로 만들어 본 틀입니다.

이제, 작성한 HTML 코드를 index.php의 <?php the_content(); ?> 구문 대신 넣어줍니다. 그리고 CSS 코드 역시 여러분의 style.css 파일의 적당한 곳에 붙여 넣습니다. 그러면 여러분의 index.php는 아래와 같은 형태가 됩니다.

아래 코드는 index.php의 전체 코드가 아니라, 삽입 된 코드가 어디인지 정도만 알 수 있을 정도로 일부분만 발췌했습니다.

<section id="site-content">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        
    <article class="post">
        <h1 class="post-title"><a href="#">Subject</a></h1>
        
        <p class="post-meta">2014. 5. 16 by Hyunhwa Jung — <a href="#">Design</a></p>
        
        <div class="post-content">
            <?php the_content(); ?>
        </div>
    </article>
        
    <?php endwhile; else: ?>
        새로운 기사가 없습니다.
    <?php endif; ?>
</section>

템플릿 구문 넣기

이제 템플릿 구문을 넣어 데이터베이스로부터 게시물의 각 정보를 뽑아오도록 합시다. 여기서 사용할 템플릿 구문은 다음과 같습니다. 잠깐 살펴보시기 바랍니다.

<?php the_permalink(); ?>

게시물의 주소를 출력합니다. <a> 태그의 href 속성에 넣어주면 해당 게시물의 읽기 화면으로 넘어갑니다.

<?php the_title(); ?>

게시물의 제목을 출력해 줍니다.

<?php the_date(); ?>

게시물이 작성된 날짜를 출력해 줍니다.

<?php the_author(); ?>

게시물을 작성한 사람의 이름을 출력해 줍니다.

<?php the_category(‘, ‘); ?>

게시물이 속해 있는 카테고리의 이름과 해당 카테고리를 모두 보여주는 리스트 화면으로 이동이 가능한 링크까지 생성해 줍니다.

<?php the_content(); ?>

게시물의 본문을 출력해 줍니다.

이 구문들을 HTML 코드의 어느 부분에 대신 넣어야 하는지 감이 오시나요? 모든 템플릿 구문을 넣은 결과는 다음과 같습니다.

<section id="site-content">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
    <article class="post">
        <h1 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
        
        <p class="post-meta"><?php the_date(); ?> by <?php the_author(); ?> — <?php the_category(', '); ?></p>
        
        <div class="post-content">
            <?php the_content(); ?>
        </div>
    </article>
    
    <?php endwhile; else: ?>
    새로운 기사가 없습니다.
    <?php endif; ?>
</section>

이 템플릿 구문들은 게시물의 각 정보를 추출해서 화면에 출력해 줍니다.

마치며

지금까지의 index.php는, 게시물을 작성했을 때의 기본적인 제반 정보와 내용을 출력해 줍니다. 하지만 목록 화면과 본문 읽기 화면에 대한 경계가 모호한 상태입니다. 그래서 다음 단계에서는 index.php 파일의 성격을 목록 화면과 본문 읽기 화면으로 나누고, 각 화면에서 필요로 하는 추가 기능들을 넣어보겠습니다.