アーカイブをカテゴリー毎にレイアウト(デザイン)を変える

ワードプレス:ワードプレスのブログをカテゴリー毎にレイアウト(デザイン)を変える方法
トミー
こんちは、トミーこと末富です。
今回は、前回に引き続きワードプレスについて少し紹介させていただきます。

ではトミー、いきまーす。

ワードプレスのアーカイブをカテゴリー毎にレイアウトを変えたいが、どうすれば・・・

この記事を見ている人は、恐らくワードプレスをいくらか触ったことのある人だと思います。
さらにワードプレスのカスタマイズに挑戦しようと思っている方ではないでしょうか?

ワードプレスのブログ機能を使って、
ブログの場合は、Aのレイアウト、新着情報の場合は、Bのレイアウトで表示させる方法について説明させていただきます。

ハブページ(分岐ページ)を作って、カテゴリーでレイアウトを振り分けます。

振り分け方法は、色々あるかと思いますが、今回は記事を投稿した際にカテゴリーによってレイアウトを分けてみようかと思います。

分岐イメージ図

ワードプレス:ハブ化のイメージ図

イメージ図どおり、カテゴリー(スラッグ)によって分岐します。

  • スラッグが「news」の場合:single-new.phpを読み込む。
  • スラッグが「blog」の場合:single-blog.phpを読み込む。

STEP1:管理画面よりカテゴリースラッグを確認

管理画面のカテゴリーページより、カテゴリースラッグとIDの確認をします。
「管理画面」 < 「投稿」 < 「カテゴリー」とすれば確認できます。

ワードプレスのスラッグ

STEP2:date.phpに条件分岐を書きます

以下のコードは、カテゴリーに一致したテンプレートファイルを読み込むための分岐条件になります。
date.phpの内容をハブ化するために、まるっと全部以下の内容に書き換えております。

本当に簡単にですが、PHPやWordPressをあまり知らない方のために簡単に説明させていただきますと、3行目と5行目に「in_category」という箇所がありますが、このin_categoryはWordPressの独自関数です。
「現在の記事が該当するカテゴリに関連付けられているとき ~ の処理をする」という意味になります。

今回は、news(新着情報)、blog(ブログ)の分岐を作ってます。
in_categoryに「news」「blog」をセットして、カテゴリごとに異なるテンプレートファイルを読み込むように分岐させています。

STEP3:date-news.php、date-blog.php等にレイアウト内容を書き込む

date-news.php、date-blog.phpに各々のデザインのコードを書いていきます。
書き方の詳細は、レイアウトによってまちまちなので省略させていただきます。
記事を各々カテゴリーで投稿し、表示に問題ないなければこれで完成です。

まとめ

ワードプレスのアーカイブをカテゴリー毎にレイアウト(デザイン)を変える方法は、date.phpをハブ化させればいい!ということでした。
以前紹介させていただいたブログ記事のカテゴリー毎にデザインを分岐させる方法と、セットで覚えておくことをオススメします!
というのもブログのカテゴリー毎にデザイン変更すれば必然的にアーカイブも修正する必要がでてきますので。

トミー
ワードプレスで自社ホームページを作りたい、リニューアルしたいとご検討の方は、ぜひブレーン社にご相談ください!!
ワードプレスのブログをカテゴリー毎にレイアウト(デザイン)を変える方法

ワードプレスのブログをカテゴリー毎にレイアウト(デザイン)を変える方法

2019年5月24日

ブレーン社でのワードプレス実績(一部)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA