トップページや記事一覧で最新記事だけデザインを変える方法

約一ヶ月ぶりに実家に帰り、鋭気を養ってきたY氏です。

やっぱり地元や田舎は落ち着くなぁ〜って思った！体調にも変化があったし、何かと健康的に生活できる実家の環境は最高だ。

かれこれ大阪に出てきてから13年になるんだけど、やっぱ地元には勝てないと思う。

そして、今日の本題は！

最新記事のデザインを変更する方法

ワードプレスのトップページに記事一覧や最新記事を表示している場合、最初の1記事目、つまり最新記事だけデザインを変えたいと思った事はないだろうか？

新しい記事を目立たせたい！記事一覧のレイアウトに何かインパクトが欲しい！

そう考えているなら今回のカスタマイズはお役に立てるかも！

実装もいつも通りコピペで行けるので是非トライしてみてほしい！

早速実装方法を解説

まず、テンプレートのfucntion.phpに以下のコードをコピペしよう！

function is_first(){
  global $wp_query;
  return ($wp_query->current_post === 0);
}

下準備は以上で完了！

次に表示を変えたいトップページや、もしくはカテゴリページなどに新しいコードを追記する。

要領としては条件分岐で、最初の1記事目だけ表示を変えますよ！っていう仕組みになる。

トップページならindex.phpやhome.php

カテゴリならarchive.phpなど。

ワードプレスの記事を取得する基本的なループとして、

<?php if(have_posts()): while(have_posts()): the_post(); ?>
// 処理する内容スペース（html）
<?php endwhile; endif; ?>

これが基本。

処理する内容スペースにはタイトル取得、パーマリンク取得、アイキャッチ取得、抜粋取得など。

自分好みでレイアウトを変更できるスペース。

よく使用されているのは、

//タイトルを取得
<?php the_title(); ?>

//記事の本文を取得
<?php the_content(); ?>

//記事のURLを取得
<?php the_permalink(); ?>

//記事の抜粋を取得
<?php the_excerpt(); ?>

//記事のアイキャッチを取得
<?php the_post_thumbnail(); ?>

こんな感じかな？

ちなみに、タイトルと抜粋は以下で文字数を制限できる。

タイトル

<?php echo mb_strimwidth(get_the_title(), 0, 60, "…", "UTF-8"); ?>

抜粋

<?php echo mb_substr(get_the_excerpt(), 0, 100); ?>

数字の部分を自分好みの文字数に変えればオッケー！あんまり使う機会はないかもだけど、タイトルが長くスマホで表示が崩れる場合は活用できる。豆知識程度で。

で、話は戻ってトップページやカテゴリページに追記する条件分岐のコード。

条件分岐コード

<?php if (is_first()) :?>
// 最新記事のレイアウト
<?php else: ?>
// 2記事目以降のレイアウト
<?php endif; ?>

これが条件分岐のコード。

これを最初に紹介したループに組み込んでやる。

完成コード

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

<?php if (is_first()) :?>
// 1記事のレイアウト
<?php else: ?>
// 2記事目以降のレイアウト
<?php endif; ?>

<?php endwhile; endif; ?>

これで完成！

レイアウトのhtmlに関しては自分の好みで作成してもらえればオッケー！

2記事目以降はデフォルトのデザインを使用するならコピペで。

1記事目だけ自分でレイアウトする感じになる。

ちなみに僕のサイトでもこんな感じで最新記事だけ表示を変えている。使用しているコードは今日紹介したコード。

まとめ

今回のカスタマイズは最新記事をアピールする目的、そしてサイトのデザインにインパクトをつける目的のカスタマイズかな？

色んなブログやサイトを見ていると何気に導入しているサイトも多い。

トップページの記事一覧に関しては、スライダーやカルーセルを使用してもインパクトは作れるけど、jQueryやアニメーションは見にくいからあまり好きじゃない。

スライダーとかは嫌だけど、インパクトをつけたいなぁ〜って感じなら是非利用してみて欲しい。

CHECK管理人サイト YUICHI FUKUDA.COM