Webの記録

WordPress オリジナルテーマでデザインをカテゴリごとに変更したい時

投稿日:

この記事は約 3 分で読めます。

オリジナルテーマを自分で作成していて、それぞれのカテゴリーごとにテンプレートを変えたり、デザインを変えたりしたい時。
いろいろな方法があると思います。

「bodyにカテゴリごとのclassがつける方法」と、「固定ページに独自のテンプレートを作って設定する方法」を試してみました。

いろいろと方法を探すのに時間がかかってしまったので、忘れた時のためにメモとして残します。

WordPress.orgの「Codex」を参考にしていますので、詳しくは「Codex」をチェックしてみてください。

bodyにカテゴリー名を入れる

投稿の個別ページのデザインをカテゴリごとに変えるのに、cssをいじりました。
その為に、bodyのclass名にカテゴリ名が入るように以下を加えました。

headerのbody部分に追加

headerのbody部分を以下のように書きます。
これを入れるとclassに様々なclass属性が追加されます。

<body <?php body_class(); ?>>
functions.phpに追加

functions.phpに以下の文を記述。
(//の行はコメントですので、好きなように書き換えしてください)

// add category nicenames in body and post class
function category_id_class($classes) {
	global $post;
	foreach((get_the_category($post->ID)) as $category)
		$classes[] = $category->category_nicename;
	return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');

FireBugで見たbody_class()だけを入れたhtmlソースコード
下の例の画像では投稿記事の個別ページを表示しているので、「single」がclass名に入っています!

FireBugで見たfunctions.php追加後のhtmlソースコード
カテゴリ名がclassの中に入りました!!

参考

Codex

固定ページに独自のテンプレートを作って設定する

固定ページで独自の設定(デザイン)をしたい時に、その固定ページ専用のテンプレートを作る方法があると思います。

作り方は簡単!適当な名前のphpファイルを作って、以下の3行をそのphpファイルの先頭に書き込みます。

<?php
/* Template Name: ここにテンプレートの名前を入れます */
?>

その後は、独自のテンプレートとして必要なものを記述してテーマの中に保存します。

保存出来たら、固定ページの「新規追加」もしくは「編集」の画面を開きます。

右側に「ページ属性」という項目があり、その中の「テンプレート」から独自のテンプレートが選べるようになっていると思います。
これを選択する事で、固定ページのテンプレートを使い分ける事が出来るようになります!

-Webの記録
-,

執筆者:


comment

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordPress 「wp_head」を入れて上部に隙間ができた時

この記事は約 1 分で読めます。 WordPressでオリジナルテーマを作っていて、「wp_head();」を入れた途端・・・ブラウザ上部に28pxの隙間が出来る現象が起きました。 ブラウザによっては …

WordPressプラグイン「Jetpack」のギャラリーがスマホで表示が崩れたとき

この記事は約 1 分で読めます。WordPressのプラグイン「Jetpack」はとても多機能で、ホントにいろんなコトができて便利。 しかし、たくさんの画像をギャラリー表示をした場合、スマホのように画 …

no image

「ページ内リンクはするするスクロール」にチャレンジ!!

今日は・・・、「ページ内リンク」でちょっとイイカンジにスクロールするjQueryにチャレンジです。
ページ内リンクをそのまましても(javaScriptなし)出来ますが、そのままだといきなり戻り先に到着してしまってびっくりするので、「yuga.js」でするするという動きをつけてみました。

no image

OS+ブラウザごとのcssが簡単に書けるJavaScript「CSS Browser Selector」

この記事は約 1 分で読めます。 「このブラウザだけデザインが崩れてる?!」というのはよくあることで、時々cssにブラウザハックを書かねばならないことがありました。 そんな時、ほんの少しcssでクラス …

no image

baserCMSで更新した内容がすぐにブラウザで反映しないとき

この記事は約 1 分で読めます。 baserCMSで既にあるphpや画像などを一部修正して、FTPでアップし直しをした時。 baserCMSでログインしている状態でブラウザ表示できちんと更新されていた …