워드프레스에서 여러단 컬럼으로 표시할때 그리드로 표시하는 방법에 대한 아이디어와 페이지네이션을 두는 방법의 예시

제목에 기술한 구현이 엘리멘터로 가능한지 문의를 주셨는데요. 엘리멘터는 아니지만, 제 사이트에서도 만들어본 기능인데 아이디어 제시를 해보겠습니다. 머리가 맹맹해서 정련된 설명은 아니더라두요. 아이디어를 보시고 응용해보세요. 엘리멘터와 연동될지는 안해봤습니다.

질문주신 글 표시와 페이지네이션은 테마에서 지정합니다. 글 표시하는 테마 코드에서 아래와 같은 구조로 됩니다

<?php
if (have_posts()) :
    the_post();
    while (have_posts()) :
    ...제목과 내용 표시 코드
    endwhile;
    페이지네이션 코드
endif;
?>

코드를 보면 글 제목과 내용 표시 코드와 페이지네이션 코드가 적절한 위치에 들어감을 알 수 있습니다. 중요한 것은 have_posts() 조건문을 두어 루프를 돌리는 구조인데요. 글을 가져와서, 글 표시를 하고, 그 아래에 페이지네이션 코드를 두어 코드를 짜면, 블로그에 올려진 글 개수와, 조건문 안에 루프가 돈 만큼의 분량에 의해 페이지네이션이 표시되게 됩니다.

그리드로 표시하는 경우, while 루프로 돌리는 코드를 적절한 div 컨테이너 구조 안에 두고, CSS 설정을 하면 그리드처럼 표시할 수 있게 됩니다.

커스텀 쿼리를 날리는 것이 중요하구요. 위 구조 전에 아래와 같은 코드로 쿼리를 날려 세부 코딩을 준비합니다.

<?php
$args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'category_name' => 'Language',
    'posts_per_page' => 6,
);
$arr_posts = new WP_Query( $args );

if ($arr_posts->have_posts()) {
...
    while($arr_posts->have_posts()) {
        ...
    }
...
}
?>

이 구조를 적절히 쓰면 그리드 표시의 개별 경우를 가능하게 할 수 있습니다.

우선 네가지 경우가 생각납니다. 3단 컬럼으로 표시시 아래와 같은 상정이 가능한 구현입니다.

(1) 그리드의 각 컬럼마다 다른 카테고리를 표시할 경우
각 컬럼마다 다른 카테고리를 표시하려면 컬럼에 해당하는 div 컨테이너마다 쿼리를 따로 날려서 위의 구조를 두면 됩니다. 플렉스 박스 방식으로 세개의 div 컨테이너를 두고, 각 컨테이너 내부마다 커스텀 쿼리를 날려서 글을 표시하는 방법인데요.

컨테이너마다 다른 쿼리 객체가 쓰여서, 위 구조에서 보이는 조건문과 루프를 각각 둡니다. 각 컨테이너마다의 연동은 안합니다. 각각 다른 $arr_posts를 운용합니다. $args에 대입하는 배열 요소에 각기 다른 옵션을 주면 됩니다. ‘category_name’ => ‘Language’ 를 다른 카테고리명으로 지정합니다.

(2) 모든 컬럼에 같은 카테고리를 표시하되 각각의 컬럼마다 10개씩 표시하기
(1)에서와 같이 플렉스 방식으로 세개의 div 컨테이너를 두고 커스텀 쿼리 날려서 1단 컬럼에서 표시한 글 개수만큼은 2단 컬럼에서 제외하고, 2단 컬럼에서 표시한 글 개수만큼은 3단 컬럼에서 제외하는 방법도 있습니다. 이를 잘 쓰면 컬럼마다 커스텀 쿼리로 글 표시 시작 지점에서 표시될 글을 각 컬럼마다 다르게 지정할 수 있습니다. 1단 컬럼에 10개의 글을 표시했다면, 2단 컬럼에는 11~20개까지, 3단 컬럼에는 21~30개까지 표시하는 것입니다. 템플릿 태그 중에 해당 함수 호출시 글 개수만큼 제외 옵션을 인자로 넘기는게 있을 것이므로 이를 활용하면 됩니다. 페이지네이션 코드가 각 컬럼마다 표시가 될지는 확인을 안했습니다.

(3) 플러그인 중에 숏코드를 제공하는 것을 골라서 페이지에 배치하기
위의 방법 말고 플러그인 쓰는 것도 방법이 됩니다. 플러그인 중에서는 글 표시 기능을 상세하게 지정가능한 플러그인이 있는데요. 카테고리 지정도 되고, 제한된 수만 보이게도 되고, 랜덤하게 표시하게 하거나, 글 몇개는 제외시키는 기능이 제공되는 플러그인이 있는데, 이중에서 글 몇개 제외시키는 기능을 쓰면 됩니다. 찾아보고 있으면 쓰기. (2)에서처럼 1단 컬럼에 10개 표시하면 2단 컬럼에서는 11개부터 20개까지, 3단 컬럼에서는 21개부터 30개까지… 등으로 쿼리날려 표시되게 합니다. 이 글 표시 제한 기능에 더해 숏코드 기능이 제공되면 페이지에 배치가 더 쉬워지죠. 찾은 플러그인에서 글 표시 기능이 상세하게 지정이 되지만 숏코드 기능이 없는 경우에도 플러그인 소스코드를 고치면 숏코드도 제공되게 바꿀 수 있을 것입니다.

(4) 그리드 형식으로 글 표시하기
컬럼마다 쿼리 날리기보다, 한개의 div 컨테이너를 두고 display: inline-block; 으로 두되, 하위 컨테이너를 두고, 쿼리날려 글을 불러와서 포스트 루프마다 글 한개씩 표시하는 코드를 두는 방법도 있네요. 컨테이너마다 CSS로 너비 조정을 합니다. 그러면 글마다 지정된 너비만큼 글 블록이 밀려서 3단 컬럼 효과가 나게 할 수 있습니다.

<?php
<div class="container">
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'category_name' => 'Language',
        'posts_per_page' => 6,
    );
    $arr_posts = new WP_Query( $args );

    if ( $arr_posts->have_posts() ) :
        echo '<div style="display: inline-block;">';
            while ( $arr_posts->have_posts() ) :
                $arr_posts->the_post();
?>
                <div class="post-area"> 
                    <div class="post-thumbnail-img"><?php echo get_the_post_thumbnail( $page->ID, 'medium' ); ?></div>
                        <div class="article-heading"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                        <div class="horizontal-spacer-20">&nbsp;</div>
                        <div class="article-excerpt">
                            <?php 
                                $excerpt = get_the_excerpt(); 
                                $excerpt = substr( $excerpt, 0, 240 );
                                $result = substr( $excerpt, 0, strrpos( $excerpt, ' ' ) );
                                echo $result . ' ...' . '<br>';
                            ?>
                                <small>
                                    <?php the_time('l, F jS, Y') ?> at 
                                    <?php the_time() ?> filed under
                                    <?php the_category(', ') ?>
                                </small>
                        </div>
                    </div>
                </div>
<?php
        endwhile;
        wp_reset_postdata();
        echo '</div>';
        the_posts_pagination();
    endif;
?>

<?php
    $category_id = get_cat_ID( 'Language' );
    $category_link = get_category_link( $category_id );
?>
</div>

처럼 하니, .container와 .post-area와 .article-excerpt의 CSS 너비만큼 컬럼수가 결정되는 것 같습니다.

.container {
    vertical-align: top;
}

.container .post-area {
    margin-top: 35px;
    margin-left: 15px;
    display: inline-block;
    overflow-wrap: break-word;  
    word-wrap: break-word;
    vertical-align: top;
}

.container .post-area .article-heading {
    width: 300px;
    font-weight: bold;
    overflow-wrap: break-word;  
    word-wrap: break-word;
}

.container .post-area .article-excerpt {
    width: 300px;
}

https://codex.wordpress.org 나 https://developers.wordpress.org 에서 찾아보면 워드프레스 API가 해설되어 있으니 참고해서 코딩 방법을 찾으면 됩니다.

답글 남기기 응답 취소