23 Shares

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

201403カスタマイズ

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

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

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

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

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

functions.php記述

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

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

ループ部分の変更箇所

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

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

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

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

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

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

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

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

2ページ目の表示

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

まとめ

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

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

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

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

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

それでは、また。