페이지 번호를 나열해서 이전 기사에 쉽게 접속하기

기사를 목록으로 만들면 여러 페이지로 나뉘어서 표시된다. 따라서 각 페이지로 이동하는 링크를 작성해서 효율적으로 접속할 수 있게 한다.

  1. 이전 기사를 구독하기 위한 링크
  2. 페이지 번호 설정하기
  3. 표시 중인 번호에는 링크를 설정하지 않기
  4. 앞뒤 페이지로 이동하는 링크 추가하기
  5. 링크의 디자인 지정하기
    각 링크를 녹색 사각형 형태로 지정하기 위해 style.css에 다음과 같이 설정을 추가한다. 표시 중인 페이지 번호는 밝은 녹색으로 표시한다.

pagenation.php
변경전
‘이전 기사’ 링크로는 1페이지 씩만 이동할 수 있다.

<p class=”pagenation”>

<span class=”oldpage”><?php next_posts_link(‘&laquo; 이전 기사’); ?></span>
<span class=”newpage”><?php previous_posts_link(‘다음 기사 &raquo;’); ?></span>

</p>

변경후
‘이전 기사’ 링크를 삭제하고 모든 페이지로 이동하는 링크를 표시하기 위해 링크의 설정을 입력한 pagenation.php를 편집한다. 여기에서는 $wp_query->max_num_pages로 모든   페이지의 수를 취득하고 for()를 이용해서 1번째 페이지부터 마지막 페이지까지의 번호를 출력한다. 처리 중인 페이지 번호는 $i에 대입되기 때문에 <?php echo $i; ?>로 번호를 작성하고 <?php echo get_pagenum_link($i); ?>로 페이지의 URL을 출력해서 링크를 작성한다.

<p class=”pagenation pagenum”>

<?php $maxpage = $wp_query->max_num_pages; ?><?php for($i=1; $i <= $maxpage; $i++): ?>
<a href=”<?php echo get_pagenum_link($i); ?>”>
<?php echo $i; ?></a>
<?php endfor; ?>

</p>

->MEMO

<p class=”~”>에 ‘pagenum’이라는 클래스 이름을 추가해서 스타일시트에서 페이지 번호를 표시한 링크의 디자인을 지정할 수 있게 한다.

->MEMO

모든 페이지에 번호를 표시하도록 지정하지만 표시 범위을 제한하고 싶은 경우, ‘페이지 번호 링크의 표시 범위 지정하기’를 참고하기 바란다.

표시 중인 번호에는 링크를 설정하지 않기
표시 중인 페이지 번호에는 링크를 설정하지 않기 위해 $paged로 표시 중인 페이지 번호를 취득해서 $current에 대입한다. 단, 1번째 페이지를 표시하고 싶을 때 취득되는 페이지 번호는 ‘0’이 되기 때문에 if(!$current) {~}를 이용해서 ‘1’로 변경한다. 나머지는 페이지 번호를 출력할 때 $current와 번호가 일치하는 경우 <span>으로 마크업한 번호를 출력하도록  지정한다.

<p class=”pagenation pagenum”>

<?php $maxpage = $wp_query->max_num_pages;
$current = $paged;
if(!$current) {$current = 1;}
?>

<?php for($i=1; $i <= $maxpage; $i++): ?>
<?php if($i == $current): ?>
<span><?php echo $i; ?></span>
<?php else: ?>

<a href=”<?php echo get_pagenum_link($i); ?>”><?php echo $i; ?></a>
<?php endif; ?>
<?php endfor; ?>

</p>

앞뒤 페이지로 이동하는 링크 추가하기
앞뒤 페이지로 이동하는 링크를 출력한다. 이전 페이지로 이동하는 링크는 <?php previous_posts_link( ); ?>로 출력하고, 다음 페이지로 이동하는 링크는 <?php next_posts_link(); ?>로 출력한다. 또한 &lt;로 <를 출력하도록 지정하고, &gt;로 >를 출력하도록 지정한다.

<p class=”pagenation pagenum”>

<?php $maxpage = $wp_query->max_num_pages;
$current = $paged;
if(!$current) {$current = 1;} ?>

<?php previous_posts_link(‘&lt;’); ?>
<?php for($i=1; $i <= $maxpage; $i++): ?>
<?php if($i == $current): ?>
<span><?php echo $i; ?></span>
<?php else: ?>
<a href=”<?php echo get_pagenum_link($i); ?>”><?php echo $i; ?></a>
<?php endif; ?>
<?php endfor; ?>
<?php next_posts_link(‘&gt;’); ?>

</p>

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

답글 남기기