하나의 기사를 여러 페이지로 분할하기

본문이 긴 경우에는 기사를 여러 페이지로 분할해서 표시할 수 있다. 여기에서는 2페이지로 분할하고 페이지 숫자에 링크를 표시해서 각 페이지로 이동할 수 있도록 한다.

->POINT

분할한 페이지로 이동하는 링크

<?php wp_link_pages(); ?>

  1. 기사의 본문을 여러 페이지로 분할하기
    편집화면에서 ‘텍스트’ 탭을 클릭하여 페이지를 분할하고 싶은 위치에 커서를 가져간 후 <!–nextpage–>라고 입력하고 [업데이트] 버튼을 클릭해서 저장한다.
  2. 기사의 표시 확인하기
    기사의 개별 페이지를 확인해보면 <!–nextpage–> 이전 까지만 표시된다. <!–nextpage–> 뒤쪽에 입력된 부분은 표시되지 않는다. 그러나 이 단계에서는 분할된 페이지로 연결된 링크가 없기 때문에 3번째 단란을 구독할 수 없는 상태이다.
  3. 분할된 페이지로 연결하는 링크 표시하기
    분할된 페이지로 이동하는 링크를 표시하기 위해 content.php를 편집한다. <?php the_content(); ?> 뒤에 <?php wp_link_pages(); ?>를 추가해서 본문 아래에 링크를 표시한다. 링크를 클릭해서 2번째 페이지를 확인하면 본문의 3번째 단락이 표시된다.
  4. 링크 부분의 마크업 확인하기
    1번째 페이지의 링크 부분의 마크업을 확인하면 다음과 같다.

    <p id=”postpage”> 1​<a href=”http://kbm402.dothome.co.kr/wordpress/?p=102&#038;page=2“>2​</a></p>
  5. 링크 부분의 마크업 변경하기(1)
    스타일시트에서 디자인을 쉽게 지정하기 위해 링크 부분의 마크업을 변경한다. 마크업은 <?php wp_link_pages(); ?>의 파라미터로 지정한다. 전체를 <p id=”postpage”>~</p>로 마크업하고, 페이지 수를 <span>~</span>으로 마크업하기 위해 3개의 파라미터 값을 다음과 같이 지정한다. 각 파라미터의 지정은 &로 구분해서 입력한다. 또한 ‘페이지’라는 문자는 입력하지 않고 페이지 숫자만 표시한다.
    파라미터 이름     파라미터 이름
    before             <p id=”postpage”>
    after              </p>
    pagelink           <span>%</span>
    ※ %부분에는 페이지 숫자가 입력된다.
  6. 링크 부분의 마크업 변경하기(2)
    style.css에서 링크 부분의 디자인을 지정한다. 페이지 숫자를 사각형 선으로 디자인 하고, 커서를 대면 노란색으로 표시되도록 한다. 또한 표시중인 페이지는 회색으로 표시한다.

분할된 페이지로 연결하는 링크 표시하기

content-single.php

<div class=”post”>
(생략)<?php the_content(); ?>

<?php wp_link_pages(); ?>

<p class=”postinfo”>
<?php echo get_the_date(); ?>
</p>

(생략)
</div>

링크 부분의 마크업 변경하기(1)

<div class=”post”>
(생략)<?php the_content(); ?>
<?php wp_link_pages(‘before=​<p id=”postpage”>&after=​</p>&pagelink=​<span>%​</span>’); ?>
<p class=”postinfo”>
<?php echo get_the_date(); ?>
</p>(생략)
</div>



->TIPS

기사의 본문을 여러 페이지로 분할할 때 각 페이지는 같은 템플릿으로 생성되기 때문에 특성  이미지 및 날씨 정보가  반복되어 표시된다. 이러한  본문 이외의 콘텐츠를 1번째 페이지에만 표시하고 싶은 경우 다음과 같이 를 이용한다.

content-single.php

<div class=”post”>
<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>
<p class=”postcat”><?php the_category(‘ ‘); ?></p>

<?php if(!$page): ?>​

<?php the_post_thumbnail(); ?>

<?php $tenkival = get_post_meta($post->ID, ‘날씨’, true); ?>
<?php if($tenkival): ?>
<p class=”tenki”>
<?php $tenkipng = array(
“맑음” => “hare.png”,
“구름” => “kumori.png”,
“비” => “ame.png”
); ?>
<img src=”<?php bloginfo(‘template_url’); ?>/<?php echo $tenkipng[$tenkival]; ?>” alt=”<?php echo $tenkival; ?>” width=”50″ height=”50″ />
<?php echo get_post_meta($post->ID, ‘기온’, true); ?>
</p>
<?php endif; ?>
<?php endif; ?>​

<?php the_content(); ?>

(생략)

</div>

출처: 바꾸면서 배우는 워드프레스 디자인

“하나의 기사를 여러 페이지로 분할하기”에 대한 한개의 댓글

답글 남기기