WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

WordPressのカスタム投稿タイプ別でデザインを変更する方法【Simplicity2編】

公開日:2017(平成29)年6月13日/最終更新日:

Knowledge Base Wordpress パソコン カスタマイズ 設定



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

私がWordPressで作るサイトは記事そのものをカテゴライズできた方が便利なのでカスタム投稿タイプを使うことが多いです。通常の投稿のみでは記事が何百件になってくると編集するために記事を探すのも大変になってきますから、WordPressを使っているならぜひ覚えたい機能です。

カスタム投稿タイプは記事のスラグ(URL)が
「http://サイトアドレス/カスタム投稿タイプのスラグ/記事のパーマリンク」
という形になり、通常の投稿の場合と比べて1つ階層が増えることになります。

つまりはサブディレクトリで作る別のサイトの投稿と同じ階層になるということなんですね。サブディレクトリで作成したサイトは検索エンジンから見れば同一のサイト内にある子コンテンツとして認識されるわけですから、せっかくなら同じ管理画面内で管理できた方が便利ということになります。

この2つのWordPressサイトの作り方では大きな違いがあります。それは

  1. それぞれのサイトで別々のプラグインが使えない(1サイトでのプラグイン数が増える)
  2. それぞれのサイトで別々のテーマが使えない

こと。1は仕方ない部分もありますが、同じ人が作るサイトでは似たようなプラグインが大半を占めることが多いのですから、通常より増えても数個でしょうから問題はないと思います。

それよりも問題は違うテーマが使えないことです。テーマが一緒ということは、そこに加えるデザインも共通になってしまうわけで、全然性質の違うサイト同士を親子にしたい場合にはちょっと不都合です(やっぱりサイトは見た目が肝心)。

そこで、階層化している=別のデザインを同じサイト内で使えないか?というのが今回のチャレンジです。

いろいろ試した結果「なーーーんだ」って感じで解決してしまいましたので、その経緯を含めて紹介します。経緯は不要という方は読み飛ばしてくださいね(個人的にはこういうプロセスが大事だと思って書いてます)。

大前提としてカスタム投稿タイプを使って記事ジャンルを分けていない場合には使えない方法ですので、カテゴリーごとに分けたいなどという場合には別のサイトを探してくださいね(現状当サイトではこの方法を紹介していませんので)。

1.カスタム投稿タイプごとに別々のテンプレート&別のCSSを与えられないか?

通常カスタム投稿タイプを作ったときには別のテンプレート「single-カスタム投稿タイプのスラグ.php」というのを作って運用するのが普通ですが、WordPressは便利にできていて、このカスタムテンプレートがなければ通常の「single.php」で表示しなさい!としてくれているので特に作る必要がありません(アーカイブページも同様)。

これを原点に戻ってカスタムテンプレートを作って別のCSSを適用させようとしたのですが、【Simplicity2】は「single.php」そのものがたくさんのファイルからの寄せ集めで構成されているので1つのカスタム投稿タイプ用を作るだけでも大変、ファイル数が4~5個増えることになります。

そして、そこに適用させるCSSの記述を変更するのですが、変更されない部分のCSSは?というところで頭から煙が出たので断念しました。

2.カスタム投稿タイプごとに別々のテーマを使えないか?

随分長いこと更新されていないテーマスイッチ系のプラグインをいくつか試しましたが、やはり現状のWordPressバージョンには適応していないようでエラーが出たりしましたので断念しました。

QA AnalyticsQA Analytics

3.特定のカスタム投稿タイプにだけ適用するCSSが書けないか?

これもまたプラグイン頼みになってしまうのですが、使えたのが「Custom CSS」というプラグイン。その他のプラグインは個別の記事に対してCSSの追加はできても投稿タイプに!という指定はできないため、個々の記事でCSSを追加する(変更するときはすべての記事で見直し)とすごく作業が大変になりそうなので使えませんでした。

唯一の「Custom CSS」も、1つの投稿タイプ用のものは無料で作成できますが、複数の投稿タイプ別でCSSを作るには有料版(90$前後-約1万円)を買う必要があり、あくまでも無料で使いたい派の私としてはパス。使えるプラグインを見つけただけに残念ですが仕方ないですね。恐らく次の【結論】となっている項目で行う作業をプラグインでやってくれているのだと思います(プログラマーではないので不明)。

【結論】そんなことしなくても簡単に実現できてしまった

私が作るサイトでは必ずと言っていいほど使用させていただいている【Simplicity2】というテーマ。本当に便利なテーマだと思います。

やや脱線ですが、どんなにいいテーマかは

をご覧になって下さい。

そして今回さらに便利だということがまたまた分かってしまいました。それはカスタム投稿タイプごとにCSSを適用することができるようclass指定してあることです。

これを「body class」というそうです。エキスパートの方ならご存じだと思います。そして【Simplicity2】でなくてもこのクラスが指定されているものも多いと思います。

「body class」が使われているかどうかは、デベロッパーツールを開いて(Google Chromeならページ表示で「F12」を押す)先頭の何行目かにタグがあるかどうかで判別できます。

例えば当サイトの「管理人の日記」はカスタム投稿タイプのスラグを「zakki」にしています。この投稿タイプの記事を1つ表示してデベロッパーツールを開いてタグを見ると

<body class="zakki-template-default single single-zakki postid-17262 single-format-standard logged-in admin-bar custom-background customize-support" itemscope="" itemtype="http://schema.org/WebPage">

という記述があります。これが「body class」タグです。そして、赤字で示しているように実にたくさんのclassが指定されています。

例えばzakki-template-defaultを指定すれば「zakki」というスラグを持つテンプレートすべてということになりますし、postid-17262を指定すれば投稿IDが17262のものという風に使い分けができます(複数指定するとより限定的にできます)。

今回は「zakki」という投稿タイプに適用させたいので「single-zakki」という「body class」を指定します。

とここまでは簡単でした。

「body class」を指定すれば・・・というところにたどり着いたのであとはいろいろ検索すればヒントがあるだろうと調べてみても、CSSでどう書いたら適用されるの??というところが紹介されているサイトがないことないこと(泣)

そこでWordPressとは全然関係ないサイトにヒントがあり、試しにそれを使ってみたら見事適用されました。

「body class」を指定したCSSの書き方

通常CSSは「#」もしくは「.」セレクタを使用しますね。その前に「body classですよ」というのを書き足すだけなんですね。分かってみれば実に簡単

例えば背景色をこの投稿タイプ(zakkiというスラグのカスタム投稿タイプ)だけ黒くしたいなら、テーマや子テーマのCSSに

body.single-zakki {
background-color:#000000;
}

としてやるだけ、実に先頭に「body.ボディクラス」を加えるだけなんですね。通常のクラス指定はこの「body.ボディクラス」の後ろに半角スペースを空けて記述してやればいいんです。そうすることで、このカスタム投稿タイプにだけ適用されるCSSが書けるということになるんですね。

分かってみれば実に単純明快でした、またまた勉強になりました。

テーマの中でのCSSの読み込み順によっては適用されないこともありますので、各CSSの最後に「!important」を付けて優先にしてやれば大抵解決します(既に「!important」が使われている部分に対して再指定する場合は調整が必要です)。

また、「body class」タグのないテーマでも、テーマのヘッダーへ呪文を追加すればタグが入れられるようになるようですから、「body class」という検索語句でいろいろ調べてみてください(たくさん出てくるのでこの記事での紹介は見送らせていただきます)。

カスタム投稿タイプごとにデザインを変えられないかなぁと思われている私と同じ考えの方、参考になれば幸いです。