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

이야기에 앞서

본문 읽기 화면은 목록에서 게시물의 제목이나 썸네일을 클릭했을 경우 나타는 화면입니다. 이전에 index.php를 복사해서 파생된 single.php 파일로 구성합니다.

본문 읽기 화면은 목록 화면보다 구성요소가 적습니다. 예를들면, 요약문과 특성 이미지가 필요없고(물론 본문에도 특성 이미지를 넣는 경우도 있긴 하지만), 페이지 네비게이션도 사용하지 않습니다. 따라서 index.php에서 추가했던 대부분의 요소를 복사해서 사용할 필요가 없습니다.

댓글(Comment) 시스템 달기

댓글 시스템은 방문객과의 커뮤니케이션을 이루는 매우 중요한 부분입니다. 댓글 시스템 역시 간단한 템플릿 구문 추가만으로 활성화가 가능하지만, 워드프레스에서 제공하는 기본 디자인의 퀄리티가 매우 떨어져 그대로 사용하기 힘듭니다. 아울러, 디자인을 바꾸기 위해 치장해야 하는 CSS의 양도 너무 많아서 HTML과 CSS를 잘 다루는 사람도 매우 고생합니다.

그래서 대부분 댓글 시스템 플러그인을 사용합니다. 플러그인을 사용하면 꽤 괜찮은 디자인과 성능의 댓글 시스템을 곧바로 사이트에 활성화 할 수 있습니다. 하지만 이 플러그인들은 localhost와 같은 내부 도메인 및 아이피에서는 활성화 시킬 수 없습니다.

따라서 댓글 시스템은, 본 과정의 가장 마지막에 다시 설명하도록 하고, 여기서는 설명을 생략합니다.

이미지 정렬을 위한 CSS 코드 추가하기

본문에 이미지를 추가하는 경우가 있습니다. 본문에 추가되는 이미지는 정렬을 할 수 있는데, 워드프레스는 이러한 정렬을 위해 별도로 준비된 CSS 코드를 여러분의 style.css 파일에 추가해 주어야 합니다. 아래의 코드를 복사해서 style.css에 복사해 주세요.

아래의 동영상은, 위에 설명한 내용을 좀 더 이해하기 쉽게 설명하고 있으므로 꼭 한번 시청하시기 바랍니다. (전체화면으로 보기 권장)

style.css에 다음 코드 추가

/* 글쓰기 이미지 정렬 */
img.alignright {float:right; margin:0 0 1em 1em }
img.alignleft {float:left; margin:0 1em 1em 0 }
img.aligncenter {display: block; margin-left: auto; margin-right: auto }
a img.alignright {float:right; margin:0 0 1em 1em }
a img.alignleft {float:left; margin:0 1em 1em 0 }
a img.aligncenter {display: block; margin-left: auto; margin-right: auto }

큰 이미지 리사이징

게시물에 첨부한 이미지의 사이즈가 너무 클 경우, 컨텐츠를 담는 단을 뚫고 나가는 경우가 있습니다. 그래서 본문에 삽입되는 이미지에 CSS 스타일을 정의하여 자동으로 너비를 꽉 차게 바꿔 줄 필요가 있습니다. 방법은 간단합니다.

본문이 노출되는 단이 <div class="post-content">라면, 해당 단 안에 위치한 <img> 태그는 아래의 CSS에 영향을 받도록 정의해 주면 됩니다.

article.post .post-content img {
    max-width:100%;
    height:auto;
}

돌아가기 버튼 추가하기

본문 읽기 화면의 마지막에는 반드시 이전 화면으로 돌아가기 버튼과 목록 화면으로 돌아가기 버튼이 있는 것이 바람직합니다. 각 버튼의 차이점은 다음과 같습니다.

이전 화면으로 돌아가기

대부분의 경우는 목록화면에서 게시물을 클릭해서 본문 읽기 화면으로 들어오기 때문에 이전 화면이란 곧 목록 화면으로 돌아가기와 같은 성향을 띕니다.

목록으로 돌아가기

이전 화면으로 돌아가기가 있기 때문에 별도로 목록 화면으로 돌아가는 버튼이 필요 없을 것 같지만, 외부 사이트에서 링크를 타고 게시물 본문으로 들어오는 경우도 있습니다. 이 경우에는 이전 화면이 곧 이전에 보던 사이트로 돌아갈 수 있으므로, 따로 목록으로 돌아가기 버튼을 두어 이 사이트의 목록 화면으로 유도할 수 있게 해야 합니다.

이 버튼들은 아래와 같이 디자인 해 보았습니다.

이제, CSS 코드는 여러분의 style.css 파일의 적당한 곳에 복사해 붙이고, 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; ?>
    
    <nav class="go-back">
        <a href="#" onclick="history.back(); return false;">이전화면</a>
        <a href="<?php echo esc_url(home_url()); ?>">목록으로</a>
    </nav>
    
</section>

참고로, 이전화면 버튼은 <a> 태그에 자바스크립트를 사용하여 웹 브라우저가 기억하고 있는 이전 페이지로 돌아가게 하였고, 목록으로 버튼은, 여러분의 웹 사이트 홈 주소를 출력해 주는 템플릿 구문인 <?php echo esc_url(home_url()); ?> 뒤에 /index.php를 붙여 목록 화면으로 이동하게끔 설정하였습니다.