다음(Next) 및 이전(Previous) 글 링크는 방문자에게 워드프레스 사이트를 안내한다. 강력한 사이트 탐색 링크를 만들 때, 방문자를 머물게 하는 가장 강력한 도구는 이 링크 태그이다.
방문자가 사이트에서 이동하는 두 개의 태그가 있다: 이전(Previous) 및다음(Next) 링크를 둘 다 표시하는 posts_nav_link()와 이전(Previous) 또는 다음(Next) 링크 중의 하나를 표시하는 previous_post() 와next_post() 한 쌍의 조합이다. 이 문서에서 이 두 개의 태그 작동 방법을 살펴본다.
참고: 이 경우 "이전(Previous)" 및 "다음(Next)"은 게시된 순서대로 글을 참조한다. 시간적으로 특정 방향이 아니다. 워드프레스는 기본적으로 가장 최근 글부터 시간적으로 거꾸로 표시하기 때문에, 많은 사람들이 혼란스러워 한다. 이 기본 순서를 사용하면, "다음(Next)"은 시간적으로 뒤로 이동할 것이다. 1페이지 뒤에 있는 "다음(next)" 페이지는 2페이지이고, 오래된 글로 이동할 것이다. 글의 순서가 변경되면 (템플릿에 있는 query_posts를 수동으로 사용하여), 링크는 다른 방향을 가리키게 된다. 이 코덱스 문서는 설명 없이 두 방법을 모두 사용한다. 단지 예제 코드이기 때문이다. 이 기능은 시간적인 순서와는 별도의 순서를 나타낸다는 사실을 명심해야 한다.
사이트 탐색 링크의 첫 번째는 개별/고유주소 페이지가 아닌 웹페이지에서만 제공된다. 카테고리, 아카이브(archives), 검색 및 인덱스 페이지와 같은 페이지에서만 제공된다. 이것은 템플릿 태그 posts_nav_link()이다. 이 태그는 워드프레스 루프 안의 페이지 아래에 두 개의 링크를 만들어, 시간적인 순서로 다음(next)과 이전(previous) 페이지를 표시한다.
기본적으로, posts_nav_link는 다음과 같이 보인다:
이것은 종종 아래와 같이 단락 코드 또는 division으로 표시된다:
<div class="navigation"><p><?php posts_nav_link(); ?></p></div>
이 태그의 매개변수는 다음과 같다:
<?php posts_nav_link('separator','prelabel','nextlabel'); ?>
이 매개 변수는 각각 문자열(string) 또는 텍스트 또는 HTML 또는 CSS 태그를 만들기 위해 사용될 수 있다. 이 글 탐색 링크를 더 흥미롭게 만들기 위해 할 수 있는 일을 살펴보자.
단순함을 유지하면서, CSS를 사용하여 이 태그의 모양을 변경할 수 있다. 더 나아가 태그의 매개 변수 안에 있는 콘텐츠를 변경해보자.
다음으로, 텍스트 글꼴을 굵게하고, 흥미롭게 보이도록 font-variant: small-caps를 사용한다. 그리고separator를 무한대 기호로 표시하고, 라벨에 단어를 추가한다.
<div class="navigation"><p><?php posts_nav_link('∞','Go
Forward In Time','Go Back in Time'); ?></p></div>
그러면 이것은 다음과 같이 보인다:
여기에서 멈추지 말고, 실제로 방문자의 관심을 끄는 특수 문자를 더 추가해서, 방문자가 이 페이지에서 볼 수 있는 것 보다 더 많은 것이 있다는 것을 알 수 있게 해보자.
<div class="navigation"><p><?php posts_nav_link('∞','«« Go Forward
In Time','Go Back in Time »»'); ?></p></div>
이것은 다음과 같이 보인다:
간단하게 알아보았지만, 상상력과 웹 페이지 디자인 능력을 동원하여, 좋아하는 방식으로 만들 수 있다. 테두리, 배경 이미지, 스타일링된 텍스트 등을 추가할 수 있다.
사이트에서 이동을 하는 다른 탐색 보조 도구인 다음 글(next post)과 이전 글(previous post) 링크는 일반적으로 사이트에 공개한 개별 글 또는 문서와 같은 개별/고유주소 글의 아래에서 발견된다. 이것은 사용자가 시간 순서로 다음 또는 이전 글로 이동하게 한다.
이 템플릿 태그는 previous_post()와 next_post()이다.
Deprecated : Use: --> previous_post_link and next_post_link instead.
이 태그의 기본 사용법은 다음과 같다:
<?php previous_post(); ?> <?php next_post(); ?>
이것은 아래와 같이 보인다:
이 두 태그의 매개변수는 다음과 같다:
이것을 동작에 넣어보자.
다음 예제는 사용자가 선택하는 방향을 강조하기 위해 화살표와 함께 다음 글과 이전 글 제목을 표시한다. text 매개변수를 설정하지 않았기 때문에, 공란이 된다.
<?php previous_post('« « %', '', 'yes'); ?>
| <?php next_post('% » » ', '', 'yes'); ?>
이 두 태그를 CSS로 감싸면, 이 태그를 가지고 더 많은 일을 할 수 있다:
<div class="navigation">
<div class="alignleft">
<?php previous_post('« « %',
'Toward The Past: ', 'yes'); ?>
</div>
<div class="alignright">
<?php next_post('% » » ',
'Toward The Future: ', 'yes'); ?>
</div>
</div> <!-- end navigation -->
이것은 다음과 같이 보인다:
"Better Adjacent Post Links"라는 유용한 플러그인을 사용하면 적절한 길이로 이전 글과 다음 글의 제목을 조정할 수 있다. 이것은 사이트 디자인을 망가트리는 긴 제목이 있을 때 유용하다.
이 문서는 이 태그 사용 방법과 재미있는 일을 할 수 방법에 대한 간단한 소개이지만, 테두리, 배경 이미지, 흥미있는 글꼴 및 색상 등을 추가할 수 있다. 여러분의 몫이다. 즐기면서 해보자!
이것은 previous_post_link와 next_post_link 같이 미리 정의된 함수를 사용하지 않고 다음 글과 이전 글을 보여주는 사용자 정의 옵션이다. 이 코드는 대부분의 플러그인 개발자에게 유용할 것이다.
<?php
$postlist = get_posts('sort_column=menu_order&sort_order=asc');
$posts = array();
foreach ($postlist as $post) {
$posts[] += $post->ID;
}
$current = array_search(get_the_ID(), $posts);
$prevID = $posts[$current-1];
$nextID = $posts[$current+1];
?>
<div class="navigation">
<?php if (!empty($prevID)) { ?>
<div class="alignleft">
<a href="<?php echo get_permalink($prevID); ?>"
title="<?php echo get_the_title($prevID); ?>">Previous</a>
</div>
<?php }
if (!empty($nextID)) { ?>
<div class="alignright">
<a href="<?php echo get_permalink($nextID); ?>"
title="<?php echo get_the_title($nextID); ?>">Next</a>
</div>
<?php } ?>
</div><!-- .navigation -->
previous_post_link와 next_post_link 함수는 체이지에서 작동하지 않는다. Next Page와 Next Page, Not Next Post 플러그인이 이 문제를 해결한다.
테마의 페이지 템플릿 태그 대신 코드를 추가하고자 한다면 다음 코드를 추가한다:
<?php
$pagelist = get_pages('sort_column=menu_order&sort_order=asc');
$pages = array();
foreach ($pagelist as $page) {
$pages[] += $page->ID;
}
$current = array_search(get_the_ID(), $pages);
$prevID = $pages[$current-1];
$nextID = $pages[$current+1];
?>
<div class="navigation">
<?php if (!empty($prevID)) { ?>
<div class="alignleft">
<a href="<?php echo get_permalink($prevID); ?>"
title="<?php echo get_the_title($prevID); ?>">Previous</a>
</div>
<?php }
if (!empty($nextID)) { ?>
<div class="alignright">
<a href="<?php echo get_permalink($nextID); ?>"
title="<?php echo get_the_title($nextID); ?>">Next</a>
</div>
<?php } ?>
</div><!-- .navigation -->