目次
目次
Screenshot
お知らせ用にシンプルなポップアップ プラグイン「Popup Studio」
おすすめ
Custom_serach1
WordPressの投稿・ウィジェット内コードの使用場所を探せる「Content Search Tool」
おすすめ
Hwinote iCatch Editor Ver2.0.0を公開しました―WordPress上で画像の作成・編集をもっと手軽に
おすすめ
pgm_eye
WordPressのプラグイン管理をダッシュボードで！一括操作・更新もできる便利ツール「Plugin Group Manager」
おすすめ
WordPressのウィジェットに表示期間の設定を追加するプラグイン
おすすめ
古い投稿を自動更新！「ROP Scheduler」でWordPress記事を簡単に再公開
preview
カスタム投稿を活用して自分専用のメモ機能を実装
ブログ記事タイトルや任意のテキスト・リンクをスクロール表示するプラグイン
スポンサーリンク

WordPress Cocoonでカスタム投稿タイプの作成と一覧表示を簡単に個別設定できるモジュール （アップデート）

カスタマイズ集
2026-09-010
この記事は約26分で読めます。
記事内に広告が含まれています。
スポンサーリンク

WordPressテーマ「Cocoon」では、通常投稿の一覧ページについて、カードタイプや表示件数などを「Cocoon設定」から変更できます。

カスタム投稿を使っていて、Cocoonで使っているデザインはそのままに、カスタム投稿の一覧だけカード表示を変えたいなと思ったのが、このモジュールを作り始めたきっかけです。

ただ、投稿タイプごとに表示を変えようとすると、テンプレートを用意したりPHPを触ったりと、ちょっと面倒なんですよね。
そこで最初は、カスタム投稿の一覧表示を投稿タイプごとに設定できるようにしていました。

そのうち、せっかくならカスタム投稿タイプ自体も管理画面から作れた方が楽だなと思い、新規作成や管理機能も追加しました。

今では、Cocoon設定に追加される 「カスタム投稿」 タブから、カード表示、表示件数、カテゴリータブ、並び順、固定投稿、サイドバー、抜粋、カスタムフィールドなどを、投稿タイプごとに個別設定できるようになっています。
カスタム投稿タイプの新規作成も管理画面から行えます。
Cocoon本体のファイルは変更しません。

アップデート

下記機能を追加しました。バージョンは Ver 0.4.23です。
アップデートする方は、フォルダ語と上書きしてください。

・新着記事一覧に含める
・新着記事ウィジェットに含める

スポンサーリンク

主な機能

主な機能は次のとおりです。

  • カスタム投稿タイプの作成・管理
    投稿タイプ名やスラッグ、アーカイブ、投稿編集画面で使用する機能などを管理画面から設定できます。
  • カスタム投稿ごとの一覧表示設定
    投稿タイプごとに、一覧設定を個別に管理できます。
  • Cocoonのカードタイプに対応
    エントリーカード、大きなカード、縦型カード、タイルカードなどから選択できます。
  • レスポンシブ表示の調整
    PC・タブレット・スマートフォンに合わせて、カードの列数を調整できます。
  • カテゴリータブの表示
    カテゴリー型タクソノミーを使って、一覧ページ上部にタブを表示できます。
  • 表示件数・並び順の設定
    1ページの表示件数や、公開日、更新日、タイトル、表示順（menu_order）などによる並び替えができます。
  • 先頭固定投稿
    特定の投稿を一覧の先頭に固定できます。
  • サイドバー・抜粋の個別設定
    投稿タイプごとにサイドバーや抜粋の表示方法を変更できます。
  • カスタムフィールドの表示
    WordPress標準のカスタムフィールドやACFの値を一覧カードに表示できます。
  • 独自CSSによるカスタマイズ
    投稿タイプやカードタイプ、カスタムフィールドごとの専用クラスを使ってデザインを調整できます。
  • functions.php用PHPコードの一括生成
    モジュールで作成したカスタム投稿タイプの登録内容をPHPコードとして出力でき、テーマ変更時などの移行に利用できます。
  • スキンへの対応
    多くのCocoonスキンで利用できますが、独自レイアウトのスキンでは一部表示が異なる場合があります。「Made in Heaven」には一部互換処理を追加しています。

基本的には、**「カスタム投稿タイプを作る」→「投稿を登録する」→「一覧ページを整える」**ところまでを、できるだけ管理画面から済ませられるようにしています。

スポンサーリンク

導入方法

このモジュールはWordPressプラグインではなく、Cocoon子テーマに追加して使用するモジュールです。

Vew 0.4.23 ダウンロード

まず、配布ZIPを展開し、cocoon-custom-post フォルダーをCocoon子テーマ内に配置します。

配置例は次のとおりです。

wp-content/
└─ themes/
   └─ cocoon-child-master/
      ├─ functions.php
      ├─ style.css
      └─ cocoon-custom-post/
         ├─ cocoon-custom-post.php
         ├─ assets/
         └─ ...

次に、Cocoon子テーマの functions.php に以下を追加します。

require_once get_stylesheet_directory()
    . '/cocoon-custom-post/cocoon-custom-post.php';

これでモジュールが読み込まれます。

導入後、WordPress管理画面の 「Cocoon設定」 を開くと、新しく 「カスタム投稿」 タブが追加されます。

ここから、

  • カスタム投稿タイプの作成・管理
  • カスタム投稿ごとの一覧表示設定

を行えます。

ワンポイントアドバイス

モジュールの有効・無効の切り替え管理を行うには下記サイトがおすすめです。

プラグインなしでPHPファイルを機能単位で管理する方法
プラグインを使用せず、functions.phpをモジュール単位に分割し、WordPress管理画面から有効化・無効化できる仕組みを解説。プラグイン「Code Snippets」と同様に機能を単位ごとに整理でき、しかもテキストベースで保存さ...
ss1.xrea.com

独自CSSを使用する場合

カスタム投稿一覧ページのデザインを自分で調整したい場合は、子テーマ内に専用CSSを作成しておくと便利です。

例えば、

cocoon-child-master/
├─ functions.php
├─ style.css
├─ css/
│  └─ custom-post-archive.css
└─ cocoon-custom-post/

のように配置します。

functions.php に以下を追加すると、モジュールが有効なカスタム投稿アーカイブだけで独自CSSを読み込めます。

add_action('wp_enqueue_scripts', function () {

    if (
        ! function_exists('ccpa_get_current_enabled_settings') ||
        ! ccpa_get_current_enabled_settings()
    ) {
        return;
    }

    $file = get_stylesheet_directory() . '/css/custom-post-archive.css';

    if (! file_exists($file)) {
        return;
    }

    wp_enqueue_style(
        'my-custom-post-archive',
        get_stylesheet_directory_uri() . '/css/custom-post-archive.css',
        array('ccpa-frontend'),
        filemtime($file)
    );

}, 9999);

最初に次のような枠組みだけ作っておくと、後から管理しやすくなります。
下記サンプルをそのまま入れておいて問題ありません。
また、中身が空でも問題ありません。

/* ==================================================
   共通
================================================== */

body.ccpa-custom-post-archive {
}


/* ==================================================
   投稿タイプ別
   ※ news は投稿タイプのスラッグ
================================================== */

body.ccpa-custom-post-archive.post-type-archive-news {
}


/* ==================================================
   Entry Card
================================================== */

body.ccpa-custom-post-archive.ccpa-card-entry_card {
}


/* ==================================================
   Vertical Card
================================================== */

body.ccpa-custom-post-archive.ccpa-card-vertical_card_2,
body.ccpa-custom-post-archive.ccpa-card-vertical_card_3 {
}


/* ==================================================
   Custom Fields 全体
================================================== */

body.ccpa-custom-post-archive .ccpa-custom-fields {
}


/* ==================================================
   Custom Fields 個別
   ※ weather はフィールド名
================================================== */

body.ccpa-custom-post-archive .ccpa-custom-field-weather {
}


/* ラベル部分 */
body.ccpa-custom-post-archive
.ccpa-custom-field-weather .ccpa-custom-field-label {
}


/* 値部分 */
body.ccpa-custom-post-archive
.ccpa-custom-field-weather .ccpa-custom-field-value {
}

例えば、カスタムフィールド weather の値だけ太字にしたい場合は、

body.ccpa-custom-post-archive
.ccpa-custom-field-weather .ccpa-custom-field-value {
    font-weight: bold;
}

のように指定できます。

ccpa-custom-post-archive を付けることで、このモジュールが有効なカスタム投稿アーカイブだけを対象にできます。

また、空のCSSルールが残っていても問題ありません。必要な部分だけ後から追記して使えます。

モジュール本体の assets/frontend.css を直接編集すると、更新時に変更内容が消える可能性があるため、独自CSSは子テーマ側の custom-post-archive.css に分けておくのがおすすめです。

archive-news.php は必要？

このモジュールを有効にしている投稿タイプでは、モジュール側の共通アーカイブテンプレートを使用するため、archive-news.php などの専用アーカイブファイルは基本的に必要ありません。
モジュールをOFFにした場合は、WordPress側の既存テンプレートが使用されます。

スポンサーリンク

設定画面

モジュールを導入すると、WordPress管理画面の 「Cocoon設定」→「カスタム投稿」 に専用の設定画面が追加されます。

この画面では、大きく分けて次の3つの操作を行います。

  1. カスタム投稿タイプの作成・管理
  2. functions.php用PHPコードの一括生成
  3. カスタム投稿タイプごとの一覧表示設定

カスタム投稿タイプそのものの作成と、Cocoonでの一覧表示設定を同じ画面から管理できるようになっています。

1. カスタム投稿タイプの作成・管理

画面上部の 「カスタム投稿タイプ管理」 では、このモジュールから新しいカスタム投稿タイプを作成・管理できます。

「カスタム投稿タイプ管理」は折りたたみ式になっており、開くと次の操作を行えます。

  • 新しいカスタム投稿タイプの作成
  • 作成済みカスタム投稿タイプの確認・編集
  • 有効化／無効化
  • 削除
  • functions.php用PHPコードの一括生成

新規作成画面は、表示名やスラッグ、アーカイブの有無、投稿編集画面で使用する機能などを選択する形式になっており、基本的な項目は画面を見ながら設定できます。

特に分かりにくい項目だけ補足します。

  • 抜粋
    投稿編集画面に抜粋の入力欄を表示するための設定です。
    一覧カードに抜粋を表示するかどうかは、後述する一覧表示設定側で別に指定します。
  • カスタムフィールド
    WordPress標準のカスタムフィールドを利用できるようにする設定です。
    Gutenbergでは初期状態で入力欄が非表示になっている場合があります。
  • 表示順（menu_order）
    投稿ごとに独自の表示順を設定できるようにします。
    有効にすると投稿編集画面や投稿一覧、クイック編集から表示順を変更できます。
  • Gutenberg / REST API
    ブロックエディターを利用する場合は有効にしておく設定です。
  • カテゴリー型タクソノミー
    通常投稿のカテゴリーに近い形で、カスタム投稿専用の分類を追加します。
    一覧ページにカテゴリータブを表示したい場合にも利用できます。

なお、ここで投稿タイプそのものを編集できるのは、このモジュールから作成したカスタム投稿タイプです。

functions.php や別のプラグインですでに登録されているカスタム投稿タイプについては、登録内容そのものは変更せず、一覧表示設定のみ利用できます。

表示順（menu_order）について

「表示順（menu_order）」を有効にすると、それぞれの投稿に任意の番号を設定できます。

例えば、

投稿C：10
投稿A：20
投稿E：30
投稿D：未指定
投稿B：未指定

と設定した場合、

投稿C
投稿A
投稿E
投稿D
投稿B

の順に表示されます。

menu_order が設定されている投稿を小さい数字から順に表示し、未指定の投稿はその後に公開日の新しい順で表示されます。

表示順を使用しないカスタム投稿タイプでは、投稿編集画面や投稿一覧に表示順の項目は表示されません。

一度設定した表示順は、機能をOFFにしてもデータ自体は削除されないため、再びONにすると以前の値を利用できます。

2. functions.php用PHPコードの一括生成

「カスタム投稿タイプ管理」には、このモジュールで作成したカスタム投稿タイプの登録内容をPHPコードとして一括生成する機能があります。

主な用途は、将来Cocoonから別のテーマへ変更する場合に、カスタム投稿タイプの登録内容を引き継ぐことです。

このモジュールはCocoon子テーマ内で動作するため、Cocoon以外のテーマへ変更すると、そのままではモジュールを利用できなくなります。

ただし、カスタム投稿の記事データ自体はWordPressのデータベースに保存されているため、テーマを変更しただけで投稿データが削除されることはありません。

テーマ変更後も同じカスタム投稿タイプを利用するには、その投稿タイプを引き続きWordPressへ登録する必要があります。

そこで、テーマ変更前にPHPコードを生成しておき、新しいテーマの functions.php や専用プラグインなどへ移すことで、同じカスタム投稿タイプを引き継げます。

生成されるのは、主に次のような投稿タイプの登録情報です。

  • カスタム投稿タイプ
  • 表示名・スラッグ
  • アーカイブ設定
  • 投稿編集画面で使用する機能
  • カテゴリー型タクソノミー
  • その他の登録情報

一方、カードタイプ、表示件数、並び順、固定投稿、サイドバー、抜粋表示、カスタムフィールド表示などのCocoon専用の一覧表示設定は含まれません。

つまりこの機能は、

テーマを変更しても、作成したカスタム投稿タイプと投稿データを引き続き利用するための移行用PHPコード

として使用します。

3. カスタム投稿タイプごとの一覧表示設定

追加機能

下記機能を追加しました。バージョンは Ver 0.4.21です。
アップデートする方は、フォルダ語と上書きしてください。

新着記事一覧に含める

  • 通常投稿と一緒にCocoonの新着記事一覧へ表示
  • 「カテゴリーごと」系レイアウトの上部にある「新着記事」にも反映
  • カードデザインや並び順は、カスタム投稿アーカイブ側ではなくCocoonの新着記事側の設定を使用

新着記事ウィジェットに含める

  • Cocoonの 「[C] 新着記事」ウィジェットに表示
  • ウィジェットの表示タイプ・件数などはウィジェット側の設定を使用

どちらも初期値はOFFです。また、「このカスタム投稿の一覧設定を有効にする」とは独立した設定にしているので、アーカイブ表示をモジュールで変更しなくても、新着記事への追加だけ利用できます。

「カスタム投稿タイプ管理」の下には、カスタム投稿ごとの一覧表示設定があります。

上部の 「設定するカスタム投稿」 から対象の投稿タイプを選択し、それぞれ個別にアーカイブページの表示方法を設定します。

設定項目は画面を見れば分かるものが多いため、ここでは特に補足が必要な項目だけ説明します。

  • このカスタム投稿の一覧設定を有効にする
    このモジュールによるアーカイブ表示を有効にするための設定です。
    OFFの場合は、WordPressや既存テンプレート側の表示が使用されます。
  • カテゴリータブ
    カテゴリー型タクソノミーを使って、一覧上部にタブを表示します。
    「すべて」タブの表示、使用するターム、並び順なども設定できます。
  • カードタイプ
    Cocoonのカード表示を投稿タイプごとに選択します。
    PC・タブレット・スマートフォンでの列数も調整できます。
  • 並び順
    公開日、更新日、タイトル、表示順（menu_order）などから選べます。
  • 表示順（menu_order）
    1以上の値が設定されている投稿を小さい数字から表示し、未指定の投稿はその後に公開日の新しい順で表示します。
  • 先頭に固定する投稿
    特定の投稿を一覧の先頭へ固定できます。投稿一覧から選択するほか、投稿IDの直接指定もできます。
  • サイドバー表示
    「Cocoon設定に従う」「表示する」「表示しない」から選択できます。
  • 抜粋を表示する
    一覧カードに抜粋を表示するための設定です。
    カスタム投稿タイプ作成時の「抜粋」は入力欄を追加する設定なので、役割が異なります。
  • カスタムフィールド表示
    WordPress標準のカスタムフィールドやACFの値をカード内へ表示できます。
    ACFを使用する場合はフィールドキーではなく、weather などのフィールド名を指定します。

また、設定を保存した後も現在編集しているカスタム投稿タイプが選択された状態を維持するため、複数の投稿タイプを続けて設定する場合でも作業しやすくなっています。

設定内容に確認が必要な場合は、管理画面に 「現在の設定に関する注意」 が表示されます。

カスタムフィールド表示について

投稿ごとに登録した独自の情報を、カスタム投稿の一覧カードに表示できます。

例えば、イベント情報や商品情報などで、

天気：晴れ
開催地：東京
料金：1,000円

といった通常のタイトル・本文・抜粋以外の情報を一覧カードに追加したい場合に利用できます。
カスタムフィールドは、フィールド名（meta key）と値の組み合わせで保存されます。
例えば「天気」を登録する場合は、

フィールド名：weather
値：晴れ

のように登録します。
一覧設定側では、

表示：ON
ラベル：天気
フィールド名：weather
表示位置：タイトルの下

のように設定します。
すると一覧カードでは、

天気：晴れ

と表示されます。
投稿ごとに値を変更できるので、別の投稿では、

weather = 曇り
または、
weather = 雨

と入力すれば、それぞれのカードに対応した値が表示されます。
フィールド名は投稿ごとに変えない
重要なのは、同じ種類の情報には同じフィールド名を使用することです。
例えば天気の場合は、すべての投稿で、

weather

を使用し、値だけを、

晴れ
曇り
雨

と変更します。
「晴れ用」「雨用」のようにフィールド名自体を投稿ごとに変更する必要はありません。
WordPress標準のカスタムフィールドを使用する場合
カスタム投稿タイプ作成時に 「カスタムフィールド」 を有効にすると、WordPress標準のカスタムフィールドを利用できます。
Gutenbergでは、カスタムフィールド欄が最初から表示されていない場合があります。
その場合は投稿編集画面の設定から、「カスタムフィールド」を有効にして編集画面を再読み込みすると、投稿編集画面下部に入力欄が表示されます。
そこで、

名前：weather
値：晴れ

のように入力します。
なお、カスタム投稿タイプ作成画面の「カスタムフィールド」設定は、入力できるようにするための設定です。
一方、Cocoon設定側の 「カスタムフィールド表示」 は、その値を一覧カードへ表示するための設定です。
この2つは役割が異なります。
ACFを使用する場合
ACF（Advanced Custom Fields）などのカスタムフィールドプラグインで登録した値も表示できます。
例えばACFで、

フィールドラベル：天気
フィールド名：weather
フィールドタイプ：選択

として、

晴れ
曇り
雨

を選択肢にしておけば、投稿編集画面ではプルダウンから天気を選べます。
この場合も、モジュールの一覧設定では、

フィールド名：weather

と指定します。
ACFを使用する場合は、field_xxxxxxxx のようなフィールドキーではなく、フィールド名を入力します。
選択肢が決まっている「天気」「地域」「種類」「評価」などは、WordPress標準の自由入力よりもACFの選択フィールドを使うと入力ミスを防ぎやすくなります。
値がない投稿では表示されない
設定したカスタムフィールドに値が入っていない投稿では、その項目は一覧カードに表示されません。
そのため、一部の投稿だけに追加情報を表示する使い方もできます。
例えば「料金」を設定していても、

price = 1,000円

が登録されている投稿では、

料金：1,000円

と表示し、値がない投稿では「料金」自体を表示しません。
表示位置も指定可能
カスタムフィールドは、カード内の表示位置を指定できます。
例えば、

タイトルの下
抜粋の下（メタ情報の上）
メタ情報の下

など、表示したい内容に合わせて配置できます。
天気や価格など目立たせたい情報はタイトル付近、補足情報はメタ情報付近、といった使い分けができます。

カスタムフィールドを使うことで、投稿ごとに持たせた独自情報を一覧カードにも表示できるため、イベント・商品・店舗・レビューなど、通常の投稿情報だけでは足りないコンテンツにも対応できます。

スポンサーリンク

CSSカスタマイズ


モジュールでは、カスタム投稿アーカイブやカードタイプ、カスタムフィールドごとに専用のCSSクラスを付与しています。
これらを利用すると、モジュール本体のCSSを変更せず、子テーマ側の custom-post-archive.css からデザインを調整できます。
スキンによって既存のCSS指定が異なるため、以下はカスタマイズの基本例として利用してください。
カスタム投稿一覧すべてを変更する
モジュールによる一覧設定が有効なカスタム投稿アーカイブには、

body.ccpa-custom-post-archive

というクラスが追加されます。
そのため、このクラスを先頭に付けることで、モジュールを利用しているカスタム投稿一覧だけにCSSを適用できます。
例えば、一覧カードに角丸と影を付ける場合は、

body.ccpa-custom-post-archive #list .entry-card-wrap {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 3px 12px rgb(0 0 0 / 8%);
}

と指定できます。
タイトルを変更する場合は、

body.ccpa-custom-post-archive #list .entry-card-title {
font-size: 18px;
font-weight: 700;
line-height: 1.5;
}

抜粋を変更する場合は、

body.ccpa-custom-post-archive #list .entry-card-snippet {
font-size: 14px;
line-height: 1.8;
}

のように指定できます。
特定のカスタム投稿タイプだけ変更する
WordPressでは、カスタム投稿タイプのアーカイブごとにbodyクラスが追加されます。
例えば投稿タイプのスラッグが news の場合は、

post-type-archive-news

というクラスが付きます。
このモジュールを利用している news アーカイブだけを指定する場合は、

body.ccpa-custom-post-archive.post-type-archive-news #list .entry-card-wrap {
border-radius: 16px;
}

とします。
投稿タイプのスラッグが works の場合は、

body.ccpa-custom-post-archive.post-type-archive-works {
}

のように指定できます。
そのため、

news → ニュース用デザイン
works → 施工事例用デザイン
event → イベント用デザイン

のように、投稿タイプごとにデザインを分けることもできます。
news や works の部分は、実際に作成したカスタム投稿タイプのスラッグへ変更します。
カードタイプごとに変更する
一覧設定で選択しているカードタイプも、bodyクラスとして追加されます。
主なクラスは次のとおりです。

/* エントリーカード */
body.ccpa-custom-post-archive.ccpa-card-entry_card {
}

/* 大きなカード（先頭のみ） */
body.ccpa-custom-post-archive.ccpa-card-big_card_first {
}

/* 大きなカード */
body.ccpa-custom-post-archive.ccpa-card-big_card {
}

/* 縦型カード2列 */
body.ccpa-custom-post-archive.ccpa-card-vertical_card_2 {
}

/* 縦型カード3列 */
body.ccpa-custom-post-archive.ccpa-card-vertical_card_3 {
}

/* タイルカード2列 */
body.ccpa-custom-post-archive.ccpa-card-tile_card_2 {
}

/* タイルカード3列 */
body.ccpa-custom-post-archive.ccpa-card-tile_card_3 {
}

例えば、縦型カードのときだけ画像を角丸にする場合は、

body.ccpa-custom-post-archive.ccpa-card-vertical_card_2 #list .entry-card-thumb img,
body.ccpa-custom-post-archive.ccpa-card-vertical_card_3 #list .entry-card-thumb img {
border-radius: 12px;
}

と指定できます。
さらに、news の縦型カードだけを変更したい場合は、

body.ccpa-custom-post-archive.post-type-archive-news.ccpa-card-vertical_card_2 #list .entry-card-wrap,
body.ccpa-custom-post-archive.post-type-archive-news.ccpa-card-vertical_card_3 #list .entry-card-wrap {
border-radius: 16px;
}

のように、**「投稿タイプ × カードタイプ」**を組み合わせて指定できます。
カスタムフィールドを変更する
一覧カードに表示したカスタムフィールドにも専用クラスが付きます。
カスタムフィールド全体は、

.ccpa-custom-fields

各フィールドは、

.ccpa-custom-field

ラベルは、

.ccpa-custom-field-label

値は、

.ccpa-custom-field-value

で指定できます。
例えば、

body.ccpa-custom-post-archive .ccpa-custom-fields {
margin-top: 10px;
padding: 8px 12px;
background: #f5f5f5;
border-radius: 6px;
}

body.ccpa-custom-post-archive .ccpa-custom-field-label {
font-weight: 700;
}

body.ccpa-custom-post-archive .ccpa-custom-field-value {
font-size: 14px;
}


とすると、カスタムフィールド全体をまとめて装飾できます。
特定のカスタムフィールドだけ変更する
フィールドごとに、フィールド名（meta key）を含んだ専用クラスも追加されます。
例えばフィールド名が、priceの場合は、

.ccpa-custom-field-price

が付きます。
そのため、

body.ccpa-custom-post-archive .ccpa-custom-field-price {
font-size: 18px;
font-weight: 700;
}

とすれば、価格だけを強調できます。
例えば、

price
location
event_date

というフィールドを使用している場合は、

body.ccpa-custom-post-archive .ccpa-custom-field-price {
}

body.ccpa-custom-post-archive .ccpa-custom-field-location {
}

body.ccpa-custom-post-archive .ccpa-custom-field-event_date {
}

のように個別に指定できます。
さらにラベルと値を分けることもできます。

body.ccpa-custom-post-archive
.ccpa-custom-field-price .ccpa-custom-field-label {
}

body.ccpa-custom-post-archive
.ccpa-custom-field-price .ccpa-custom-field-value {
font-size: 18px;
font-weight: 700;
}

フィールド名はCSSクラスとしても利用するため、price、event_date のような半角英数字やアンダースコアを使った分かりやすい名前にしておくと扱いやすくなります。

CSSカスタマイズのサンプル

例えば、一覧カード全体を少し立体的なデザインにする場合は次のように指定できます。

/* ==================================================
カスタム投稿一覧 共通
================================================== */

body.ccpa-custom-post-archive #list .entry-card-wrap {
border: 1px solid #e5e5e5;
border-radius: 12px;
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease;
}

body.ccpa-custom-post-archive #list .entry-card-wrap:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
}

/* タイトル */
body.ccpa-custom-post-archive #list .entry-card-title {
font-size: 18px;
line-height: 1.5;
}

/* 抜粋 */
body.ccpa-custom-post-archive #list .entry-card-snippet {
font-size: 14px;
line-height: 1.8;
}

/* サムネイル */
body.ccpa-custom-post-archive #list .entry-card-thumb img {
transition: transform .3s ease;
}

body.ccpa-custom-post-archive #list .entry-card-wrap:hover .entry-card-thumb img {
transform: scale(1.03);
}

/* カスタムフィールド */
body.ccpa-custom-post-archive .ccpa-custom-fields {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
margin-top: 8px;
font-size: 13px;
}

body.ccpa-custom-post-archive .ccpa-custom-field-label {
font-weight: 700;
}

このサンプルはそのまま custom-post-archive.css に記載して使用できます。
ただし、使用しているCocoonスキンによってカードの余白やレイアウトが異なるため、必要に応じて数値を調整してください。
特にタイルカードや縦型カードの幅・配置そのものを変更するCSSは、スキン側のGridやMasonry処理に影響する場合があります。まずは色・文字サイズ・角丸・余白などの装飾から変更するのがおすすめです。

!important は必要？

基本的には、最初から !important を多用しない方が、後からCSSを管理しやすくなります。
例えば、

.entry-card-title {
}

ではスキン側のCSSが優先される場合でも、

body.ccpa-custom-post-archive #list .entry-card-title {
}

のように対象を具体的に指定することで、上書きできる場合があります。
それでもスキン側の指定が優先される場合だけ、

body.ccpa-custom-post-archive #list .entry-card-title {
font-size: 18px !important;
}

のように、必要なプロパティだけに !important を付ける方法がおすすめです。

スポンサーリンク

モジュールを削除する場合

  1. functions.php の require_once を削除
  2. cocoon-custom-post フォルダーを削除
  3. 独自CSSが不要ならCSSと読み込みコードも削除

モジュールで作成したカスタム投稿タイプがある場合
モジュールを削除しても投稿データそのものは削除されません。
ただし、投稿タイプの登録処理がなくなるため、今後も使用する場合は削除前に「functions.php用PHPコードの一括生成」を利用してください。

functions.phpに追記した下記を削除

require_once get_stylesheet_directory()
. '/cocoon-custom-post/cocoon-custom-post.php';

CSSの読み込みを設定した場合、functions.phpに追記した下記も削除

add_action('wp_enqueue_scripts', function () { if (
! function_exists('ccpa_get_current_enabled_settings') ||
! ccpa_get_current_enabled_settings()

) {
return;

} $file = get_stylesheet_directory() . '/css/custom-post-archive.css'; if (! file_exists($file)) {
return;

} wp_enqueue_style(
'my-custom-post-archive',
get_stylesheet_directory_uri() . '/css/custom-post-archive.css',
array('ccpa-frontend'),
filemtime($file)

);

}, 9999);

さいごに

カスタム投稿タイプは便利なんですが、いざ使おうとするとPHPを書いたり、一覧ページを調整したりと、ちょっと面倒なんですよね。
このモジュールは、そのあたりをできるだけ管理画面から済ませられるようにまとめたものです。
Cocoonでカスタム投稿をもう少し気軽に使いたい方に、少しでも役立ててもらえればうれしいです。

スポンサーリンク

コメント

タイトルとURLをコピーしました