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

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

というのも、最近なにかとワードプレスを使ってWEBサイトを作ることが多くなり、日々勉強中です。
ではトミー、いきまーす。

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

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

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

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

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

分岐イメージ図

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

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

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

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

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

ワードプレスのスラッグ

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

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

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

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

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

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

まとめ

ワードプレスのブログをカテゴリー毎にレイアウト(デザイン)を変える方法は、single.phpをハブ化させればいい!ということでした。
これを使いこなせれば、ワードプレスの強力なブログ機能を使いつつ、各カテゴリー(コンテンツ)にあったデザインでページを構築することができますね。
オリジナルデザインで、他社との差別化にはもってこいです!

トミー
ワードプレスで自社ホームページを作りたい、リニューアルしたいとご検討の方は、ぜひブレーン社にご相談ください!!

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

コメントを残す

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

CAPTCHA