トップページにインパクトが欲しい！
ブログを巡回していると最新記事だけ大きくなっていて、2件目以降はアーカイブ形式に表示されるトップページをよく見ますよね。
通常のループ処理だと同じレイアウトを並べることしかできないので、ちょっとした細工が必要になります。
ちなみにwhileループについてはこちらを参照してみてください。
WordPressで使われるループforeachについては前回の記事で書きましたが、今回はwhileループについて調べてみました。 併せてよ...
offsetだとページネーションが使えない
最初に思いつくのがoffsetだと思います。
最新記事と2件目以降で別にループを作って、2件目のループでoffset指定で2件目以降をループさせる方法です。
offsetを使用した場合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?php $args = array( 'post_type' =>'post', 'posts_per_page' => 1 ); $my_query = new WP_Query($args); if( $my_query -> have_posts() ) : while($my_query->have_posts()) : $my_query->the_post(); ?> <!-- 最新記事 --> <?php endwhile; endif; ?> //2件目以降のループ <?php $paged = get_query_var('paged') ? get_query_var('paged') : 1 ; $args = array( 'post_type' =>'post', 'posts_per_page' => 10, 'paged' => $paged, 'offset' => 1 ); $my_query = new WP_Query($args); if( $my_query -> have_posts() ) : while($my_query->have_posts()) : $my_query->the_post(); ?> <!-- 2件目以降の記事 --> <?php endwhile; endif; ?> |
これでも期待した表示はできるのですが、問題はサブループを使うこととｏｆｆｓｅｔを使用するとページネーション（ページャー）が使えないという点です。
通常こういった表示をしたい場所はブログのトップページで、ページ送りで以前の記事も見られるようにすることだと思います。
その場合必須になるページネーションが使えないのは致命的です。
メインループの中で最新記事を判別する
となれば、何かしらの方法で最新記事だけ選別して別の表示をさせる方法がベターでしょう。
私は下記のように選別してみました。
最新記事だけ選別して表示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?php $args = array( 'post_type' => 'post', 'posts_per_page' => 1 ); $my_query = new WP_Query($args); $first_post = $my_query-> posts[0]; $first_post_id = $first_post-> ID; ?> <?php if( have_posts() ) : while(have_posts()) : the_post(); if($post->ID == $first_post_id): ?> <!-- 1件目の記事 --> <?php else : ?> <!-- ２件目以降の記事 --> <?php endif; endwhile; endif; ?> |
ちょっと分解してみます。
まず選別の方法ですが、記事一覧の格納されている$postsから一番上（最新）の記事IDを拾っておいて、メインループ内にｉｆ文でそのIDの記事をより分けて表示させています。
ただ$postsはページ送りする度に、そのページ内で表示される分だけの記事が格納されます。
例えば1ページ５記事表示の設定だと、2ページ目の６記事目も最新記事と同様大きく表示されてしまいます。
それだとちょっと意図したものと違うので、記事全体からの最新記事IDを拾うコードを書いてあります
最新記事のIDを取得
|
1 2 3 4 5 6 7 |
$args = array( 'post_type' => 'post', 'posts_per_page' => 1 ); $my_query = new WP_Query($args); $first_post = $my_query-> posts[0]; $first_post_id = $first_post-> ID; |
そのIDとループされる記事のIDを照合してより分け処理を行います。
|
1 |
if($post->ID == $first_post_id): |
まとめ
最初はちょっと悩んでいたのですが、いざ組んでみたら意外とシンプルでした。
$my_query -> posts[0];は0番目の記事を拾うという意味ですので、3番目・5番目も大きくしたいという場合は数値を2・4とすれば応用できます。
ちなみに$postsを参照して2ページ目、3ページ目も同じレイアウトで表示する場合はこちらになります。
2ページ以降も同じレイアウトで表示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php $first_post = $posts[0]; $first_post_id = $first_post-> ID; ?> <?php if( have_posts() ) : while(have_posts()) : the_post(); if($post->ID == $first_post_id): ?> <!-- 1件目の記事 --> <?php else : ?> <!-- ２件目以降の記事 --> <?php endif; endwhile; endif; ?> |
追記
当サイト上記の方法で最新記事だけ大きくして、残りはfloatのカラム落としでレイアウトしていたのですが、記事が増えてきて少々トラブルに見舞われました。
後日そのトラブルを解消した記事を書きましたので、同じようなレイアウトを考えている方は併せて参照してみてください。
投稿の並びを単純にfloatのカラム落ちを利用していたのですが、これだと見出しの行数の増減で縦幅が変わった際に下段が右に寄ってしまうのです。...
追記2
後日気が付いたのですが「最新記事だけ選別して表示」の項の方法だと、2ページ目の表示が奇数になってしまい、最後の列に端数が出てしまいます。
例えば1ページ5件表示で最新記事が2枠、残り４記事が1枠ずつだと計6枠になるので、1ページ目は問題ないのですが、2ページ目は全て1枠になるので計5枠になってしまい最後の列が1個空いてしまう・・・という感じです。
そういう訳で一応2番目の記事まで大きくするソースを追記しておきます。
最新記事と次点記事だけ大きくする
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<?php $args = array( 'post_type' => 'post', 'posts_per_page' => 1 ); $my_query = new WP_Query($args); $first_post = $my_query-> posts[0]; //1番目の記事を取得 $first_post_id = $first_post-> ID; //1番目の記事IDを取得 $Second_post = $my_query-> posts[1]; //2番目の記事を取得 $Second_post_id = $Second_post-> ID; //2番目の記事IDを取得 ?> <?php if( have_posts() ) : while(have_posts()) : the_post(); if($post->ID == $first_post_id || $post->ID == $Second_post_id): ?> <!-- 1件目と2件目の記事 --> <?php else : ?> <!-- ３件目以降の記事 --> <?php endif; endwhile; endif; ?> |
参考になった本
ありがとうございます。とても良い記事に感謝です。参考にさせて頂きました。
あと、post-typeではなくて、post_typeかもしれません。
コメントありがとうございます。
参考にになったようで何よりです！
あと、ご指摘ありがとうござます。
post_typeでしたね…早速修正しておきました。