워드프레스 테마 만들기: 개별 포스트를 표시 하기 위한 single.php 파일 만들기

🕓2017.07.01 📈2

워드프레스에서 개별 포스트를 보여주기 위한 기본 파일은 single.php 파일입니다. 워드프레스에서 개별 포스트를 표시 할 때는 이 파일을 베이스로 해서 사용자에게 표시해 줍니다.

single.php 파일이 해야 하는 일

먼저 single.php 파일이 해야 하는 일을 알아봅시다.

호출을 받은 개별 포스트가 실제로 존재하는지 확인
포스트가 실제 존재한다면 해당 포스트의 제목, 작성자, 작성일자, 본문, 코멘트 등 여러 정보를 출력

실제로 작동하는 프로세스는 아주 간단합니다.

single.php 파일 만들기

일단 간단하게 작성된 예제를 먼저 보시죠.

<?php get_header(); ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <article>
            <header>
                <!-- 포스트의 타이틀, 작성자, 작성 일자 등의 정보 표시 -->
            </header>
            <section>
                <!-- 포스트 본문 표시 -->
            </section>
            <footer>
                <!-- 코멘트 영역 표시 -->
            </footer>
            <div
        </article>
    <?php endwhile; ?>
<?php get_footer(); ?>

포스트가 존재하는지 확인하기

<?php while ( have_posts() ) : the_post(); ?>
    ...
<?php endwhile; ?>

이 부분이 포스트가 존재 하는지 확인 하는 부분입니다. have_posts() 가 true 값을 반환하면, the_post() 를 통해 해당 포스트를 현재 사용자 화면에서 출력하기 위한 기준임을 알려줍니다.

HTML5 마크업으로 기본 구조 만들기

<article>
    <header>
        <!-- 포스트의 타이틀, 작성자, 작성 일자 등의 정보 표시 -->
    </header>
    <section>
        <!-- 포스트 본문 표시 -->
    </section>
    <footer>
        <!-- 코멘트 영역 표시 -->
    </footer>
</article>

HTML5 마크업을 이용하여 문서의 기본 구조를 만들어 줍니다.

포스트의 본문 전체를 article 태그로 묶어 독립적으로 만들어주고, header, section, footer 영역으로 구분하여 각각에 어울리는 내용을 넣어줍니다. header 에는 제목과 작성자, 작성일자 등을 넣어 주고, section 에는 포스트의 본문을, footer 에는 코멘트(댓글) 영역을 넣어주도록 합니다.

이는 각 테마의 개발자들이 원하는 방식으로 배치 할 수 있습니다.

header 영역 만들기

앞서 이야기 했듯이, header 영역에서는 포스트의 타이틀과 작성자, 작성일자를 표시 하도록 합시다. 이를 위해서 아래와 같이 구성합니다.

<header>
    <h1>
        <?php the_title(); ?>
    </h1>
    <div>
        <?php the_author(); ?>
    </div>
    <div>
        <?php the_date(); ?>
    </div>
</header>

아주 간단하죠? 워드프레스 내장 함수로 간단하게 표현 할 수 있습니다. the_title 로 포스트의 제목을 표시해주고, the_author 로 작성자를 표시 해주고, the_date 로 작성 일자를 표시 해줍니다.

본문 표시 영역 만들기

본문 표시 영역을 만들기 위해서 section 영역을 채워 보도록 하겠습니다.

<section>
    <?php the_content(); ?>
</section>

마찬가지로 아주 간단하게 작성 할 수 있습니다. 워드프레스 내장 함수인 the_content 함수로 포스트의 본문을 표시 해줍니다.

footer 영역 만들기

포스트 하단에 추가 정보를 표시 할 footer 영역을 만들어줍니다. 여기서는 코멘트(댓글) 영역만 추가 하도록 해보겠습니다.

<footer>
    <?php 
        if ( comments_open() ) { comments_template(); }
        else { echo 'Comment is Closed.'; }
    ?>
</footer>

마찬가지로 워드프레스 내장 함수로 간단하게 표현 가능합니다. comments_open 함수로 해당 포스트의 코멘트가 열려있는지(포스트 작성자가 사용자들로 하여금 코멘트를 작성 할 수 있도록 허용해두었는지) 확인 한 후, 코멘트가 열려 있으면 comments_template 으로 코멘트와 작성 영역을 보여주고, 그렇지 않으면 코멘트 작성이 금지 되었다고 알려줍니다.

위 사항들 모두 워드프레스 내장 함수로 간단하게 표현 할 수 있으니 아래 참고자료를 간단히 확인하여 활용하시기 바랍니다.