PAGE TOP

カテゴリーごとに適用するテンプレートファイルとCSSを変更する方法

あまりないことかもしれませんが、カテゴリーごとにデザインを変えたい場合の方法を明記しておきます。
指定したカテゴリーページを開くと条件分岐でそのカテゴリーのIDに応じて読み込ませるテンプレートファイルを変更します。

カテゴリーIDを調べる

カテゴリーIDは管理画面のカテゴリー設定のページで取得できます。
設定ページでカテゴリー一覧から取得したいカテゴリー名をクリックするとURLにカテゴリーIDが表示されています。

カテゴリーIDの取得

テンプレートファイルの作成

次の準備として、各カテゴリー毎の単一記事ページ用のテンプレートファイルを作成し、FTPでアップします。

カテゴリー一覧

↑↑↑
例えばこのブログではこんなカテゴリがあります。
カテゴリーごとにテンプレートファイルを切り替えるため、以下のファイルを作成したとします。
↓↓↓

カテゴリースラッグ=wordpress カテゴリーID=11 テンプレートファイル=wordpress.php
カテゴリースラッグ=jquery  カテゴリーID=12 テンプレートファイル=jquery.php
カテゴリースラッグ=css  カテゴリーID=14 テンプレートファイル=css.php

各ファイルはルートに置いてもフォルダを作って階層化してもOKです。
例ではsingleというフォルダを作ってその中に読み込ませるテンプレートファイルを置きました。
そして、そのカテゴリーページが開かれた場合に読み込ませるテンプレートファイルをPHPの条件分岐で指定します。

読み込むテンプレートファイルの条件分岐

single.phpに以下を記述します。

if ( in_category('11') ) {
	include(TEMPLATEPATH . '/single/wordpress.php');
} else if ( in_category('12') ) {
	include(TEMPLATEPATH . '/single/jquery.php');
} else (in_category('14') ) {
	include(TEMPLATEPATH . '/single/css.php');
}

カテゴリーIDが○○だった場合、○○.phpを読み込む。という指定です。

テンプレートファイル毎に読み込むCSSファイルの指定

それぞれのテンプレートファイルに合わせて読み込むCSSを変更するには、header.phpに条件分岐で指定します。

<?php if( in_category('11') ): ?>
<link href="<?php bloginfo('template_url')?>/css/wordpress.css" rel="stylesheet" type="text/css" media="all" />
<?php elseif( in_category('12') ): ?>
<link href="<?php bloginfo('template_url')?>/css/jquery.css" rel="stylesheet" type="text/css" media="all" />
<?php elseif( in_category('14') ): ?>
<link href="<?php bloginfo('template_url')?>/css/css.css" rel="stylesheet" type="text/css" media="all" />
<?php endif; ?>

サイトデザインの幅が広がりますね。


同じカテゴリのおすすめ記事

  • カテゴリー

  • 最近の投稿

  •