web-dev-qa-db-ja.com

カテゴリアライブページで複数列のループをどこのように分割しますか。

私はこのように複数のループを持つカスタムページテンプレートを作成しています http://demos.gabfirethemes.com/advanced/category/football/

投稿が複数の列に分割されているのがわかります。おすすめの投稿が1つ、次に2つの投稿、右側に4つの投稿があります。

私は2列に投稿を得ることしかできませんでした。

this のようにループを複数の列に分割する方法を教えてください。

looparchives
2
Nisha_at_Behance

基礎

列はCSSによって管理されます。 Bootstrapや Blueprint CSS などのCSSフレームワークを使用しているのであれば、記事に追加できるクラスはありません。/postコンテナ。これにより、必要な量の列に浮くようになります。

ブループリントCSS

Blueprint Cssの場合、これはspan-8（24列のグリッド上の3列のレイアウト）で、最後の投稿の行に添付されたlastのクラスになります。

Twitterのブートストラップ

Twitters Bootstrapの場合、すべての行をラップし、クラスrowを持つコンテナ付きのspan4（12列グリッド上の3列レイアウト）です。

使い方

ですから、どの投稿であなたが（あなたのクエリの内側にいるのか - 頭の中では0でほとんどのプログラミング言語でカウントが始まることを覚えておいてください）st その後、特定の投稿にクラスを追加（またはMarkUpを挿入）します。他のすべての投稿には、デフォルトクラスまたはMarkUpを追加するだけです。

例の説明

以下の例では、データベース関数のインスタンスを保持する$wpdbグローバルを使用しています。このようにして、カウンタを取得するためにインスタンスvar current_postをチェックすることができます。それから++を使ってカウンターをインクリメントします。

コアAPIを使用してクラスを適用する方法

その後、すべてが post_class() に入ります。これは、WPの内部クラスの標準セット、および追加したカスタム（CSSフレームワーク固有の）クラスをエコーし​​ます。 class="wp-internal-classes and custom-classes"をコンテナーに追加します（divまたはarticle）。

（おそらく）ベストプラクティスの例

global $wpdb;
if ( have_posts() )
{
    while ( have_posts() )
    {
        the_post();

        $class  = get_post_format();
        // Current post: starts with index 1 - fixing the fact, that PHP starts with 0 else.
        // [A] HER YOU CAN ADD ANY CLASSES THAT YOU NEED FOR EVERY 3rd POST
        $class .= 0 === ( ++$wpdb->current_post % 3 ) ? ' special-class' : '';

        ?>
        <!-- Open Post Container -->
        <article <?php post_class( "span4 post{$class}" ); ?> id="post-<?php the_ID(); ?>">

            <!-- [B] HERE YOU CAN ADD YOUR ACTUAL POST -->

        <!-- // Close Post Container -->
        </article>
    }
}
2
kaiser

this answer に基づくコードは、さらに調整が必要ですが、その概念を実証しています。

$count = 0;
while ( have_posts() ) : the_post();

if ( $count < 1 ) {
  // first post
  echo '<div id="left-column">';
  the_title();
} elseif ( $count <= 2 ) {
  // next 2 posts
  the_title();
  if( $count == 2) echo '</div><!-- end left-column -->';
} else {
  // rest of the posts
  if( $count == 3) echo '<div id="right-column">';
  the_title();
}

$count++;
endwhile;
echo '</div><!-- end right-column -->';
1
brasofilo