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

公開日:2017年6月13日 使い方など
Knowledge Base Wordpress パソコン カスタマイズ 設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【Simplicity2】テーマで各投稿や投稿一覧に表示する日付アイコンを文字にする方法

【WordPress】サイトを徹底的にクリーンアップしよう ~サイトメンテナンス方法いろいろ~

ulタグを使ったリストでマーカー記号の代わりに画像を表示するには


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

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

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

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

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

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

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

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

をご覧になって下さい。

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

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

「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;
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

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

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

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

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報