最新記事だけ大きく表示する方法・改訂版

2014-03-162021-08-17

先日の記事「最新記事だけ大きく表示する方法」でいくつか不具合があったので、改訂版メモ。

query_posts というコードをご紹介しましたが、使いどころを誤ると表示が崩れたりページャー機能がうまく動かないので、もっとシンプルな方式に変更しました。

あまり初心者向けの内容ではありませんが、ステップアップに最適かも。

1件目の記事と2件目以降の記事を分岐する方法

いろいろ試した結果、今回は「isFirst()」を使用する方法にしました。

functions.php記述

まず、functions.phpに下記を加えます。

//1件目の記事取得
function isFirst(){
    global $wp_query;
    return ($wp_query->current_post === 0);
}

続いて、home.php（テーマによってはindex.php）をいじります。

ループ部分の変更箇所

変更前イメージはこんな感じでした。

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
 
<div class="home_area">
<section>
<div class="thumb_box">
記事サムネイル表示部分
</div><!--//thumb_box-->
<div class="entry_box">
<h3>記事タイトル</h3>
<p>更新日・カテゴリ・タグ</p>
</div>
<div class="clear"></div>
</section>
</div><!--//home_area-->
 
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>

これだと全記事がきれいに並ぶだけなので、1件目の記事とそれ以降の記事でクラス名や表示する内容（本文抜粋など）を変えます。

それぞれのDIV要素を作って「if (isFirst())」で分岐させます。

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php
//1件目の記事
if (isFirst()) { ?>

<div class="home_area_top">
<section>
ここに1件目の記事が表示されます
</section>
</div><!--//home_area_top-->

<?php }
//2件目以降
else { ?>

<div class="home_area">
<section>
ここは2件目以降の記事がループ処理されます
</section>
</div><!--//home_area-->

<?php }
?>

<?php endwhile; ?>
<?php endif; ?>

CSSは前回と同じものを使用しています。

記事更新から3日間のみNEWマークをつける

実はこの方法だと、ページャーで2ページ目以降に移っても最上部の記事は大きく表示されます。

さらに、「NEW」マークを直書きしてしまうと古い記事でも最上部の記事にそのまま「NEW」がついてしまうので、更新日数経過で表示・非表示を切り替える設定にしました。

<?php
$days = 3; //Newを表示させたい期間の日数
$today = date_i18n('U');
$entry = get_the_time('U');
$kiji = date('U',($today - $entry)) / 86400 ;
if( $days > $kiji ){
echo 'New';
}
?>

これで2ページ目以降のNEWマークは消えますが、最上部の記事が大きいのは変わりません。