【WordPress】特定のカテゴリだけ別テーマのデザインを変える方法―CSS指定やカスタム投稿タイプなど


のブログではありませんが、管理している別のWordPressのサイトで、特定のカテゴリの記事が充実してきて、そのカテゴリだけ、別のテーマにしてデザインを変えようと思い立ちました。

仮にそのカテゴリをここでは「旅行」(スラッグはtravel)だとします。そのサイトは普段学問的なことを書いているサイトで、その片隅でこっそりと「旅行」カテゴリを投稿していましたが、そのカテゴリが充実してきたので、それに見合ったデザインにしたい、というような話です。

たとえば、そのカテゴリだけ別のブログに引っ越しする、という手もありますが、そのブログは学問的な記事と、旅行記両方のアクセスがあってやっと成り立っているようなブログなので、二つにわけてしまっては、どちらのアクセス数も激減してしまうでしょう。

そうすると、これまでどおり、同じ一つのブログのコンテンツのままにして、学問的な記事のカテゴリと、旅行記のカテゴリとで、まるで別のブログであるかのようにデザインを変えてしまう、という方法がいいように感じました。

この記事では、特定のカテゴリだけ、あたかも別のブログのようなデザインにして、別のテーマ(テンプレート)を適用するために調べたことをまとめておこうと思います。

「(1)プラグインを使う」はプラグインが更新終了されているため、あまりお勧めできませんし、今後使えなくなる可能性もありますが、一番簡単ではあります。

「(2)特定のカテゴリのデザインだけを変える」は、少し知識は必要ですが、わりと手軽にデザインを変えられる方法です。

「(3)カスタム投稿タイプを使う」はかなり手間が必要ですが、同じドメイン内でありながら、まったく別のブログのようなテーマにもできる最も柔軟で自由度の高い方法です。

全然 専門知識がない中での試行錯誤なので、ひとつひとつ丁寧に説明はできませんが、そのぶん他サイトの関連記事へのリンクを多く載せているので参考にしてください。

スポンサーリンク

1.プラグインを使う (非推奨)

調べていて、まず最初に思い当たったのが、プラグインで、カテゴリごとにテーマを切り替えられないか、ということ。

それには、WP Theme Switcherというプラグインが存在しているとのことで、早速試してみることにしました。

デザインテーマをカテゴリごとに切り替える方法 – WP Theme Switcherの使い方 | WordPressのプラグイン | WP SEOブログ

ところが、このプラグインは第一にすでに更新が終了してしまっていて、セキュリティ面などで心配がありました。

また、このプラグインは、カテゴリごとにテーマを切り替えるのではなく、特定のURL直下の記事のテーマを変えるというものでした。

つまり、たとえばカテゴリ「旅行」のスラッグがtravelだとすれば、

https://◯◯◯.com/travel/

などのUパーマリンク構造をしていて、そのカテゴリ内のすべての記事が、たとえば

https://◯◯◯.com/travel/hong-kong

https://◯◯◯.com/travel/guam

などのURLになっていれば、WP Theme Switcherで簡単に別テーマを実装できるのですが、実際にはそんな都合のいいパーマリンク構造にしていないことがほとんどです。

ひとつひとつ記事を別のURLに移転するわけにもいかなかったので、このプラグインを使うことはできませんでした。

しかしながら、調べていくうちに、このプラグインが開発停止されたのは、需要がなくなったからではなく、おそらくWordPressの公式機能で簡単に、これと同じことができるようになったからなのだ、と気づきました。

これは「カスタム投稿」機能というものなのですが、それについては3番目の項目で詳しく扱います。その前に、もう一つの選択肢を。

2.特定のカテゴリのデザインだけを変える

次にわかったのは、わざわざ特定のカテゴリだけ別テーマにしなくても、そのカテゴリだけに適用するスタイルシートを用意して、テンプレートは同じままで、見出しの形や、背景色、文字のスタイルなどだけを変えるのはどうか、ということです。

たとえば、メインコンテンツである学問的なカテゴリの記事では、シックな色合いのスタイルシートを適用して、旅行記のほうはポップな色になるように指定すれば、同じブログ内でありながら、印象はずいぶんと変わります。

これを実現する方法はいくつかあります。

(i).違うスタイルシートを読み込むよう指定する

サーバーにFTPソフトでファイルをアップロードできるなら、使っているテーマフォルダの中に、従来のstyle.cssとは別に、例えばtravel.cssといった別のスタイルシートを用意してアップロードして、travelのカテゴリでだけ、それを読み込むよう設定することができます。

travel.cssの内容は、基本は元のstyle.cssをコピーアンドペーストして、色など変更したい部分だけ書き換えることができます。

テーマフォルダの中に、travel.cssをアップロードしたら、テーマ(できれば子テーマ)のheader.phpに記載されているCSSの読み込み指定部分を、カテゴリ別の条件分岐に書き換えることで、違うCSSを適用できます。

具体的には、header.phpの、<link rel="stylesheet" href=…という部分でCSSが指定されているので、以下の記事に載せられているように、条件分岐に書き換えることができます。

[WordPress] 特定のカテゴリだけ特定のCSSを適応させる - かちびと.net

たとえば

<?php if ( is_category('travel') ) { ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/travel.css" type="text/css" media="screen" />;
<?php } else { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php } ?>

にすれば、カテゴリが“travel”の場合、travel.cssが読み込まれることになります。href部分の記述は、travel.cssを親テーマのフォルダに入れた場合は上記のまま<?php bloginfo('template_url'); ?>/travel.cssですが、子テーマに入れた場合は<?php bloginfo('stylesheet_directory'); ?>/travel.cssになります。詳しくは以下を参照のこと。

WordPress3.0子テーマで、パス指定にbloginfo(‘template_url’)は使えない – マイペースクリエイターの覚え書き

これでうまくいかない場合は、以下のページのアドバイスに添って、function.phpに、カテゴリ別のCSS指定を書く必要があるかもしれません。function.phpを編集する場合は、バックアップとFTPソフトを用意して、編集に失敗したら、すぐにバックアップをアップロードできるよう注意してください。

トピック: 投稿タイプごとにCSSを適用する方法がわかりません。 « サポートフォーラム — WordPress

カテゴリ別以外にも、さまざまなページでCSSを切り替える書き方もこちらに載っています。

固定ページなどcssを自動的に切り替えるfunctionを作ってみた。 | 神戸のサラリーマンプログラマafiruのブログ

(ii).body_classを使う

もう一つのやり方は、スタイルシートをもう一つ作る必要はなく、特定のカテゴリだけ、独自のクラスを指定して、修飾する方法。

これを実現するには、特定のカテゴリにだけ適用されるbody_classというスタイルシートの指定を使います。

WordPressのサイトのコンテンツ部分は、<body <?php body_class(); ?>>で装飾されていますが、下記サイトで書かれているように、特定のカテゴリだけ独自のクラスをつけて、CSSで違うデザインを指定することができます。

body_class を使ってページごとに違う表示をする | memocarilog

たとえば、function.phpに

add_filter('body_class','my_class_names');
function my_class_names($classes) {
if(in_category('travel')){
     // add 'class-name' to the $classes array
$classes[] = 'traveling';
// return the $classes array
}
return $classes;
}

と書けば、travelのカテゴリ属する単一投稿記事に、traveling(名称はご自由に)というクラスが適用されるようになります。単一投稿記事ではなく、カテゴリアーカイブページに適用したい場合は、in_categoryの部分をis_categoryにします。

WordPressでカテゴリー毎に表示スタイルを変更する方法 - A.K.A and more ブログ

is_categoryとin_categoryの違いや使い方、条件分岐、複数指定、子孫カテゴリがある場合などなど | フリーランスWebデザイナーの日記

あとは、スタイルシートに、

.travelingで始まるCSSを記述追加してやれば、特定カテゴリにだけ、独自のCSSが適用されるようになります。

たとえば、見出し要素の場合

h1 {…

という形でスタイルシートに指定しているはずですが、

.traveling h1 {…

という形で新しく設定を書き加えていけば、travelingというクラスが適用されているページの装飾だけを変えることができます。

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld

新しくbody_classを作らなくても、特定のカテゴリページのCSSを変えるだけなら、もともと各カテゴリに付与されているクラスがあるので、それを使ってCSSに記述することもできます。

WordPressでカテゴリーごとにページの設定を変える方法

(iii).特定のカテゴリ用のテンプレートを作る

3つ目の方法は、特定のカテゴリ用のテンプレートを作ってしまう方法です。

通常、ブログのカテゴリページはcategory.php、単一投稿はsingle.phpなどのテンプレートにそって表示されていますが、

category-travel.phpを作って子テーマのフォルダにアップロードしてやると、travelのスラッグのカテゴリーアーカイブページは、そちらのテンプレートが優先して適用されるようになります。

【WordPress】特定のカテゴリーにだけ対応する特殊なテンプレートファイル - ONZE

WordPressテンプレートを各カテゴリ等で別々に使い分ける | フリーランスWebデザイナーの日記

単一投稿記事の場合は、single-travel.phpを作っただけでは適用されませんが、もともとのsingle.phpに加えて、single-default.phpとsingle-travel.phpの二つを追加で作ってやって、single-default.phpには元のsingle.phpの内容をコピーアンドペーストします。

そして、もともとのsingle.phpのほうは、今までの内容を消して、travelというカテゴリならsingle-travel.phpを、それ以外はsingle-default.phpを読み込むよう、条件分岐だけを記述してやれば、カテゴリ別に違う単一投稿のテンプレートを表示できるようになります。

詳しくはこちらのサイトで解説されていました。

カテゴリごとに読み込むシングルページを変更してデザインを柔軟に切り換える | web sign*

3.カスタム投稿タイプを使う

ここまでのやり方では、テーマそのものは同じでも、スタイルシートの指定や、一部のテンプレートを変えることで、別のブログのような印象を持たせる方法でした。

それだけでもだいたいのことはできますが、まるっきり別のブログみたいにしてしまいたい、という場合は、カスタム投稿タイプというおもしろい機能を使います。

このカスタム投稿タイプというのは、さっきのプラグインがやっていたことを自分で実装するようなもので、プラグインよりももっと自由度があります。

カスタム投稿タイプというのは、WordPressのブログの中にもう一つブログを作るようなもので、

たとえばhttp://◯◯◯.com/というブログを運営していた場合、その中で、http://◯◯◯.com/travel_report/という別のブログを運営して、デザインをまったく別のものを使うような、入れ子構造にすることができます。

企業のサイトなどでもけっこう使われていて、たとえば、https://www.nintendo.co.jp/(ニンテンドーのウェブサイト)の中の、https://www.nintendo.co.jp/kids/(ニンテンドーキッズスペース)を見てみると、別のサイトのようなデザインになっています。

http://◯◯◯.com/travel_report/以下が別のテーマになるというのは、先程のプラグインと同じですが、プラグインでテーマを切り替える場合と違ってカスタム投稿タイプという方法で実装すれば、記事の移動もプラグインで簡単にできるので、URLの構造が自分のサイトと合っていないといった悩みはありません。

カスタム投稿を追加する

具体的な実装方法はというと、function.phpに、以下の記事の説明に添って、たとえば「travel_report」という新しい投稿タイプを追加してやることですぐに実現できます。そんなに難しい編集ではないですが、やはりfunction.phpを編集するときはバックアップをすぐアップロードできるよう気をつけて行ってください。

カスタム投稿の追加の仕方と、具体的な使用例 | はじめてのWordPressまとめ

WordPress カスタム投稿タイプの作り方 - Qiita

カスタム投稿タイプ | Web Design Leaves

手軽にやりたければ、カスタム投稿タイプを設定できるプラグインもあります。

Custom Post Type UIの使い方[WordPress]

一応有名プラグインのJetpackにもカスタム投稿をオンにできる機能がありますがデフォルトの名前が決まってしまっています…。

この手順を終えれば、WordPressの管理画面の「投稿」の下に、カスタム投稿の欄が増えています。

そこのラベルはfunction.phpの'label'で指定した名前になりますが、それがアーカイブページ(http://◯◯◯.com/travel_report/)をブラウザに表示したときの名前(たとえば“ニンテンドーキッズスペース”のような)にもなるので、「tカスタム投稿」のままではなく「travel-report」とか「旅行記」とかでの名前に書き換えておくのがいいでしょうか。

管理画面に、カスタム投稿のラベルが追加されたら、新規追加から、とりあえず投稿を作ってみます。ここで追加した投稿は、もともとのサイトの新着記事やフィードには表示されないので、テスト投稿も気にせず作って公開して大丈夫です。(あとで、新着記やフィードに表示することはできます)

そのとき、更新して公開して、実際に記事を表示してみると、なぜか「ページが見つかりません」になってしまうことがありますが、そのときは、以下の記事の対処法で解決すると思います。

カスタム投稿タイプで「ページが見つかりません」と表示される!

これで、http://◯◯◯.com/の中に、http://◯◯◯.com/travel_report/(旅行記)という別のブログを作ったわけですが、このままで、テーマのデザインまでは変わりません。

カスタム投稿用のテンプレート

このブログ内の別ブログのようなカスタム投稿に、別のテーマを適用するには、今使っている子テーマのフォルダ内に、カスタム投稿用の専用テーマファイルをFTPソフトでアップロードしていく必要があります。

アップロードするテーマファイルは、たとえば以下のようなもの。

single-travel_report.php

taxonomy-travel_report.php

header-travel_report.php

footer-travel_report.php

single-travel_report.phpは、テーマによって少し表記が違うかもしれませんが、単一記事用のテンプレートです。archive-travel_report.phpはメインアーカイブのページ(つまり、http://◯◯◯.com/travel_report/のページ。カスタム投稿ブログのトップページのようなもの)のテンプレートです。

どちらも後ろに-travel_reportをつけることで、勝手にtravel_reportというカスタム投稿のページに適用してくれます。

taxonomy-travel_report.phpは、さきほどfunction.phpに記述したカスタム投稿用のカテゴリーアーカイブのことで、こちらも、記述したときの名前に添ったファイル名にすれば、勝手に認識してくれます。

header-travel_report.phpとfooter-travel_report.phpは、必須ではないものの、完全に別のブログみたいにしたい場合は、ヘッダー部分やフッター部分のデザインも変えたいと思うので、お好みによっては追加します。

これらのヘッダーとフッターを表示させるには、上記のsingle-travel_report.php、archive-travel_report.php、taxonomy-travel_report.phpなどのファイルの中で、ヘッダーとフッターのテンプレートを読み込んでいる部分、つまり<?php get_header(); ?>や<?php get_footer(); ?>という記述を<?php get_header('travel_report'); ?>や<?php get_footer('travel_report'); ?>にすることで読み込まれるようになります。

カスタム投稿用のサイドバー

次に、サイドバーも変更したい場合は、とりあえずsidebar.phpをコピーして、sidebar-travel_report.phpを作って、子テーマにアップロードします。

そして、以下の記事に添って、新しいサイドバーのウィジェットエリアを、function.phpに登録します。登録する名前は何でもいいので、仮にnameの欄に、「travel widget」と入力したとします。

すると、管理画面の「外観」→「ウィジェット」で、「travel widget」の欄が追加されていて、ウィジェットを作れるようになっています。

WordPressウィジェット エリアの追加・表示・条件分岐の方法 | WordPressブログ作ってみる?

次に、さっきのheader-travel_report.phpの中のサイドバー取得部分、<?php get_sidebar( ); ?>を<?php get_sidebar('travel_report'); ?>にして、sidebar-travel_report.phpのほうを読み込むようにします。

そしてsidebar-travel_report.phpの中の<?php dynamic_sidebar( 'sidebar' ); ?>の部分を<?php dynamic_sidebar( 'travel widget' ); ?>にすれば、さっきの追加されたウィジェットエリアに配置されたウィジェットが、カスタム投稿の記事のサイドバーに表示されるようになります。

ウィジェットエリアが複数ある場合も、これとに同様に新しいウィジェットエリアと専用のサイドバーのテンプレートを紐づけていきます。

WordPress 複数のサイドバーを使い分ける方法。 – Web雑記帳。

ここまでで、http://◯◯◯.com/travel_report/以下の記事は、ほぼ別のテンプレートが適用されるようになりました。

この手順では、とりあえず既存のテーマのテンプレートをコピーして別のものにしましたが、ここで新しく作ったテンプレートをそれぞれ編集していけば、まったく別のブログのようなデザインにできます。

カスタム投稿用のCSS

別のブログのようなデザインにする場合は、テンプレートだけでなくスタイルシートも大幅に変更する必要がありますが、ここでも、すでに見たbody_classが役立ちます。

header-travel_report.phpには、bodyの取得部分に、<body>または <body<?php body_class('body'); ?>>というbodyタグがあるかと思いますが、これを<body<?php body_class('travel'); ?>>にして、あとは既存のスタイルシートに先程の方法と同じく、「.tarvel」から始まる記述を追加していけば、別のスタイルシートが適用されるようになります。

あるいは、カスタム投稿でだけ、別のCSS(たとえばtravel)を取得するようfunction.phpで指示することもできるようです。

PHP - wordpressのカスタム投稿に違うCSSを導入したい(19319)|teratail

完全に別のテーマのようにする場合、別のテーマのテンプレートをそのまま引っ張ってきたくもなりますが、それぞれのテンプレートには固有のCSSだけでなく、function.phpなどのテーマの独自の要素がいろいろあるので、特に複雑なテーマの場合は注意が必要です。

記事の引っ越し

ここまでやってしまったら、あとは、既存の記事の引っ越しだけです。特定のカテゴリ(travel)の記事をhttps://◯◯◯.com/travel_report/以下に移動させるわけですが、この作業はプラグインを使うととても簡単にできます。

一度移動すれば、プラグインは不用になるので、常時仕様するプラグインが増えるということはなく、あくまで一時的な利用です。

既存のブログの特定カテゴリの記事を、カスタム投稿の特定カテゴリー(タクソノミー)にまとめて移動するなら、Convert Post Types ひとつひとつ選ぶならPost Type Switcherといったプラグインが役立ちます。他にも色んなプラグインがあります。

投稿記事をカスタム投稿に移動できるプラグイン「Convert Post Types」|WordPressプラグイン

Post Type Switcher - 記事の投稿タイプを後から変更できるWordPressプラグイン - ネタワン

カスタム投稿のパーマリンク設定を変更する場合は、Custom Post Type Permalinks を使うことで設定できます。

カスタム投稿タイプのパーマリンクを変更する『Custom Post Type Permalinks』

このとき、既存の記事のURLが変わってしまいますが、Googleなどの検索エンジンによる記事の評価を引き継ぎたい場合は、301リダイレクトを設定しておきます。もともとのパーマリンクに特徴的なスラッグがなく、一括での指定が難しく、ひとつひとつリダイレクトを設定する必要がある場合は、記事数が多いと大変ですが…。

プラグインで簡単!ページのURL変更の際にやるべき301リダイレクト設定 | 無料WordPressテーマ BizVektor [ ビズベクトル ]

その他の設定

ウィジェットにカテゴリ一覧などを表示していた場合、WordPress標準のウィジェットだと、追加したタクソノミー(カスタム投稿版のカテゴリー)の一覧が表示できません。

その場合は、WordPress標準のウィジェットをfunction.phpの設定で調整してやると表示できるようになります。

WordPress標準のカテゴリーウィジェットを拡張してカスタムタクソノミーも選択できるようにする – モンキーレンチ

あるいは、カスタム投稿用のウィジェットを詰め合わせしてあるCustom Post Type Widgetsというプラグインも便利です。これによって既存のトップページのほうのウィジェットに、カスタム投稿の新着記事一覧を表示することもできます。

WordPressウィジェットでカスタム投稿・カスタムタクソノミーを表示 | タカシノワークス

単一記事の中にある、その投稿のカテゴリのメタ情報を表示するような部分は、これまでの記述だとカスタム投稿用のカテゴリやタグは表示されなくなるので、single-travel_report.phpを修正する必要があります。

カスタム投稿のカテゴリの一覧を取得するタグは、以下に書かれているとおり、<?php the_taxonomies( $args ); ?>などを使います。

【WordPress】カスタム投稿タイプ使用時のカスタムタクソノミーを表示する方法。 - ONZE

記事末尾に関連記事一覧を表示するような場合も、書き方を調製する必要があるかもしれません。

wordpress カスタム投稿の関連記事一覧を表示 | WEBデザイナーのしおり

またカスタム投稿の記事は、そのままでは検索エンジンに通知されないので、ping設定をfunction.phpに追加するする必要があります。

WordPress カスタム投稿タイプを使うときの注意点 | Design Hack and Slash

カスタム投稿の記事のフィードも、そのままではRSSに含まれないので、function.phpを編集して、既存のフィードにカスタム投稿も加えたり、あるいは既存のフィードとは別にカスタム投稿用のフィードを出力したりすることができます。

[WP]WordPress でカスタム投稿タイプのRSS を配信する方法

ほかにも、カスタム投稿の運用についての記事は多くの方が書かれているので、調べれば、たいていのことは実現できるかと思います。

さすがに、「旅行記」のような、ひとつのカテゴリを別デザインにするためだけにカスタム投稿をここまで作り込んでいくのは、面倒かもしれません。

しかし、わたしが自分でやってみた感想としては、カスタム投稿は自由度が高いですし、思い入れのあるカテゴリならなおさら、一つの別ブログのようなデザインにできるのがすばらしいと思いました。

スポンサーリンク

スポンサーリンク
WordPress