Masonry 사용 - 모든 X번째 게시물 썸네일 이미지를 여러 열에 걸쳐 표시하는 방법은 무엇입니까?

wordpress.stackexchange https://wordpress.stackexchange.com/questions/151589

  •  28-09-2020
  •  | 
  •  

문제

구체적으로 말하자면:

  • Masonry를 사용하여 특정 카테고리 내의 모든 게시물을 표시하고 있습니다.
  • 각 게시물의 썸네일 이미지는 CSS 유동 폭 열을 사용하여 3열 형식으로 카테고리 페이지에 표시됩니다.
  • 3개 열의 너비에 걸쳐 7번째 축소판 이미지를 표시해야 합니다.

과거에는 그에 따라 클래스와 스타일을 적용하기 위해 X번째 게시물을 대상으로 하는 카운터를 게시물에 추가했습니다.하지만 절대적으로 요소를 배치하는 Masonry에서는 그런 일이 가능할까요?

편집하다

이 코드를 사용하여 벽돌 페이지의 게시물을 쿼리하고 있습니다.

    if ( get_query_var( 'paged' ) ) {
    $paged = get_query_var( 'paged' );
} elseif ( get_query_var( 'page' ) ) {
    $paged = get_query_var( 'page' );
} else {
    $paged = 1;
}
$args = array(
    'posts_per_page' => 12, 
    'paged' => $paged
);

// Override the primary post loop
query_posts( $args );
도움이 되었습니까?

해결책 2

그래서 각 게시물 / 기사 div에 숫자 시퀀스 클래스를 추가하는 방법을 알아낼 수 없었지만 Masonry 템플릿에서 7 번째 게시물의 템플릿을 변경했습니다.

나는 이렇게했다 : 

<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while (have_posts()) : the_post(); ?>

<?php $count++; ?>
<?php if ($count == 7) : ?>

     <article class="masonry-entry masonry-3col masonry-post-no-7">
     </article>

<?php else: ?>  

     <article class="masonry-entry masonry-3col">
     </article>
<?php endif; ?>
<?php endwhile; ?>
.

다른 팁

이것은 Masonry에서는 문제가 되지 않습니다. 적어도 저는 Masonry(또는 이와 유사한 동위원소)를 사용한 적이 없습니다.실제로 이런 종류의 레이아웃을 가질 수 있다는 것은 라이브러리의 아름다움입니다.나머지는 올바른 CSS 스타일에 달려 있습니다.카운터/인덱스 클래스를 어떻게 적용하는지 모르겠지만 아래와 같이 적용하겠습니다.

function wpse151589_indexed_post_class( $classes ) {
    global $wp_query;

    // the current_post property value starts counting at 0
    // we are doing + 1 to start from 1
    $index = $wp_query->current_post + 1;

    // if you want the number to always have 3 digits
    // like 001, uncomment the next line
    //$index = sprintf( '%1$03d', $index );

    // results in classes like post-nr-1/001
    $classes[] = 'post-nr-' . $index;

    return $classes;
}
add_filter( 'post_class', 'wpse151589_indexed_post_class' );


편집하다: 댓글에 답장하기

제가 참고하고 싶은 부분이 있는데,

  1. 하다 ~ 아니다 사용 query_posts()

    해당 코덱스 페이지에도 다음과 같이 명시되어 있는 이유가 있습니다.

    이 기능은 플러그인이나 테마에서 사용하기 위한 것이 아닙니다.나중에 설명하는 것처럼 기본 쿼리를 변경하는 데 더 좋고 성능이 뛰어난 옵션이 있습니다.

    그리고 나중에:

    일반적인 게시물 쿼리의 경우 다음을 사용하세요. WP_Query 또는 get_posts.

    그리고:

    그것은 강하게 다음을 사용하는 것이 좋습니다. pre_get_posts 대신 필터링하고 확인하여 기본 쿼리를 변경하십시오. is_main_query

    가장 많은 정보를 제공하고 뛰어난 두 가지 소스 왜 실제로 여기 WordPress Development에 있으며, 읽어볼 가치가 있습니다.

  2. 저것 post_class() 밖에서는 사용할 수 없습니다 루프 ~이다 ~ 아니다 진실

    심지어 부분 문서에서 그것에 대해.다음에 대한 코덱스 페이지를 부여했습니다. post_class 최고는 아니지만 함수에 두 개의 매개변수가 있다는 것은 분명합니다. $classes 그리고 $post_id. 

    post_class( $classes, $post_id );

    이는 다음을 의미합니다.

    루프 외부 또는 대체 루프에 게시물을 표시하기 위해 post_class 함수의 두 번째 매개변수는 게시물 ID가 될 수 있습니다.그런 다음 해당 게시물에 따라 수업이 결정됩니다.

    이것은 - 1의 정보에 추가됩니다.- 이것을 귀하의 목적에 맞게 사용하는 것이 매우 가능해졌습니다.

  3. 그만큼 WP_Query 객체에는 다음과 같은 속성이 있습니다. $current_post

    $current_post
    (기간 동안 사용 가능 루프) 현재 표시되고 있는 게시물의 색인입니다.

    귀하의 목적에 맞게 사용될 수 있으므로 바퀴를 다시 만들 필요가 없습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 wordpress.stackexchange
scroll top