WordPress.org

Codex

User:Bhkyung/ko:Next and Previous Links

This article is marked as in need of editing. You can help Codex by editing it.


다음(Next)이전(Previous) 글 링크는 방문자에게 워드프레스 사이트를 안내한다. 강력한 사이트 탐색 링크를 만들 때, 방문자를 머물게 하는 가장 강력한 도구는 이 링크 태그이다.

방문자가 사이트에서 이동하는 두 개의 태그가 있다: 이전(Previous)다음(Next) 링크를 둘 다 표시하는 posts_nav_link()이전(Previous) 또는 다음(Next) 링크 중의 하나를 표시하는 previous_post()next_post() 한 쌍의 조합이다. 이 문서에서 이 두 개의 태그 작동 방법을 살펴본다.

참고: 이 경우 "이전(Previous)" 및 "다음(Next)"은 게시된 순서대로 글을 참조한다. 시간적으로 특정 방향이 아니다. 워드프레스는 기본적으로 가장 최근 글부터 시간적으로 거꾸로 표시하기 때문에, 많은 사람들이 혼란스러워 한다. 이 기본 순서를 사용하면, "다음(Next)"은 시간적으로 뒤로 이동할 것이다. 1페이지 뒤에 있는 "다음(next)" 페이지는 2페이지이고, 오래된 글로 이동할 것이다. 글의 순서가 변경되면 (템플릿에 있는 query_posts를 수동으로 사용하여), 링크는 다른 방향을 가리키게 된다. 이 코덱스 문서는 설명 없이 두 방법을 모두 사용한다. 단지 예제 코드이기 때문이다. 이 기능은 시간적인 순서와는 별도의 순서를 나타낸다는 사실을 명심해야 한다.

Contents

posts_nav_link

사이트 탐색 링크의 첫 번째는 개별/고유주소 페이지가 아닌 웹페이지에서만 제공된다. 카테고리, 아카이브(archives), 검색 및 인덱스 페이지와 같은 페이지에서만 제공된다. 이것은 템플릿 태그 posts_nav_link()이다. 이 태그는 워드프레스 루프 안의 페이지 아래에 두 개의 링크를 만들어, 시간적인 순서로 다음(next)이전(previous) 페이지를 표시한다.

기본적으로, posts_nav_link는 다음과 같이 보인다:

« Previous PageNext Page »

이것은 종종 아래와 같이 단락 코드 또는 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('&#8734;','Go 
Forward In Time','Go Back in Time'); ?></p></div>

그러면 이것은 다음과 같이 보인다:

Go Forward in TimeGo Back in Time

여기에서 멈추지 말고, 실제로 방문자의 관심을 끄는 특수 문자를 더 추가해서, 방문자가 이 페이지에서 볼 수 있는 것 보다 더 많은 것이 있다는 것을 알 수 있게 해보자.

<div class="navigation"><p><?php posts_nav_link('&#8734;','&laquo;&laquo; Go Forward 
In Time','Go Back in Time &raquo;&raquo;'); ?></p></div>

이것은 다음과 같이 보인다:

«« Go Forward in TimeGo Back in Time »»

간단하게 알아보았지만, 상상력과 웹 페이지 디자인 능력을 동원하여, 좋아하는 방식으로 만들 수 있다. 테두리, 배경 이미지, 스타일링된 텍스트 등을 추가할 수 있다.

Next와 Previous Posts

사이트에서 이동을 하는 다른 탐색 보조 도구인 다음 글(next post)이전 글(previous post) 링크는 일반적으로 사이트에 공개한 개별 글 또는 문서와 같은 개별/고유주소 글의 아래에서 발견된다. 이것은 사용자가 시간 순서로 다음 또는 이전 글로 이동하게 한다.

이 템플릿 태그는 previous_post()next_post()이다.

Deprecated : Use: --> previous_post_link and next_post_link instead.


이 태그의 기본 사용법은 다음과 같다:

<?php previous_post(); ?>    <?php next_post(); ?>

이것은 아래와 같이 보인다:

previous post: A Story for One and All    next post: A Story for Only One


이 두 태그의 매개변수는 다음과 같다:

format 
글의 고유주소를 표시하기 위해 %와 함께 사용되는 텍스트. 기본은 고유주소(permalink)이다.
text 
고유주소 전에 표시되는 텍스트. 기본은 "다음 글(next post)"과 "이전 글(previous post)"이다.
title 
이것은 링크 텍스트로 사용될 글 제목을 "사용하거나(on)" "사용하지 않게(off)"한다. 기본으로, "예(yes)"이다. "아니오(no)"로 설정하면, text 매개변수와 format에 있는 텍스트만 보이게 된다.

이것을 동작에 넣어보자.

다음 예제는 사용자가 선택하는 방향을 강조하기 위해 화살표와 함께 다음 글과 이전 글 제목을 표시한다. text 매개변수를 설정하지 않았기 때문에, 공란이 된다.

<?php previous_post('&laquo; &laquo; %', '', 'yes'); ?>
| <?php next_post('% &raquo; &raquo; ', '', 'yes'); ?>
« « A Story for One and All    |    A Story for One » »

이 두 태그를 CSS로 감싸면, 이 태그를 가지고 더 많은 일을 할 수 있다:

<div class="navigation">
<div class="alignleft">
<?php previous_post('&laquo; &laquo; %',
 'Toward The Past: ', 'yes'); ?>
</div>
<div class="alignright">
<?php next_post('% &raquo; &raquo; ',
 'Toward The Future: ', 'yes'); ?>
</div>
</div> <!-- end navigation -->

이것은 다음과 같이 보인다:

« « Toward the Past: A Story for One and All       Toward the Future: A Story for One » »

"Better Adjacent Post Links"라는 유용한 플러그인을 사용하면 적절한 길이로 이전 글과 다음 글의 제목을 조정할 수 있다. 이것은 사이트 디자인을 망가트리는 긴 제목이 있을 때 유용하다.

이 문서는 이 태그 사용 방법과 재미있는 일을 할 수 방법에 대한 간단한 소개이지만, 테두리, 배경 이미지, 흥미있는 글꼴 및 색상 등을 추가할 수 있다. 여러분의 몫이다. 즐기면서 해보자!

다음 글과 이전 글 사용자 정의

이것은 previous_post_linknext_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_linknext_post_link 함수는 체이지에서 작동하지 않는다. Next PageNext 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 -->


자료