WordPressのアーカイブページで1件目の投稿のみ大きく表示する方法
WordPressでブログを運営するとき、アーカイブページ(記事一覧ページ)で最新の記事(1件目の記事)を大きく表示させて目立たせるのが効果的なときがあります。
特にリピーターを想定してブログを構築しているときには、最新記事を目立つようにしておけば何度も訪問してくれるユーザーに更新を分かりやすく伝えることができます。
WordPressのアーカイブページで1件目の投稿のみ大きく表示する方法
WordPressでこのような処理をする場合、1件目の記事と2件目以降の記事とで分岐するループを作成し、それぞれにスタイルを指定することで可能になります。
1件目の記事を分岐する関数を作成する
functions.phpに追記します。
- functions.php
-
function is_first(){ global $wp_query; return ($wp_query->current_post === 0); }
1件目の記事とそれ以外で分岐させる
次に1件目と2件目以降とで分岐するループを作成します。
index.phpなどの記事一覧を表示したい箇所に記述していきます。
なお今回のような条件分岐は、大枠から作成していくと混乱せずに進めることができます。
- index.php
-
<?php if(have_posts()) : while(have_posts()) : the_post(); ?> <?php if (is_first()) { ?> //1件目の記事 <?php } else { ?> //2件目以降の記事 <?php } ?> <?php endwhile; else : ?> //記事がない場合 <?php endif; ?>
1件目の記事用ソース
次に、1件目の記事用のソースを記述します。
- index.php
-
<?php if(have_posts()) : while(have_posts()) : the_post(); ?> <?php if (is_first()) { ?> //1件目の記事 <div class="post first"> <div class="thumbnail"> <a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail( 'thumb640' ); ?> <?php else: ?> <img src="<?php bloginfo('template_url'); ?>/images/noimage.png" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /> <?php endif; ?> </a> </div> <div class="title"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </div> <div class="date"> <?php echo get_the_date('Y.m.d'); ?> </div> <div class="category"> <?php the_category(' '); ?> </div> <div class="lead"> <?php echo mb_substr(strip_tags($post-> post_content),0,60).'...'; ?> </div> </div> <?php } else { ?> //2件目以降の記事 <?php } ?> <?php endwhile; else : ?> //記事がない場合 <?php endif; ?>
今回は、各記事のサムネイル、投稿日、カテゴリー、記事抜粋を表示するようにしてみます。
サムネイル画像に関する記述は上記ソースのクラス名「thumbnail」の部分です。
ここではサムネイル画像(アイキャッチ画像)が設定されている場合はその画像を、設置されていなければ「noimage.png」を表示するようにしています。
アイキャッチ画像を使用するには、事前にfunctions.phpを編集してアイキャッチ画像を有効にしておく必要があります。
functions.phpに下記のように記述を追加してください。画像サイズ640px×400pxのサムネイル画像が生成させるようになります。
- functions.php
-
/* サムネイル画像 ---------------------------------------------------------- */ add_theme_support('post-thumbnails'); add_image_size('thumb640',640,400,true);クラス名が「lead」となっているdiv要素内の記述は記事の冒頭部分を60文字抜粋して表示するためのものです。
抜粋する文字数を変えたい場合は、この記述の中の「60」のところを変更してください。
2件目以降の記事用ソース
2件目以降の記事用のソースを追記します。
- index.php
-
<?php if(have_posts()) : while(have_posts()) : the_post(); ?> <?php if (is_first()) { ?> //1件目の記事 <div class="post first"> <div class="thumbnail"> <a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail( 'thumb640' ); ?> <?php else: ?> <img src="<?php bloginfo('template_url'); ?>/images/noimage.png" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /> <?php endif; ?> </a> </div> <div class="title"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </div> <div class="date"> <?php echo get_the_date('Y.m.d'); ?> </div> <div class="category"> <?php the_category(' '); ?> </div> <div class="lead"> <?php echo mb_substr(strip_tags($post-> post_content),0,60).'...'; ?> </div> </div> <?php } else { ?> //2件目以降の記事 <div class="post"> <div class="thumbnail"> <a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail( 'thumb640' ); ?> <?php else: ?> <img src="<?php bloginfo('template_url'); ?>/images/noimage.png" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /> <?php endif; ?> </a> </div> <div class="title"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </div> <div class="date"> <?php echo get_the_date('Y.m.d'); ?> </div> <div class="category"> <?php the_category(' '); ?> </div> <div class="lead"> <?php echo mb_substr(strip_tags($post-> post_content),0,60).'...'; ?> </div> </div> <?php } ?> <?php endwhile; else : ?> //記事がない場合 <?php endif; ?>
1件目用のソースとほぼ変わりませんが、クラス名「post」となっているdiv要素に、1件目は「first」というクラス名が記入されているのに対し、2件目以降用のソースは記入されていません。
これにより、アーカイブページの全記事に適用したいスタイルはクラス名「post」に、1件目にだけ適用したい場合はクラス名「first」を利用することで指定できます。
記事がないとき用ソース
最後に、記事が1件もないときにメッセージが表示されるようにしておきましょう。
- index.php
-
<?php if(have_posts()) : while(have_posts()) : the_post(); ?> <?php if (is_first()) { ?> //1件目の記事 <div class="post first"> <div class="thumbnail"> <a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail( 'thumb640' ); ?> <?php else: ?> <img src="<?php bloginfo('template_url'); ?>/images/noimage.png" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /> <?php endif; ?> </a> </div> <div class="title"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </div> <div class="date"> <?php echo get_the_date('Y.m.d'); ?> </div> <div class="category"> <?php the_category(' '); ?> </div> <div class="lead"> <?php echo mb_substr(strip_tags($post-> post_content),0,60).'...'; ?> </div> </div> <?php } else { ?> //2件目以降の記事 <div class="post"> <div class="thumbnail"> <a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail( 'thumb640' ); ?> <?php else: ?> <img src="<?php bloginfo('template_url'); ?>/images/noimage.png" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /> <?php endif; ?> </a> </div> <div class="title"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </div> <div class="date"> <?php echo get_the_date('Y.m.d'); ?> </div> <div class="category"> <?php the_category(' '); ?> </div> <div class="lead"> <?php echo mb_substr(strip_tags($post-> post_content),0,60).'...'; ?> </div> </div> <?php } ?> <?php endwhile; else : ?> //記事がない場合 <p>記事が見つかりません。</p> <?php endif; ?>
まとめ
以上が、WordPressのアーカイブページで1件目の投稿のみ大きく表示する方法です。
ソース自体は長くなりますが、やっていることは1件目と2件目以降で条件分岐してループさせているだけです。
先ほども言いましたが、大枠から作っていく(ループを作ってからその中身を作っていく)ようにすると混乱することなく制作がすすめられると思います。
関連記事
