Masonry の使用 - X 番目の投稿のサムネイル画像を複数の列にまたがるようにする方法は?

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

  •  28-09-2020
  •  | 
  •  

質問

具体的に言うと:

  • Masonry を使用して特定のカテゴリ内のすべての投稿を表示しています
  • 各投稿のサムネイル画像は、CSS の Fluid width 列を使用して 3 列形式でカテゴリ ページに表示されます。
  • 7 番目のサムネイル画像を 3 列すべての幅にまたがって表示する必要があります

過去に、X 番目の投稿をターゲットにするカウンターを投稿に追加して、それに応じてクラスとスタイルを適用しました。しかし、それは要素を絶対的に配置するメイソンリーの可能性があるのでしょうか？

編集

このコードを使用して、石積みページの投稿をクエリします。

    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に番号シーケンスクラスを追加する方法を理解できませんでしたが、石積みテンプレートの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; ?>
.

他のヒント

これはメーソンリーにとって問題ではないはずですが、少なくとも私はメーソンリー（またはそれに類似した同等の同位体）を持ったことがありませんでした。実際、この種のレイアウトを実現できるのは、これらのライブラリの美しさだけです。残りは適切な 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

    に関する最も情報量が多く優れた 2 つの情報源 なぜ 実際には WordPress Development に掲載されており、絶対に読む価値があります。

  2. それ post_class() 屋外では使用できません ループ は ない 真実

    さえあります セクション それについてはドキュメントで。のコーデックスページを付与されました post_class これは最善のものではありませんが、関数に 2 つのパラメータがあることは明らかです。 $classes そして $post_id. 

    post_class( $classes, $post_id );

    つまり:

    ループ外または代替ループ内の投稿を表示するには、post_class 関数の 2 番目のパラメーターを投稿 ID にすることができます。その投稿からクラスが決定されます。

    これに 1 の情報を追加します。- これをあなたの目的に合わせて使用​​することが非常に可能になります。

  3. の WP_Query オブジェクトには という名前のプロパティがあります $current_post

    $current_post
    (期間中利用可能 ザ・ループ) 現在表示されている投稿のインデックス。

    目的に合わせて使用​​できるので、車輪の再発明は必要ありません。

ライセンス： CC-BY-SA と 帰属
所属していません wordpress.stackexchange
scroll top