워드프레스에서 Load More Button(더 보기 버튼)을 추가하는 방법

요즘 나오는 유료 워드프레스 테마에서는 최신 글 리스트나 아카이브(보관물 페이지)에서 페이지네이션 유형으로 Load More 버튼이나 무한 스크롤을 선택할 수 있는 옵션을 제공하는 경우가 많습니다.

예를 들어, 아바다 테마에서는 블로그 옵션에서 Pagination Type으로 페이지 매김(Pagination), 무한 스크롤(Infinite Scroll), 더 보기 버튼(Load More Button) 중에서 선택할 수 있습니다.

아바다 페이지 매김 옵션

이 블로그에 설치된 Publisher 테마에서도 비슷한 옵션을 제공합니다.

Publisher 테마 - Load More 버튼

하지만 무료 테마에서는 보통 기본적인 Pagination 옵션만을 제공하고 무한 스크롤이나 Load More 버튼을 추가하는 옵션을 제공하지 않습니다. '더 보기' 버튼을 추가하고 싶은 경우 Ajax Load More라는 플러그인을 사용할 수 있습니다.

워드프레스에 Ajax Load More 버튼 추가하기

워드프레스 Ajax Load More 플러그인

알림판 > 플러그인 > 새로 추가에서 Ajax Load More를 검색하여 설치하고 활성화합니다. 그러면 관리자 페이지의 왼쪽 사이드바에 Ajax Load More 메뉴가 추가됩니다.

Ajax Load More 설정 메뉴

먼저 Ajax Load More > Settings 페이지로 이동합니다. 여기에서 Load More 버튼의 컬러 등을 설정할 수 있습니다.

Ajax Load More 버튼 컬러 설정

이 페이지에서 Button/Loading 스타일도 지정할 수 있습니다. 원하는 경우 Load More 버튼 대신 무한 스크롤을 선택할 수도 있습니다.

Ajax Load More 버튼 스타일 설정

Infinite Scroll(무한 스크롤)을 이용하는 경우 버튼 대신 위의 그림과 같이 스크롤될 때 표시할 애니메이션 아이콘을 선택할 수 있습니다.

다음으로 Ajax Load More > Repeater Template 페이지로 이동하여 포스트를 표시할 템플릿을 추가해야 합니다.

Ajax Load More 템플릿

위의 그림과 같이 플러그인에서 포스트를 표시하는 워드프레스 루프가 포함된 기본 템플릿을 제공합니다. 하지만 이 부분을 사용 중인 테마의 index, 아카이브, 블로그 페이지에서 사용되는 실제 코드로 대체해야 합니다.

예를 들어, Twenty Seventeen 테마의 경우 /template-parts/post/content.php 내의 코드가 포스트를 표시하는 루프문에 사용됩니다.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
if ( is_sticky() && is_home() ) :
echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );
endif;
?>
<header class="entry-header">
<?php
if ( 'post' === get_post_type() ) {
echo '<div class="entry-meta">';
if ( is_single() ) {
twentyseventeen_posted_on();
} else {
echo twentyseventeen_time_link();
twentyseventeen_edit_link();
};
echo '</div><!-- .entry-meta -->';
};

if ( is_single() ) {
the_title( '<h1 class="entry-title">', '</h1>' );
} elseif ( is_front_page() && is_home() ) {
the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
} else {
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
}
?>
</header><!-- .entry-header -->

<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
</a>
</div><!-- .post-thumbnail -->
<?php endif; ?>

<div class="entry-content">
<?php
/* translators: %s: Name of current post */
the_content(
sprintf(
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
get_the_title()
)
);

wp_link_pages(
array(
'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
'after' => '</div>',
'link_before' => '<span class="page-number">',
'link_after' => '</span>',
)
);
?>
</div><!-- .entry-content -->

<?php
if ( is_single() ) {
twentyseventeen_entry_footer();
}
?>

</article><!-- #post-## -->
// Twenty Seventeen 테마의 /template-parts/post/content.php 파일 내용

Repeater Template의 기본 템플릿을 삭제하고 위의 <article>...</article> 부분의 코드를 복사하여 붙여넣도록 합니다. 이 부분은 사용하는 테마에 따라 다릅니다. 테마를 분석하여 게시글을 표시하는 루프문에 사용되는 코드를 찾도록 합니다.

코드를 붙여넣었으면 맨 아래의 "Save Template(템플릿 저장)"을 클릭하여 템플릿을 저장하도록 합니다.

이제는 Ajax Load More > Shortcode Builder(쇼트코드 빌더) 페이지로 이동하여 숏코드를 생성해야 합니다.

이 페이지에서 버튼에 표시되는 텍스트를 지정할 수 있습니다. Button Labels(버튼 레이블) 섹션으로 이동합니다. 기본적으로 Older Posts(이전 포스트)가 라벨로 지정되어 있습니다.

워드프레스 Ajax 더 보기 버튼

이 문구를 원하는 대로 변경합니다. 그리고 자동으로 스크롤할 지, 아니면 사용자가 버튼을 눌러야 포스트를 로드할 지를 선택할 수 있습니다.

워드프레스 더 보기 버튼 생성

Scrolling 아래의 Enable Scrolling(스크롤 활성화) 옵션을 True 또는 False 중에서 선택합니다. 기본적으로 True가 선택되어 있습니다. 버큰을 클릭해야 로드되도록 하려면 False를 선택합니다.

나머지 옵션도 살펴보고 적절히 지정하도록 하도록 합니다. 설정이 모두 완료되었다면 오른쪽의 Copy Shortcode를 클릭하여 숏코드를 복사하도록 합니다.

Ajax 더 보기 버튼 추가하기

이제는 이 숏코드를 버튼이 표시될 위치에 붙여넣기해야 합니다.

index.php 파일이나 archive 템플릿 파일에서 endwhile; 태그 바로 다음에 다음과 같은 형식으로 숏코드를 추가하도록 합니다.

echo do_shortcode('[ajax_load_more container_type="div" post_type="post" scroll="false" button_label="더 보기"]');

이 작업을 수행하기 전에 자식 테마를 만들어서 작업해야 추후에 테마를 업데이트하더라도 수정 사항이 사라지지 않습니다.

이제 저장하고 확인해보면 Load More 버튼이 추가되어 있고, 클릭하면 포스트를 로드할 것입니다.

워드프레스 Load More 버튼

위의 그림은 Twenty Seventeen 테마의 index.php 파일에 숏코드를 추가했을 때의 모양을 보여줍니다. 맨 아래의 Pagination 부분은 테마 파일에서 삭제하면 됩니다.

조금 복잡하게 보이지만 실제 해보면 그리 어렵지 않습니다. 이 작업을 수행하기 전에 혹시 모를 만약의 사태에 대비하기 위해 백업을 반드시 실시하시기 바랍니다.

마치며

이상으로 Load More 기능을 지원하지 않는 워드프레스 테마에 Ajax Load More 플러그인을 사용하여 Load More 버튼을 추가하는 방법을 살펴보았습니다.

참고로 무한 스크롤되는 보관물 페이지를 사용할 경우 SEO에 불리할 수 있습니다. 최소한 Load More 버튼을 추가하는 방법을 고려해볼 수 있습니다. 무한 스크롤이나 '더 보기' 버튼을 사용하면 사용자들이 별도의 페이지로 이동할 때보다 배너 광고를 볼 기회가 줄어들어 구글 애드센스 광고 수익에도 부정적인 영향을 미칠 수도 있을 것입니다.

참고:


댓글 남기기

* 이메일 주소는 공개되지 않습니다.