WordPress에 다음/이전 링크를 추가하는 방법(궁극적인 가이드)
게시 됨: 2022-05-10WordPress에 다음/이전 링크를 추가하시겠습니까?
다음 및 이전 링크는 사용자가 다음 또는 이전 게시물을 볼 수 있도록 하는 동적 링크입니다.
이 기사에서는 WordPress에 다음/이전 링크를 쉽게 추가하는 방법과 이를 최대한 활용하는 방법을 보여줍니다.
WordPress의 다음/이전 링크는 무엇입니까?
다음/이전 링크는 사용자가 다음 또는 이전 게시물로 쉽게 이동할 수 있도록 하는 WordPress 테마에 의해 추가된 동적 링크입니다. 이렇게 하면 페이지뷰를 늘리고 이탈률을 줄이는 데 도움이 됩니다.
기본적으로 WordPress 블로그 게시물은 역순으로 표시됩니다(최신 게시물 먼저).
즉, 다음 게시물은 사용자가 보고 있는 현재 게시물 다음에 게시된 게시물이고 이전 게시물은 현재 게시물보다 먼저 게시된 게시물임을 의미합니다.
다음/이전 링크를 통해 사용자는 개별 기사 및 블로그 아카이브 페이지를 쉽게 탐색할 수 있습니다. 또한 블로그에 대한 더 많은 페이지뷰를 얻는 데 도움이 됩니다.
대부분의 WordPress 테마에는 각 게시물 하단에 자동으로 표시되는 다음 및 이전 게시물 링크가 내장되어 있습니다. 그러나 일부 테마는 테마를 표시하지 않거나 WordPress 웹사이트에서 테마가 표시되는 위치와 방법을 사용자 정의할 수 있습니다.
즉, WordPress에서 다음 및 이전 링크를 쉽게 추가하는 방법을 살펴보겠습니다.
다음은 이 기사에서 다룰 주제 목록입니다.
- 플러그인을 사용하여 WordPress에 다음/이전 링크 추가
- WordPress 테마에 다음/이전 링크 추가
- WordPress의 다음/이전 링크 스타일링
- 페이지에 다음/이전 링크 추가
- 축소판으로 다음/이전 링크 추가
- WordPress에서 다음/이전 링크 제거
플러그인을 사용하여 WordPress에 다음/이전 링크 추가
이 방법은 웹사이트에 코드를 추가하는 데 익숙하지 않은 초보자에게 더 쉽고 권장됩니다.
먼저 CBX Next Previous Article 플러그인을 설치하고 활성화해야 합니다. 자세한 내용은 WordPress 플러그인 설치 방법에 대한 단계별 가이드를 참조하세요.
활성화 시 설정 » CBX 다음 이전 페이지를 방문해야 합니다. 여기에서 웹사이트의 다음 링크와 이전 링크를 표시할 위치를 선택할 수 있습니다.
플러그인을 사용하면 단일 게시물, 페이지, 아카이브 페이지 등에 다음 및 이전 링크 화살표를 표시할 수 있습니다.
다음 및 이전 링크를 더 관련성 있게 만들기 위해 동일한 카테고리 또는 태그의 다음 및 이전 게시물을 표시하도록 선택할 수도 있습니다.
플러그인의 무료 버전에서는 다음 및 이전 기사에 대한 화살표만 표시할 수 있습니다. 프로 버전으로 업그레이드하여 슬라이드인 팝업과 같은 다른 디스플레이 옵션을 잠금 해제할 수 있습니다.
동일한 분류의 다음/이전 게시물을 표시하도록 선택한 경우 분류별 탐색 탭으로 전환해야 합니다.
여기에서 다음 및 이전 링크를 선택하는 데 사용할 분류법을 선택해야 합니다.
선택적으로 플러그인을 사용하면 Google Analytics를 사용하여 클릭을 추적할 수도 있습니다. 이 기능을 사용하려면 먼저 WordPress에 Google Analytics를 설치해야 합니다.
그런 다음 플러그인 설정에서 Google Analytics 탭으로 전환하고 클릭 추적 옵션을 활성화하십시오.
완료되면 설정 저장 버튼을 클릭하여 변경 사항을 저장하는 것을 잊지 마십시오.
이제 WordPress 웹사이트를 방문하여 작동 중인 다음/이전 링크를 볼 수 있습니다.
이 방법은 더 쉽지만 많은 유연성을 제공하지 않습니다. 예를 들어 무료 버전은 다음 또는 이전 게시물 제목을 표시하지 않습니다.
더 많은 유연성이 필요하면 계속 읽으십시오.
WordPress 테마에 다음/이전 링크 추가
이 방법을 사용하려면 WordPress 테마 파일을 편집해야 합니다. 이전에 이 작업을 수행하지 않았다면 WordPress에서 코드를 복사하여 붙여넣는 방법에 대한 가이드를 살펴보세요.
다음으로 FTP 클라이언트를 사용하거나 WordPress 호스팅 제어판의 파일 관리자 앱을 사용하여 WordPress 웹사이트에 연결해야 합니다.
연결되면 /wp-content/themes/your-current-theme/ 폴더로 이동해야 합니다.
이제 single.php 파일을 찾아야 합니다. 웹사이트에 단일 게시물 항목을 표시하는 역할을 하는 파일입니다.
일부 WordPress 테마는 single.php 파일 내의 다른 파일을 참조할 수 있습니다. 이러한 파일을 템플릿 부분이라고 하며 WordPress 테마의 템플릿 부분 폴더 안에 있습니다.
자세한 내용은 WordPress 테마에서 편집할 파일에 대한 기사를 참조하십시오.
그런 다음 템플릿 파일에서 다음 및 이전 링크를 표시하려는 위치에 다음 코드를 복사하여 붙여넣기만 하면 됩니다.
<?php the_post_navigation(); ?>
이제 변경 사항을 저장하고 웹사이트를 방문하여 작동 중인 다음/이전 링크를 볼 수 있습니다.
위의 템플릿 태그는 단순히 게시물 제목을 앵커 텍스트로 사용하여 다음 및 이전 게시물에 대한 링크를 표시합니다. 이것이 다음 및 이전 기사에 대한 링크라고 말하지는 않습니다.
이것을 약간 변경하고 사용자에게 이러한 링크에 대한 컨텍스트를 제공하겠습니다. the_post_navigation 템플릿 태그에 사용 가능한 매개변수를 추가하여 이를 수행합니다.
위의 코드를 다음으로 바꾸면 됩니다.
<?php the_post_navigation( array(
'prev_text' => __( 'Previous Article: %title' ),
'next_text' => __( 'Next Article: %title' ),
) );
?>
이제 변경 사항을 저장하고 웹 사이트를 미리 볼 수 있습니다.
테스트 사이트에서 본 결과는 다음과 같습니다.
다음 및 이전 게시물 제목과 함께 특수 문자와 화살표를 사용할 수도 있습니다.
코드를 다음으로 바꾸면 됩니다.
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
) );
?>
다음은 테스트 웹사이트에서 이 코드를 본 모습입니다.
이제 사용자가 현재 보고 있는 기사와 관련성이 높은 다음 링크와 이전 링크를 만들고 싶다고 가정해 보겠습니다.
동일한 카테고리 또는 태그의 다음 및 이전 링크를 표시하여 이를 수행할 수 있습니다.
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
'in_same_term' => true,
'taxonomy' => __( 'category' ),
) );
?>
이 코드는 WordPress에 동일한 범주의 다음 및 이전 게시물을 표시하도록 지시합니다. 필요한 경우 분류 매개변수를 태그 또는 기타 사용자 정의 분류로 변경할 수 있습니다.
WordPress의 다음/이전 링크 스타일링
워드프레스에서 다음/이전 링크를 추가하는 방법을 배웠으니 이제 제대로 스타일을 지정하는 방법을 살펴보겠습니다.
기본적으로 WordPress는 게시물 탐색 링크에 여러 기본 CSS 클래스를 자동으로 추가합니다. WordPress 테마에서 이러한 CSS 클래스를 사용하여 이러한 링크의 스타일을 지정할 수 있습니다.
다음은 테마에 추가할 수 있는 몇 가지 기본 CSS입니다.
.nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
display: flex;
}
.nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
flex: 1 0 50%;
}
.nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
text-align: end;
flex: 1 0 50%;
}
이 기본 CSS는 단순히 다음 링크와 이전 링크를 나란히 표시하지만 같은 줄의 다른 면에 표시합니다.
배경색, 호버 효과 등을 추가하여 탐색 링크를 눈에 띄게 만들 수도 있습니다.
다음은 시작점으로 사용할 수 있는 몇 가지 샘플 CSS 코드입니다.
.post-navigation {
background-color:#f3f9ff;
padding:0px;
}
.nav-previous, .nav-next{
padding:10px;
font-weight:bold
}
.nav-previous:hover,.nav-next:hover {
background-color:#0170b9;
}
.nav-previous:hover a:link ,.nav-next:hover a:link {
color:#fff;
}
이 코드는 링크 텍스트의 스타일을 지정하고 배경색과 호버 효과를 추가하여 다음 및 이전 링크를 더 눈에 띄게 만듭니다.
WordPress 페이지에 다음/이전 링크 추가
일반적으로 게시물 탐색 링크는 WordPress의 블로그 게시물에 사용됩니다. 해당 항목이 역순으로 게시되기 때문입니다.
반면에 WordPress 페이지는 일반적으로 시간순으로 게시되지 않습니다. 자세한 내용은 WordPress의 게시물과 페이지의 차이점에 대한 가이드를 참조하세요.
그러나 일부 사용자는 다음 페이지를 쉽게 찾을 수 있도록 페이지 탐색을 표시해야 할 수 있습니다.
운 좋게도 이전에 페이지에 사용한 것과 동일한 코드를 사용할 수 있습니다. 그러나 page.php 템플릿 내부에 코드를 추가해야 합니다.
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
) );
?>
데모 사이트에서 본 모습은 다음과 같습니다.
축소판으로 WordPress에 다음/이전 링크 추가
다음 및 이전 링크를 더 눈에 띄게 만들고 싶습니까? 이미지는 사용자의 관심을 끌고 이러한 링크를 더 매력적으로 만드는 가장 쉬운 방법입니다.
게시물 썸네일 또는 추천 이미지 옆에 다음 및 이전 링크를 추가해 보겠습니다.
먼저 테마의 functions.php 파일이나 사이트별 플러그인에 다음 코드를 추가해야 합니다.
function wpb_posts_nav(){
$next_post = get_next_post();
$prev_post = get_previous_post();
if ( $next_post || $prev_post ) : ?>
<div class="wpb-posts-nav">
<div>
<?php if ( ! empty( $prev_post ) ) : ?>
<a href="<?php echo get_permalink( $prev_post ); ?>">
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
<?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
</div>
</div>
<div>
<strong>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
<?php _e( 'Previous article', 'textdomain' ) ?>
</strong>
<h4><?php echo get_the_title( $prev_post ); ?></h4>
</div>
</a>
<?php endif; ?>
</div>
<div>
<?php if ( ! empty( $next_post ) ) : ?>
<a href="<?php echo get_permalink( $next_post ); ?>">
<div>
<strong>
<?php _e( 'Next article', 'textdomain' ) ?>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
</strong>
<h4><?php echo get_the_title( $next_post ); ?></h4>
</div>
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
<?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
</div>
</div>
</a>
<?php endif; ?>
</div>
</div> <!-- .wpb-posts-nav -->
<?php endif;
}
이 코드는 단순히 추천 이미지 또는 게시물 썸네일과 함께 다음 및 이전 게시물을 표시하는 기능을 생성합니다.
다음으로, 링크를 표시하려는 테마의 single.php 파일에 wpb_posts_nav() 함수를 추가해야 합니다.
테마에 이미 다음 및 이전 링크가 있는 경우_post_navigation() 함수가 포함된 줄을 찾아 삭제하는 것이 좋습니다.
이제 다음 코드를 추가하여 사용자 지정 다음 및 이전 링크를 표시합니다.
<?php wpb_posts_nav(); ?>
코드를 추가한 후 변경 사항을 저장하고 웹사이트를 방문하여 작동 중인 링크를 확인하는 것을 잊지 마십시오.
이제 이러한 링크가 깨끗해 보이지 않는다는 것을 알 수 있습니다.
스타일을 지정하기 위해 몇 가지 사용자 정의 CSS를 추가하여 변경해 보겠습니다.
.wpb-posts-nav {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 50px;
align-items: center;
max-width: 1200px;
margin: 100px auto;
}
.wpb-posts-nav a {
display: grid;
grid-gap: 20px;
align-items: center;
}
.wpb-posts-nav h4,
.wpb-posts-nav strong {
margin: 0;
}
.wpb-posts-nav a svg {
display: inline-block;
margin: 0;
vertical-align: middle;
}
.wpb-posts-nav > div:nth-child(1) a {
grid-template-columns: 100px 1fr;
text-align: left;
}
.wpb-posts-nav > div:nth-child(2) a {
grid-template-columns: 1fr 100px;
text-align: right;
}
.wpb-posts-nav__thumbnail {
display: block;
margin: 0;
}
.wpb-posts-nav__thumbnail img {
border-radius: 10px;
}
이제 변경 사항을 저장하고 웹사이트를 방문하여 축소판 그림이 있는 다음 및 이전 링크를 볼 수 있습니다.
테스트 사이트에서 본 결과는 다음과 같습니다.
자세한 내용은 이전 및 다음 게시물 링크에 썸네일을 추가하는 방법에 대한 가이드를 참조하세요.
보너스: WordPress에서 다음 및 이전 링크 제거
일부 사용자는 WordPress에서 다음 및 이전 링크를 제거하기를 원할 수 있습니다.
예를 들어, 일부 사용자는 이러한 링크가 덜 유용하다는 것을 알 수 있습니다. 관련 게시물이나 인기 게시물을 대신 표시하려는 경우도 있습니다.
WordPress에서 다음 및 이전 링크를 제거하는 방법에는 두 가지가 있습니다.
방법 1. WordPress 테마에서 코드 삭제
WordPress에서 다음 및 이전 링크를 제거하려면 WordPress 테마에서 링크를 표시하는 코드를 제거해야 합니다.
이 접근 방식의 문제는 테마를 업데이트하는 즉시 삭제된 코드가 다시 나타난다는 것입니다.
이를 방지하려면 자식 테마를 만들어야 합니다.
다음으로 상위 테마에서 다음 및 이전 링크를 표시하는 코드를 찾아야 합니다.
일반적으로 single.php 또는 content-single.php 템플릿에서 찾을 수 있습니다.
기본적으로 다음 기능이 포함된 코드를 찾습니다.
<?php the_post_navigation() ?>
이 코드는 약간 다른 형식과 매개변수를 가질 수 있습니다. 예를 들어 테스트 사이트에서 테마는 이 코드를 사용하여 링크를 표시했습니다.
the_post_navigation(
array(
'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Previous:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Next:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
)
);
하위 테마를 사용하는 경우 하위 테마에서 이 특정 템플릿을 복제한 다음 다음 또는 이전 링크를 표시하는 데 사용되는 줄을 삭제해야 합니다.
상위 테마에서 삭제하려는 경우에도 삭제할 수 있습니다.
코드를 삭제하면 WordPress에서 다음 및 이전 링크가 표시되지 않습니다.
방법 2. 다음 및 이전 게시물 링크 숨기기
이 방법은 실제로 다음 및 이전 링크를 제거하지 않습니다. 대신 인간 독자에게는 보이지 않게 만듭니다.
다음 사용자 정의 CSS를 WordPress 테마에 추가하기만 하면 됩니다.
nav.navigation.post-navigation {
display: none;
}
변경 사항을 저장하고 웹 사이트를 방문하여 탐색 링크가 사라지는 것을 확인하는 것을 잊지 마십시오.
이 기사가 WordPress에서 다음 및 이전 링크를 쉽게 추가하는 방법을 배우는 데 도움이 되었기를 바랍니다. 또한 최고의 웹 디자인 소프트웨어를 선택하는 방법에 대한 가이드나 최고의 도메인 등록 기관에 대한 전문가 비교를 보고 싶을 수도 있습니다.
이 기사가 마음에 들면 WordPress 비디오 자습서용 YouTube 채널을 구독하십시오. Twitter와 Facebook에서도 찾을 수 있습니다.