85 Shares

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

201403カスタマイズ

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

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マークは消えますが、最上部の記事が大きいのは変わりません。

2ページ目の表示

トップページとそれ以外を分岐すればいいだけなんですけど、しばらくこのままクリック率の変化を見ながら対応したいと思います。

まとめ

しっかり検証しないまま記事にしてしまったのでちょっと反省しています。Codexちゃんと読まなかったので…。

しっかり書いてありました。

ひとことで言うと、query_posts() は決して使うべきではありません。

テンプレートタグ/query posts – WordPress Codex 日本語版

ご指摘いただいたNobuoさん、ありがとうございました。

それでは、また。