カスタム投稿タイプとは？

WordPressのカスタム投稿タイプは、投稿や固定ページと同様に、特定の種類のコンテンツを投稿するための方法を提供するものです。
これにより、ウェブサイトの機能を拡張し、柔軟なコンテンツ管理を可能にします。

カスタム投稿タイプは、プラグインやカスタムコードを使用して作成でき、カスタム投稿の中でカテゴリ分けをしたいときには、「カスタムタクソノミー」を作成して、分類分けをおこなうことができます。

また、カスタムページテンプレートを使用して、特定の種類の投稿に対して異なるデザインを適用することができます。これにより、コンテンツをより効果的に管理し、ウェブサイトの品質を向上させることができます。

カスタム投稿タイプで作成したページにのみ、CSSを反映させたい！と思うことはありませんか？
今日はその方法をご紹介します。

functions.phpにコードを記述する

functions.phpにこちらのコードを貼り付けます。

どこも変更せずに貼り付けるだけでOKです！

//特定のカスタム投稿にのみCSSを適用するための記述

function posttype_class( $classes ) {
    global $post;
    $post_type_class = "post-type-" . $post->post_type;
    $classes[] = $post_type_class;
    return $classes;
}
add_filter( 'body_class', 'posttype_class' );
STEP
1

カスタム投稿タイプのスラッグを控えておく

CSSを反映させたいカスタム投稿タイプ（今回の例では、テストカスタム投稿）のスラッグをコピーするなどして控えておきます。
今回の例の場合のスラッグは、testとなります。

カスタム投稿タイプは、プラグインなどを使用して作成が可能です！
カスタム投稿の作り方については、こちらの記事でもご紹介しています。

Custom Post UIで作成した
カスタム投稿タイプの場合

Lightningで作成した
カスタム投稿タイプの場合

STEP
2

外観>カスタマイズ>追加CSSに記述をおこなう

管理画面の外観から、カスタマイズを選択します。

追加CSSを開きます。

追加CSSに、カスタム投稿に反映させたいCSSをの記述をおこないます。

今回は、見出し(h2)の文字の色を赤にしてみたいので、その場合はこのように記述をおこないます。

//テストカスタム投稿(スラッグ:test)のページのみ、見出し(h2)の文字色を赤色にする

.post-type-test h2 {
	color:red;
}

※上記のコードのtestの部分を、CSSを反映させたいカスタム投稿タイプのスラッグに書き換えてください

STEP
3

カスタム投稿でページを作成してみる

カスタム投稿でページを作成してみたいと思います。
管理画面から、カスタム投稿にページの新規追加を行います。

カスタム投稿で、このような内容でページを作成しました。
「これはテスト投稿です」の部分を見出し(h2)ブロックで作成しているので、この部分にCSSが適用されます！

STEP
4

カスタム投稿のページにCSSが反映されているか確認する

カスタム投稿で作成したページを開いてみます。
見出し(h2)の文字が赤色になっており、CSSが反映されていることがわかります！

STEP
5

複数のカスタム投稿タイプがある場合は？

カスタム投稿が複数あり、それぞれで適用するCSSを変更したい場合は、追加CSSのスラッグを書き換えることで実現可能です！

固定ページや投稿ページには
CSSが反映されません

デフォルトの投稿ページや固定ページには、このようにCSSが反映されていないことがわかります。

デフォルトの投稿の場合

固定ページの場合

投稿者プロフィール

Mayu
Mayu
Webサイトに興味をもち、独学でHTMLやCSSの勉強を始め、その後、スクールでAdobeソフトの使い方やデザインについての知識を習得する。
同時に、様々なWebサイトがWordPressで作られていることを知り、お客さまに喜んでいただけるサイト作りができるよう、WordPressの仕組みやユーザー視点での文章表現、デザインスキルを日々学ぶ。
2022年10月より、株式会社ウェブロードに入社し、お客様のサイト制作、修正やページ追加、操作サポートを行っている。

お問合せフォームはこちら

弊社サービスをご検討いただきありがとうございます。
相見積もりや社内検討用など、概算お見積りのPDFが必要な場合はこちらでご入力・出力できます。

概算お見積書 PDF出力

こちらのカテゴリ内のご質問と回答で解決できない場合は、ぜひ下記フォームよりお問い合わせください。ご相談・お見積りのご依頼は無料です。

お申込前のお打ち合わせはメール/お電話/GoogleMeet等オンラインでもご対応可能です。全国からお問い合わせを受付けています。
翌営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須弊社を何で知りましたか

    もし可能でしたら検索キーワードを教えてください。

    差し支えなければご紹介者様のお名前を教えてください。様

    もし可能でしたら具体的な媒体等を教えてください。

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか？

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか？(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか？(複数選択可)

    SSL(https://～)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか？(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)

    こちらの関連記事も読まれています

    【カスタム投稿タイプ】「投稿者」を表示させる方法 アーカイブページの表示内容をカスタマイズ！【Lightning G3 Pro／カスタム投稿タイプ】 Contact Form7で郵便番号から住所を自動入力！【YubinBango】 カスタムフィールドの簡単な作り方をご紹介！
    カテゴリー
    WordPress講座
    前の記事
    【個人情報保護】Cookieの利用同意のポップアップの作り方（Popup Maker）
    2023年4月7日
    次の記事
    小規模事業者持続化補助金を活用したホームページ制作について
    2023年4月11日