축소판으로 WordPress 다음 이전 게시물을 추가하는 방법

게시 됨: 2019-09-12

썸네일 페이지 매김이있는 WordPress 다음 이전 게시물 WordPress 사이트에 페이지 매김을 추가하는 것은 복잡한 과정이 아니어야 합니다. 사실, 최소한의 프로그래밍 지식만 있으면 숫자 WordPress 페이지 매김 에 대한 이전 자습서에서 설명한 것처럼 기본 포스트 페이지 매김을 숫자 워드프레스 페이지 매김 으로 쉽게 변경할 수 있습니다. 오늘은 여러 잡지 WordPress 테마에서 본 이미지가 포함된 단일 게시물의 페이지 매김을 만드는 데 중점을 두고자 합니다.

테마 디자인에 따라 단일 게시물 아래 또는 상단에 썸네일과 제목이 있는 WordPress 다음 이전 게시물을 보는 것이 일반적입니다.

썸네일 예제가 있는 WordPress 다음 이전 게시물

예를 들어 베스트셀러 WordPress 잡지 테마 중 하나인 Newspaper 에서 아래 이미지와 같이 단일 게시물에 썸네일이 포함된 페이지 매김이 있는 것을 볼 수 있습니다.

썸네일 페이지 매김으로 WordPress 다음 이전 게시물을 만드는 방법

위의 이미지는 썸네일이 있는 다음 이전 페이지 매김이 있는 WordPress 단일 게시물의 좋은 예를 나타냅니다.

이 WordPress 개발 튜토리얼이 끝나면 WordPress 플러그인 또는 테마에 생성한 코드를 쉽게 추가하고 Newspaper WordPress 테마에서 볼 수 있는 축소판과 함께 WordPress 다음 이전 게시물을 표시해야 합니다.

다음 이전 WordPress 페이지 매김 코드

간단히 말해서, 필요한 두 가지 중요한 코드 조각은 이전 또는 다음 게시물을 가져오는 코드와 특정 게시물의 추천 이미지 (다음 또는 이전)를 검색하는 다른 코드입니다.

이 튜토리얼의 설명을 위해 여러 가지 이유로 내가 가장 좋아하는 Twenty Seventeen 기본 WordPress 테마 를 사용할 것입니다. 그 이유 중 하나는 단순성입니다.

이 코드는 다른 모든 WordPress 테마 또는 플러그인에서 확실히 작동합니다. 따라서 시작을 위해 게시된 샘플 단일 게시물과 함께 테마를 설치하고 활성화했습니다.

시작하기

화살표로 표시된 아래 이미지에서 볼 수 있듯이 게시물 아래에는 다음 이전 게시물에 대한 페이지 매김이 없습니다. 이 섹션에서는 썸네일 페이지 매김과 함께 WordPress 다음 이전 게시물을 추가합니다.

썸네일 페이지 매김으로 WordPress 다음 이전 게시물을 만드는 방법

첫 번째 단계는 테마에서 single.php 파일을 찾는 것입니다. 이 파일은 _content() 바로 아래와 루프 내부에 코드를 추가할 파일이기 때문입니다.

single.php 파일을 찾은 후 다음 단계는 두 개의 WordPress 핵심 기능에 할당되는 두 개의 변수 $next 및 $prev 를 만드는 것입니다. 아래 코드 조각에 표시된 대로 각각 get_next_post() 및 get_previous_post():

 <?php
$prev = get_previous_post();
$next = get_next_post();
?>

이 두 기능은 작동 방식이 비슷합니다. 이전 함수는 이전 게시물을 검색하고 다음 함수는 다음 게시물을 objects 로 검색합니다.

데모를 위해 아래 이미지와 같이 세 개의 게시물을 게시했습니다.

썸네일 페이지 매김으로 WordPress 다음 이전 게시물을 만드는 방법

이제 이전 게시물 제목과 썸네일을 가져와서 링크를 클릭 가능하게 만드는 데 도움이 되는 각 고유 링크를 사용 a href tag 로 래핑해야 합니다.

 <a href="<?php echo get_permalink( $prev->ID ); ?>">

<?php echo apply_filters( 'the_title', $prev->post_title ); ?>

<?php echo get_the_post_thumbnail($prev->ID, '썸네일'); ?>

</a>

다음으로 다음 게시물 제목과 썸네일을 가져오고 href 태그 값으로 다음 게시물에 대한 영구 링크와 href 태그로 래핑합니다.

 <a href="<?php echo get_permalink( $next->ID ); ?>">

<?php echo apply_filters( 'the_title', $next->post_title ); ?>

<?php echo get_the_post_thumbnail($next->ID, '썸네일'); ?>

</a>

지금까지 우리는 썸네일과 함께 WordPress의 다음 이전 게시물을 표시할 수 있는 작동하는 코드를 가지고 있습니다. 이 단계까지의 전체 코드는 다음과 같아야 합니다.

 <?php

$prev = get_previous_post();
$next = get_next_post();

// 이전 게시물 제목 및 썸네일

?>

<?php echo get_the_post_thumbnail($prev->ID, '썸네일'); ?>

<a href="<?php echo get_permalink( $prev->ID ); ?>">

<?php echo apply_filters( 'the_title', $prev->post_title ); ?>

</a>

<?php

// 다음 포스트 제목과 썸네일

?>

<?php echo get_the_post_thumbnail($next->ID, '썸네일'); ?>

<a href="<?php echo get_permalink( $next->ID ); ?>">

<?php echo apply_filters( 'the_title', $next->post_title ); ?>

</a>

<?php

이 코드를 single.php 파일에 추가 하고 적절한 PHP 열기 및 닫기 태그를 사용하여 HTML을 이스케이프하고 파일을 업데이트한 다음 프런트엔드에서 변경 사항을 확인합니다.

아래 이미지와 같이 제목이 표시된 이전 게시물과 다음 게시물 썸네일이 표시되어야 합니다.

썸네일 페이지 매김으로 WordPress 다음 이전 게시물을 만드는 방법

워드프레스 스타일링 이전 다음 포스트

이제 두 개의 divs 를 도입하고 적절한 스타일을 추가하여 각 게시물을 양쪽에 띄워야 합니다. 아래와 같이 두 개의 divs 로 코드를 래핑하여 이를 달성할 수 있습니다.

 <div class="clearfix">

<?php

$prev = get_previous_post();

$next = get_next_post();

// 이전 게시물 제목 및 썸네일

?>

<div class="우편함 prevPost">

<a href="<?php echo get_permalink( $prev->ID ); ?>">

<?php echo apply_filters( 'the_title', $prev->post_title ); ?>

<?php echo get_the_post_thumbnail($prev->ID, '썸네일'); ?>

</a>

</div>

<?php

// 다음 포스트 제목과 썸네일

?>

<div class="post-box nextPost">

<a href="<?php echo get_permalink( $next->ID ); ?>">

<?php echo apply_filters( 'the_title', $next->post_title ); ?>

<?php echo get_the_post_thumbnail($next->ID, '썸네일'); ?>

</a>

</div>

</div>

<?php

div에 대한 클래스를 추가한 후 이제 아래와 같이 CSS를 사용하여 스타일을 적용할 수 있습니다.

 * {
  상자 크기: 테두리 상자;
} 

.게시물 상자 {
  왼쪽으로 뜨다;
  너비: 50%;
}

.clearfix::후 {
  콘텐츠: "";
  클리어: 둘 다;
  디스플레이: 테이블;
}
.post-box.prev게시물 img {
    최대 너비: 40%;
    높이: 자동;
}
.post-box.next게시물 img {
    최대 너비: 40%;
    높이: 자동;
}

결론

이 코드를 사용하면 썸네일이 있는 WordPress 다음 이전 게시물 페이지 매김을 쉽게 추가할 수 있습니다. 단일 포스트 페이지 매김의 시각적 표현을 개선하기 위해 더 나은 스타일을 추가할 수도 있습니다. CSS 코드를 추가한 후 아래 이미지와 같이 두 게시물의 레이아웃이 표시되어야 합니다.

썸네일 페이지 매김으로 WordPress 다음 이전 게시물을 만드는 방법

조건문을 추가하여 썸네일이나 게시물이 존재하는지 확인하는 것도 중요합니다. 예를 들어 $prev 섹션을 아래와 같이 조건으로 래핑할 수 있습니다.

 <?php

$prev_ = get_previous_post();

if ( ! empty( $prev ) ): ?>

    <a href="<?php echo get_permalink( $prev->ID ); ?>">

        <?php echo apply_filters( 'the_title', $prev_post->post_title ); ?>

    </a>

<?php endif; ?>

코드 유효성 검사는 WordPress 개발 의 중요한 부분이며 간과해서는 안 됩니다. 이 게시물이 약간의 통찰력을 제공하고 이제 사이트 또는 테마에 미리보기 이미지가 있는 단일 게시물 페이지 매김을 추가할 수 있기를 바랍니다. WordPress 블로그 페이지 매김을 만드는 방법을 배우고 싶다면 이 이전 자습서 인 WordPress에서 숫자 페이지 매김을 만드는 방법을 확인할 수 있습니다.

추가 지원이 필요한 경우 특히 코드 작동 방식을 이해하지 못하는 사용자를 위해 WordPress 테마 개발자 의 도움을 받을 수 있습니다. 저에게 연락하여 도움을 받을 수도 있습니다.