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子テーマに追加して使用するモジュールです。

まず、配布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設定」 を開くと、新しく 「カスタム投稿」 タブが追加されます。

ここから、

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

を行えます。

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

独自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でカスタム投稿をもう少し気軽に使いたい方に、少しでも役立ててもらえればうれしいです。

以前、『Cocoon でカスタム投稿タイプを追加してみた』で紹介した、”カスタム投稿タイプの新着記事の一覧をトップページに表示” をカスタム投稿記事別に表示期間を設定できればと思い機能の追加をすることにしました。
見た目は変更せずに、カスタム投稿記事を表示する対象を絞り込んで表示させるようにしたものです。
記事によっては、1つは７日間だけ、あとは14日間表示させたいといった場合に対応させるものです。

トップに表示する投稿のカテゴリーによって”ニュース”や”お知らせ”を切り替えて表示するようにしました。
また、常に最初に表示させたい投稿を設定できるようにしました。
こちらから

⓵ 追記するコード

まず、カスタム投稿編集画面に「表示期間」入力欄を追加します。下記コードを function.PHPに追記します。
カスタム投稿タイプ名は”News”となていますが、黄色のハイライト部分を変更するだけで他のカスタム投稿名に対応します。表示期間のデフォルトの変更も同様です。

/**
 * 表示期間設定を使用するカスタム投稿タイプ
 *
 * 別のカスタム投稿タイプで使用する場合は
 * 'news' を変更してください。
 */
$display_period_post_type = 'news';


/**
 * デフォルトの表示期間（日）
 *
 * ここを変更することで、
 * トップページとショートコードの
 * デフォルト表示期間を一括変更できます。
 */
$default_display_days = 14;


/**
 * カスタム投稿の表示期間メタボックスを追加
 */
function custom_display_period_add_meta_box() {

	global $display_period_post_type;

	add_meta_box(
		'custom_display_period',
		'ニュース表示期間',
		'custom_display_period_meta_box_callback',
		$display_period_post_type,
		'side',
		'default'
	);
}
add_action(
	'add_meta_boxes',
	'custom_display_period_add_meta_box'
);


/**
 * 表示期間メタボックスの内容
 */
function custom_display_period_meta_box_callback( $post ) {

	global $default_display_days;

	wp_nonce_field(
		'custom_display_period_save',
		'custom_display_period_nonce'
	);

	$display_type = get_post_meta(
		$post->ID,
		'_custom_display_type',
		true
	);

	$display_days = get_post_meta(
		$post->ID,
		'_custom_display_days',
		true
	);

	/*
	 * 未設定の場合はデフォルト
	 */
	if ( $display_type === '' ) {
		$display_type = 'default';
	}
	?>

	<p>
		<label>
			<input
				type="radio"
				name="custom_display_type"
				value="default"
				<?php checked(
					$display_type,
					'default'
				); ?>
			>
			デフォルト（<?php echo esc_html( $default_display_days ); ?>日間）
		</label>
	</p>

	<p>
		<label>
			<input
				type="radio"
				name="custom_display_type"
				value="days"
				<?php checked(
					$display_type,
					'days'
				); ?>
			>
			期間指定
		</label>
	</p>

	<p style="margin-left:24px;">
		<input
			type="number"
			name="custom_display_days"
			value="<?php echo esc_attr(
				$display_days
			); ?>"
			min="1"
			step="1"
			style="width:70px;"
		>
		日間
	</p>

	<p>
		<label>
			<input
				type="radio"
				name="custom_display_type"
				value="unlimited"
				<?php checked(
					$display_type,
					'unlimited'
				); ?>
			>
			無期限
		</label>
	</p>

	<p style="font-size:12px;color:#666;">
		デフォルトの場合は、表示側で指定した
		表示期間を使用します。
	</p>

	<?php
}


/**
 * 表示期間設定を保存
 */
function custom_display_period_save( $post_id ) {

	global $display_period_post_type;

	/*
	 * nonce確認
	 */
	if (
		! isset(
			$_POST['custom_display_period_nonce']
		) ||
		! wp_verify_nonce(
			$_POST['custom_display_period_nonce'],
			'custom_display_period_save'
		)
	) {
		return;
	}

	/*
	 * 自動保存を除外
	 */
	if (
		defined( 'DOING_AUTOSAVE' ) &&
		DOING_AUTOSAVE
	) {
		return;
	}

	/*
	 * 権限確認
	 */
	if (
		! current_user_can(
			'edit_post',
			$post_id
		)
	) {
		return;
	}

	/*
	 * 対象投稿タイプ以外は除外
	 */
	if (
		get_post_type( $post_id ) !==
		$display_period_post_type
	) {
		return;
	}

	/*
	 * 表示タイプを保存
	 */
	if (
		isset(
			$_POST['custom_display_type']
		)
	) {

		$display_type = sanitize_key(
			$_POST['custom_display_type']
		);

		$allowed_types = array(
			'default',
			'days',
			'unlimited',
		);

		if (
			in_array(
				$display_type,
				$allowed_types,
				true
			)
		) {

			update_post_meta(
				$post_id,
				'_custom_display_type',
				$display_type
			);
		}
	}

	/*
	 * 表示日数を保存
	 */
	if (
		isset(
			$_POST['custom_display_days']
		)
	) {

		$display_days = absint(
			$_POST['custom_display_days']
		);

		if (
			$display_days > 0
		) {

			update_post_meta(
				$post_id,
				'_custom_display_days',
				$display_days
			);

		} else {

			delete_post_meta(
				$post_id,
				'_custom_display_days'
			);
		}
	}
}
add_action(
	'save_post',
	'custom_display_period_save'
);

コードを追記すると下記の様に表示されれば次に進みます。

② Indexページに追記

Cocoon masterフォルダーにあるindex.phpファイルをコピーし、子テーマのフォルダに複製。
複製した index.phpの＜?php get_header(); ?＞の下に下記を追記します。
カスタム投稿タイプ名、表示する件を変更する場合は、黄色のハイライト部分（78行目）を変更してください。
表示期間については、⓵ で設定したデフォルトの日にちが適応されます。

<?php

global $default_display_days;

$information = get_posts( array(
	'post_type'      => 'news',
	'posts_per_page' => -1,
	'post_status'    => 'publish',
	'orderby'        => 'date',
	'order'          => 'DESC',
) );

$display_information = array();

if ( $information ) {

	$now = current_time( 'timestamp' );

	foreach ( $information as $post ) {

		// 表示設定を取得
		$display_type = get_post_meta(
			$post->ID,
			'_custom_display_type',
			true
		);

		// 未設定の場合はデフォルト
		if ( $display_type === '' ) {
			$display_type = 'default';
		}

		// 無期限の場合
		if ( $display_type === 'unlimited' ) {

			$display_information[] = $post;

		} else {

			// 表示期間を取得
			$display_days = get_post_meta(
				$post->ID,
				'_custom_display_days',
				true
			);

			// 日数が未設定の場合は①のデフォルト値を使用
			if ( $display_days === '' ) {
				$display_days = $default_display_days;
			}

			$display_days = absint( $display_days );

			// 0以下の場合も①のデフォルト値を使用
			if ( $display_days <= 0 ) {
				$display_days = $default_display_days;
			}

			// 投稿日時
			$post_time = get_post_time(
				'U',
				false,
				$post
			);

			// 表示終了日時
			$expire_time = $post_time + (
				$display_days * DAY_IN_SECONDS
			);

			// 表示期間内か確認
			if ( $now <= $expire_time ) {
				$display_information[] = $post;
			}
		}

		// 最大3件
		if ( count( $display_information ) >= 3 ) {
			break;
		}
	}
}

if ( $display_information ) :
?>

<ul>

<?php
foreach ( $display_information as $post ) :
	setup_postdata( $post );
?>

<li>
	<span class="new-txt">お知らせ!</span>
	<?php the_time( 'Y年n月j日' ); ?> -
	<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>

<?php
endforeach;

wp_reset_postdata();
?>

</ul>

<?php endif; ?>

CSS等の追記については、下記記事を参考ください。
上記コードは下記記事で掲載したコードをそのまま置き変えるようにしてあるので、CSSは同じものを使用しています。

カスタム投稿タイプに対応したシンプルな新着情報一覧のショートコードのアップデート

ついでに新着情報一覧のショートコードにも対応させます。
内容については下記記事をご覧ください。

以前の記事で掲載したコードを使っている方は、丸ごと下記に置き換えてください。
これから設定する方は、function.phpに下記コードを追記してください。
カスタム投稿タイプ名、表示する件を変更する場合は、黄色のハイライト部分（11-12行目）を変更してください。

// カスタム投稿一覧ショートコード
function shortcode_custom_post_list( $atts ) {

	global $post;
	global $display_period_post_type;
	global $default_display_days;

	// ショートコードのデフォルト値
	$atts = shortcode_atts(
		array(
			'num'       => '3',
			'post_type' => 'news',
			'days'      => $default_display_days,
			'show_date' => 'no'
		),
		$atts
	);

	$num       = absint( $atts['num'] );
	$post_type = sanitize_key( $atts['post_type'] );
	$days      = absint( $atts['days'] );
	$show_date = $atts['show_date'];

	/*
	 * days が0以下の場合は
	 * ①のデフォルト値を使用
	 */
	if ( $days <= 0 ) {
		$days = $default_display_days;
	}

	// 投稿を新しい順ですべて取得
	$query_args = array(
		'posts_per_page' => -1,
		'post_type'      => $post_type,
		'post_status'    => 'publish',
		'orderby'        => 'date',
		'order'          => 'DESC',
	);

	$posts_array = get_posts( $query_args );

	$display_posts = array();

	$now = current_time( 'timestamp' );

	foreach ( $posts_array as $post_item ) {

		/*
		 * 表示期間設定の対象投稿タイプの場合
		 * 投稿ごとの表示期間設定を使用
		 */
		if (
			$post_type ===
			$display_period_post_type
		) {

			$display_type = get_post_meta(
				$post_item->ID,
				'_custom_display_type',
				true
			);

			/*
			 * 無期限
			 */
			if (
				$display_type === 'unlimited'
			) {

				$display_posts[] = $post_item;

			} else {

				/*
				 * 期間指定の場合
				 */
				if (
					$display_type === 'days'
				) {

					$display_days = get_post_meta(
						$post_item->ID,
						'_custom_display_days',
						true
					);

					/*
					 * 日数が未入力の場合は
					 * ショートコードの days を使用
					 */
					if (
						$display_days === ''
					) {
						$display_days = $days;
					}

				} else {

					/*
					 * デフォルトの場合は
					 * ショートコードの days を使用
					 */
					$display_days = $days;
				}

				$display_days = absint(
					$display_days
				);

				/*
				 * days が0以下の場合は
				 * ①のデフォルト値を使用
				 */
				if (
					$display_days <= 0
				) {
					$display_days =
						$default_display_days;
				}

				/*
				 * 投稿日時
				 */
				$post_time = get_post_time(
					'U',
					false,
					$post_item
				);

				/*
				 * 表示終了日時
				 */
				$expire_time = $post_time + (
					$display_days *
					DAY_IN_SECONDS
				);

				/*
				 * 表示期間内なら追加
				 */
				if (
					$now <= $expire_time
				) {
					$display_posts[] =
						$post_item;
				}
			}

		} else {

			/*
			 * 表示期間設定の対象外の投稿タイプは
			 * ショートコードの days を使用
			 */
			$display_days = $days;

			$post_time = get_post_time(
				'U',
				false,
				$post_item
			);

			$expire_time = $post_time + (
				$display_days *
				DAY_IN_SECONDS
			);

			if (
				$now <= $expire_time
			) {
				$display_posts[] =
					$post_item;
			}
		}

		/*
		 * 指定件数に達したら終了
		 */
		if (
			$num > 0 &&
			count( $display_posts ) >= $num
		) {
			break;
		}
	}

	/*
	 * 投稿がない場合
	 */
	if ( empty( $display_posts ) ) {

		return '<p style="text-align: center; color: gray;">'
			. '特にありませんでした。'
			. '</p>';
	}

	$html = '<ul>';

	foreach ( $display_posts as $post_item ) {

		$post = $post_item;

		setup_postdata( $post );

		$html .= '<li>';

		/*
		 * 投稿日を表示
		 */
		if ( $show_date === 'yes' ) {

			$html .=
				'<span style="color: blue; font-size: 12px;">'
				. esc_html( get_the_date() )
				. '</span><br>';
		}

		/*
		 * タイトル
		 */
		$html .=
			'<a href="'
			. esc_url( get_permalink() )
			. '" style="font-weight: bold; color: black; text-decoration: none;">'
			. esc_html( get_the_title() )
			. '</a>';

		$html .= '</li>';
	}

	$html .= '</ul>';

	wp_reset_postdata();

	return $html;
}

add_shortcode(
	'custom_post_list',
	'shortcode_custom_post_list'
);

下記が使用するショートコードで、オプションをすべて含めたものとなります。
他の青色ハイライトの部分は省略しても問題ないです。

[custom_post_list num="5" days="15" show_date="yes" post_type="news"]

上記、オプションを記載しない場合には、ディフォルトが適応されます。

お知らせの表示期間の設定について

投稿ごとに、投稿編集画面の「表示期間」から、次の3つを選択できます。

• デフォルト（14日間） 投稿部から14日間表示されます
• 期間指定 投稿日から指定した日数表示されます
• 無期限 表示され続けます

デフォルトの表示期間は、①の設定コードで変更できます。

ショートコードで表示期間を指定する場合

custom_post_list ショートコードでは、days を指定することができます。

例えば、

[custom_post_list days="10"]

とすると、ショートコード側では10日間を指定できます。
また、

[custom_post_list]

この場合は、設定したデフォルトの表示期間が使用されます。

投稿側で期間を指定した場合

ショートコードで表示期間を指定していても、投稿編集画面で「期間指定」を設定した投稿は、投稿側の設定が優先されます。

例えば、

[custom_post_list post_type="news" days="10"]

としていても、投稿側で期間指定 → 30日間と設定した場合は、30日間表示されます。

設定例

つまり、投稿側で個別の期間を設定した場合は、その設定が優先されます。
投稿側が「デフォルト」の場合は、ショートコードで指定した表示期間が使用されます。

追加機能

カテゴリーによってタイトルの前に表示させるラベルを指定できるようにしました。
また、表示期間中常に上に表示されるように投稿編集画面より指定できるようにオプションを追加。

下記コードを、Function.phpに追記した ”⓵ 追記するコード”と置き変えてください。

/**
 * 表示期間設定を使用するカスタム投稿タイプ
 *
 * 別のカスタム投稿タイプで使用する場合は
 * 'news' を変更してください。
 */
$display_period_post_type = 'news';


/**
 * デフォルトの表示期間（日）
 *
 * ここを変更することで、
 * トップページとショートコードの
 * デフォルト表示期間を一括変更できます。
 */
$default_display_days = 14;


/**
 * カスタム投稿の表示期間メタボックスを追加
 */
function custom_display_period_add_meta_box() {

	global $display_period_post_type;

	add_meta_box(
		'custom_display_period',
		'ニュース表示期間',
		'custom_display_period_meta_box_callback',
		$display_period_post_type,
		'side',
		'default'
	);
}
add_action(
	'add_meta_boxes',
	'custom_display_period_add_meta_box'
);


/**
 * 表示期間メタボックスの内容
 */
function custom_display_period_meta_box_callback( $post ) {

	global $default_display_days;

	wp_nonce_field(
		'custom_display_period_save',
		'custom_display_period_nonce'
	);

	/*
	 * 表示タイプ
	 */
	$display_type = get_post_meta(
		$post->ID,
		'_custom_display_type',
		true
	);

	/*
	 * 表示日数
	 */
	$display_days = get_post_meta(
		$post->ID,
		'_custom_display_days',
		true
	);

	/*
	 * トップ固定
	 */
	$pin_top = get_post_meta(
		$post->ID,
		'_custom_pin_top',
		true
	);

	/*
	 * 未設定の場合はデフォルト
	 */
	if ( $display_type === '' ) {
		$display_type = 'default';
	}
	?>

	<p>
		<label>
			<input
				type="radio"
				name="custom_display_type"
				value="default"
				<?php checked(
					$display_type,
					'default'
				); ?>
			>
			デフォルト（<?php echo esc_html( $default_display_days ); ?>日間）
		</label>
	</p>

	<p>
		<label>
			<input
				type="radio"
				name="custom_display_type"
				value="days"
				<?php checked(
					$display_type,
					'days'
				); ?>
			>
			期間指定
		</label>
	</p>

	<p style="margin-left:24px;">
		<input
			type="number"
			name="custom_display_days"
			value="<?php echo esc_attr(
				$display_days
			); ?>"
			min="1"
			step="1"
			style="width:70px;"
		>
		日間
	</p>

	<p>
		<label>
			<input
				type="radio"
				name="custom_display_type"
				value="unlimited"
				<?php checked(
					$display_type,
					'unlimited'
				); ?>
			>
			無期限
		</label>
	</p>

	<p style="font-size:12px;color:#666;">
		デフォルトの場合は、表示側で指定した
		表示期間を使用します。
	</p>


	<hr style="margin:15px 0;">


	<?php
	/*
	 * ==========================================================
	 * トップ固定
	 * ==========================================================
	 */
	?>

	<p>
		<label>
			<input
				type="checkbox"
				name="custom_pin_top"
				value="1"
				<?php checked(
					$pin_top,
					'1'
				); ?>
			>
			<strong>表示期間中はトップに固定</strong>
		</label>
	</p>

	<p style="font-size:12px;color:#666;">
		チェックすると、表示期間中は通常の記事より
		優先してトップに表示されます。
	</p>

	<?php
}


/**
 * 表示期間設定を保存
 */
function custom_display_period_save( $post_id ) {

	global $display_period_post_type;

	/*
	 * nonce確認
	 */
	if (
		! isset(
			$_POST['custom_display_period_nonce']
		) ||
		! wp_verify_nonce(
			sanitize_text_field(
				wp_unslash(
					$_POST['custom_display_period_nonce']
				)
			),
			'custom_display_period_save'
		)
	) {
		return;
	}

	/*
	 * 自動保存を除外
	 */
	if (
		defined( 'DOING_AUTOSAVE' ) &&
		DOING_AUTOSAVE
	) {
		return;
	}

	/*
	 * 権限確認
	 */
	if (
		! current_user_can(
			'edit_post',
			$post_id
		)
	) {
		return;
	}

	/*
	 * 対象投稿タイプ以外は除外
	 */
	if (
		get_post_type( $post_id ) !==
		$display_period_post_type
	) {
		return;
	}


	/*
	 * ==========================================================
	 * 表示タイプを保存
	 * ==========================================================
	 */

	if (
		isset(
			$_POST['custom_display_type']
		)
	) {

		$display_type = sanitize_key(
			wp_unslash(
				$_POST['custom_display_type']
			)
		);

		$allowed_types = array(
			'default',
			'days',
			'unlimited',
		);

		if (
			in_array(
				$display_type,
				$allowed_types,
				true
			)
		) {

			update_post_meta(
				$post_id,
				'_custom_display_type',
				$display_type
			);
		}
	}


	/*
	 * ==========================================================
	 * 表示日数を保存
	 * ==========================================================
	 */

	if (
		isset(
			$_POST['custom_display_days']
		)
	) {

		$display_days = absint(
			wp_unslash(
				$_POST['custom_display_days']
			)
		);

		if (
			$display_days > 0
		) {

			update_post_meta(
				$post_id,
				'_custom_display_days',
				$display_days
			);

		} else {

			delete_post_meta(
				$post_id,
				'_custom_display_days'
			);
		}
	}


	/*
	 * ==========================================================
	 * トップ固定を保存
	 * ==========================================================
	 */

	if (
		isset(
			$_POST['custom_pin_top']
		)
	) {

		update_post_meta(
			$post_id,
			'_custom_pin_top',
			'1'
		);

	} else {

		delete_post_meta(
			$post_id,
			'_custom_pin_top'
		);
	}
}
add_action(
	'save_post',
	'custom_display_period_save'
);

次に、Index.phpに追記した ”② Indexページに追記”と置き変えてください。
表示させるラベル、件数を変更・追加を行う場合には黄いろハイライト部分を変更してください。

<?php

global $default_display_days;


/*
 * ==========================================================
 * NEWS表示設定
 * ==========================================================
 */

/**
 * 最大表示件数
 *
 * 例：
 * 3件表示 → 3
 * 5件表示 → 5
 */
$max_display_posts = 3;


/**
 * NEWSラベル設定
 *
 * 左側 ＝ NEWSカテゴリー名
 * 右側 ＝ 一覧に表示する文言
 */
$news_label_settings = array(

	// 該当カテゴリーがない場合
	'default' => 'お知らせ',

	// カテゴリーごとの表示文言
	'categories' => array(

		'ハワイNews'   => 'ニュース',
		'気になるNews' => 'ニュース',
		'お知らせ'     => 'お知らせ',

	),

);


/*
 * ==========================================================
 * NEWS取得
 * ==========================================================
 */

$information = get_posts( array(
	'post_type'      => 'news',
	'posts_per_page' => -1,
	'post_status'    => 'publish',
	'orderby'        => 'date',
	'order'          => 'DESC',
) );


/*
 * トップ固定投稿
 */
$pinned_information = array();


/*
 * 通常投稿
 */
$normal_information = array();


if ( $information ) {

	$now = current_time( 'timestamp' );

	foreach ( $information as $post ) {

		/*
		 * ------------------------------------------------------
		 * 表示対象かどうか
		 * ------------------------------------------------------
		 */

		$is_display = false;


		/*
		 * 表示タイプを取得
		 */
		$display_type = get_post_meta(
			$post->ID,
			'_custom_display_type',
			true
		);


		/*
		 * 未設定の場合はデフォルト
		 */
		if ( $display_type === '' ) {
			$display_type = 'default';
		}


		/*
		 * ------------------------------------------------------
		 * 無期限
		 * ------------------------------------------------------
		 */

		if ( $display_type === 'unlimited' ) {

			$is_display = true;

		} else {

			/*
			 * 表示期間を取得
			 */
			$display_days = get_post_meta(
				$post->ID,
				'_custom_display_days',
				true
			);


			/*
			 * 投稿側で日数が未設定の場合は
			 * デフォルト値を使用
			 */
			if ( $display_days === '' ) {
				$display_days = $default_display_days;
			}


			$display_days = absint(
				$display_days
			);


			/*
			 * 0以下の場合もデフォルト値
			 */
			if ( $display_days <= 0 ) {
				$display_days = $default_display_days;
			}


			/*
			 * 投稿日時
			 */
			$post_time = get_post_time(
				'U',
				false,
				$post
			);


			/*
			 * 表示終了日時
			 */
			$expire_time = $post_time + (
				$display_days *
				DAY_IN_SECONDS
			);


			/*
			 * 表示期間内
			 */
			if ( $now <= $expire_time ) {
				$is_display = true;
			}
		}


		/*
		 * ------------------------------------------------------
		 * 表示対象の記事を
		 * トップ固定 / 通常 に振り分け
		 * ------------------------------------------------------
		 */

		if ( $is_display ) {

			$pin_top = get_post_meta(
				$post->ID,
				'_custom_pin_top',
				true
			);


			/*
			 * トップ固定
			 */
			if ( $pin_top === '1' ) {

				$pinned_information[] = $post;

			/*
			 * 通常
			 */
			} else {

				$normal_information[] = $post;
			}
		}
	}
}


/*
 * ==========================================================
 * 表示順を作成
 * ==========================================================
 *
 * 1. トップ固定投稿
 * 2. 通常投稿
 *
 * それぞれ投稿日が新しい順
 */

$display_information = array_merge(
	$pinned_information,
	$normal_information
);


/*
 * ==========================================================
 * 最大表示件数に制限
 * ==========================================================
 */

$max_display_posts = absint(
	$max_display_posts
);

if ( $max_display_posts > 0 ) {

	$display_information = array_slice(
		$display_information,
		0,
		$max_display_posts
	);
}


/*
 * ==========================================================
 * NEWS表示
 * ==========================================================
 */

if ( $display_information ) :
?>

<ul class="news-list">

<?php
foreach ( $display_information as $post ) :

	setup_postdata( $post );


	/*
	 * ----------------------------------------------------------
	 * 表示ラベルを決定
	 * ----------------------------------------------------------
	 */

	$news_label = $news_label_settings['default'];

	$terms = get_the_terms(
		get_the_ID(),
		'category_news'
	);

	if ( $terms && ! is_wp_error( $terms ) ) {

		foreach ( $terms as $term ) {

			if (
				isset(
					$news_label_settings['categories'][ $term->name ]
				)
			) {

				$news_label =
					$news_label_settings['categories'][ $term->name ];

				break;
			}
		}
	}
?>

<li>

	<span class="new-txt">
		<?php echo esc_html( $news_label ); ?>
	</span>

	<?php the_time( 'Y年n月j日' ); ?> -

	<a href="<?php the_permalink(); ?>">
		<?php the_title(); ?>
	</a>

</li>

<?php
endforeach;

wp_reset_postdata();
?>

</ul>

<?php endif; ?>

表示を揃えたい場合は、下記 CSSを参考に

.new-txt {
	display: inline-block;
	width: 5em;
	text-align: center;
}

ショートコードの変更はありません。
志位着記事の並び順は

トップ固定の記事（新しい順）
↓
トップ固定の記事（新しい順）
↓
通常記事（新しい順）
↓
通常記事（新しい順
となります

タイトルが長すぎて改行する際に、タイトルの初めの位置に揃えて改行させる

Index.phpの下記部分を置き変えてください。
298行目あたり

<li>

	<span class="new-txt">
		<?php echo esc_html( $news_label ); ?>
	</span>

	<?php the_time( 'Y年n月j日' ); ?> -

	<a href="<?php the_permalink(); ?>">
		<?php the_title(); ?>
	</a>

</li>

の部分を下記に置き換え

<li>

	<span class="new-txt">
		<?php echo esc_html( $news_label ); ?>
	</span>

	<span class="news-date">
		<?php the_time( 'Y年n月j日' ); ?>
	</span>

	<span class="news-separator">-</span>

	<a
		class="news-title"
		href="<?php the_permalink(); ?>"
	>
		<?php the_title(); ?>
	</a>

</li>

下記 CSSを追記

.news-list {
	list-style: none;
	padding-left: 0;
}

.news-list li {
	display: grid;
	grid-template-columns:
		auto
		5em
		auto
		auto
		minmax(0, 1fr);
	column-gap: 0.25em;
	align-items: start;
}

.news-list li::before {
	content: "・";
	font-weight: 700;
	margin-right: 0;
}

.news-list .new-txt {
	width: 5em;
	text-align: center;
}

.news-list .news-date,
.news-list .news-separator {
	white-space: nowrap;
}

.news-list .news-title {
	min-width: 0;
}

改行せずに「...」で1行にする場合、上記 CSSに下記を追加。

.news-list .news-title {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

さいごに

投稿別に表示するものを指定できるようにしたものです。
内容によっては3日間だけ表示させたいけれど、他は14日間表示のままにしたい場合に対応させたものです。

興味のある方はお試しください。

WordPress上でアイキャッチ画像を作成・編集できるプラグイン「Hwinote iCatch Editor」を、Ver2.0.0へアップデートしました。

Ver2.0.0は、公開版Ver1.6.0からの大型アップデートです。

これまでのアイキャッチ画像作成機能に加えて、

• Gutenbergの画像ブロック編集
• メディアライブラリ画像の編集
• 背景画像・画像レイヤーのクロップ
• 複数レイヤーの選択とグループ化
• 画像の一部分をコピーして画像レイヤー化
• カスタムフォントファイルの登録
• PNG・JPEGなどの保存形式選択
• 既存のメディア画像を同じ添付ファイルIDのまま直接置き換える機能

など、多くの機能を追加しました。

Ver1.6.0までは、主に「WordPressでアイキャッチ画像を作成するためのツール」でした。

Ver2.0.0では、アイキャッチ画像だけでなく、記事内の画像やメディアライブラリの画像までWordPress管理画面内で編集できる画像編集ツールへと機能を拡張しています。

この記事では、Hwinote iCatch Editor Ver2.0.0の新しい機能、特徴、基本的な使い方を紹介します。

Hwinote iCatch Editorとは？

Hwinote iCatch Editorは、WordPressの投稿編集画面やメディアライブラリーで動作する画像編集プラグインです。

ブラウザー上のキャンバスを使って、

• 背景画像
• 文字
• 図形
• 線
• 吹き出し
• マーカー
• 別の画像

などを組み合わせ、ブログやWebサイトで使用する画像を作成できます。

Ver2.0.0では3か所から画像を編集

Ver2.0.0では、大きく分けて3つの方法でHwinote iCatch Editorを利用できます。

1．アイキャッチ画像

従来と同じように、投稿や固定ページなどの編集画面からアイキャッチ画像を編集できます。

記事タイトルを使ったアイキャッチ画像の作成はもちろん、背景画像に文字・図形・別の画像などを追加して自由にデザインできます。

2．Gutenbergの画像ブロック

Ver2.0.0では、ブロックエディターで選択している画像ブロックの画像をHwinote iCatch Editorで編集できます。

たとえば、

「スクリーンショットに矢印を追加する」

「画像の一部分を囲む」

「画像に説明文を追加する」

といった作業を、記事を編集しながら行えます。

3．メディアライブラリ

WordPressのメディアライブラリに登録済みの画像も編集できます。

編集した画像を別の画像として保存するだけでなく、条件を満たしている画像では元画像を直接置き換えることもできます。

設定画面について

Hwinote iCatch Editorをインストール・有効化したら、

WordPress管理画面 → 設定 → Hwinote iCatch Editor

を開きます。

ここで主に次の項目を設定します。

• 画像ブロック連携
• 保存形式
• JPEG品質
• フォントの読み込み方式

最初に自分のサイトに合った設定をしておけば、通常の画像編集時には毎回変更する必要はありません。

⓵ 画像ブロック連携の設定

Ver2.0.0では、Gutenbergの画像ブロックからHwinote iCatch Editorを起動できます。

設定画面では、この画像ブロック連携を使用するかどうかを設定できます。

画像ブロック連携を有効にすると、選択している画像ブロックからHwinote iCatch Editorを起動する操作が追加されます。

起動方法として、ブロックエディターのツールバーやサイドバーから利用できます。

画像ブロックを編集する必要がなく、

「Hwinote iCatch Editorはアイキャッチ画像の作成だけに使いたい」

という場合は、画像ブロック連携を使用せずに従来と同じ使い方をすることもできます。

② 保存形式の設定

Hwinote iCatch Editorで生成する画像の保存形式を設定できます。

Ver2.0.0では、編集対象や画像形式に応じて、

• PNG
• JPEG
• 元画像と同じ形式

などを利用できます。

PNG

PNGは、

• 文字を中心とした画像
• 図形を多く使った画像
• スクリーンショット
• 透過を使用する画像

などに向いています。

操作説明用の画像や、文字を中心としたアイキャッチ画像にも使いやすい形式です。

JPEG

JPEGは、

• 写真を中心としたアイキャッチ画像
• 背景に写真を大きく使用する画像
• ファイルサイズを抑えたい画像

などに向いています。

JPEGでは透明部分を保持できないため、透過を必要とする画像ではPNGを使用してください。

元画像と同じ形式

画像ブロックやメディアライブラリの画像を編集する場合は、対応している画像で元画像と同じ形式を利用できます。

③ JPEG品質の設定

JPEG形式で画像を保存する場合の画質を設定できます。

JPEGでは、画質を高くすると画像がきれいになりますが、ファイルサイズも大きくなります。

逆に画質を下げるとファイルサイズは小さくなりますが、写真や文字の周囲などに圧縮による劣化が目立つ場合があります。

ブログで使用する場合は、画像の見た目とファイルサイズのバランスを確認しながら調整してください。

PNGで保存する場合、このJPEG品質設定は使用されません。

④ フォントの読み込み方式

Hwinote iCatch Editorでは、記事タイトル、テキストボックス、文字入り図形、吹き出しでカスタムフォントを使用できます。

選択できる方式は次の3種類です。

• 自動判定（推奨）
• 端末フォント
• サイト登録フォント

通常は、初期設定の**「自動判定（推奨）」**を使用してください。

自動判定（推奨）

現在のブラウザーで利用できる端末フォントと、Hwinote iCatch Editorに登録したサイト内フォントから、利用可能なフォントを判定します。

ブラウザーが端末フォントに対応していない場合でも、サイトに登録したフォントを利用できます。

端末フォント

現在使用している端末にインストールされたフォントを使用します。

ただし、利用できるフォントはブラウザーによって異なります。macOS版のChromeやEdgeなどでは利用できる場合がありますが、Safariではユーザーが追加した端末フォントを基本的に使用できません。

また、別の端末に同じフォントが入っていない場合は、表示が異なることがあります。

サイト登録フォント

Hwinote iCatch Editorを通じて、WordPressサイトへ登録したフォントを使用します。

対応形式は次のとおりです。

• WOFF2
• WOFF
• TTF
• OTF

登録したフォントはWordPressサイト内に保存されるため、端末に同じフォントがインストールされていなくても利用できます。Hwinote iCatch Editor Ver2.0.0では、これらのフォント形式をサイトへ登録し、同一サイト内で安定して描画する機能が用意されています。

次のような場合は、サイト登録フォントがおすすめです。

• Safariを使用する
• WindowsとMacで同じ表示にしたい
• 複数の端末やユーザーで編集する
• 使用するフォントをサイト全体で統一したい

どの方式を選べばよい？

通常は**「自動判定（推奨）」**を使用してください。

端末にインストールしたフォントだけを使う場合は「端末フォント」、Safariを使用する場合や複数の端末で同じ表示にそろえたい場合は「サイト登録フォント」が適しています。

アイキャッチ画像を作成する

ここからは実際の編集機能を紹介します。

投稿や固定ページなどを開き、Hwinote iCatch Editorのアイキャッチ画像編集画面を開きます。

Ⓐ プレビューだけを拡大・縮小

大きな画像を編集するとき、キャンバス全体を画面内に表示するのが難しい場合があります。

実際に保存する画像サイズを変えずに、編集画面上のプレビューだけを拡大・縮小できます。

全体を確認するときは縮小し、細かな位置を調整するときは拡大する、といった使い方ができます。

プレビュー倍率を変更しても、保存される画像の縦横サイズには影響しません。

Ⓑ Undo・Redo

操作を間違えた場合には、

Undo（元に戻す）と Redo（やり直す）

を利用できます。

文字や図形の移動だけでなく、各種編集操作を履歴から戻せます。

装飾だけリセットは背景以外のものをリセットします。
すべてをリセットは閉経を含むすべてものをリセットすることが出来ます。

⓵ キャンバスサイズを設定

最初に作成する画像のサイズを設定します。

用意されているプリセットのほか、任意の幅と高さを指定できます。

作成可能なキャンバスサイズは最大4000×4000ピクセルです。

サイトで使用しているアイキャッチ画像のサイズに合わせて設定すると、毎回同じサイズの画像を作成できます。

② 背景を設定

背景には、

• 現在のアイキャッチ画像
• WordPressのメディアライブラリ
• パソコンからアップロードした画像

を利用できます。

画像を使用せず、背景色だけを設定することもできます。

背景画像には、

• 拡大・縮小
• 表示位置
• 明るさ
• コントラスト
• 彩度
• ぼかし

などの調整を行えます。

キャンバスサイズを変更したときの背景画像の扱いも設定できます。

③ 背景画像をクロップ

Ver2.0.0の大きな追加機能の一つがクロップです。

背景画像を見ながら、使用したい部分だけを選択できます。

クロップ範囲はマウス操作で移動・拡大・縮小できます。

縦横比は、

• 自由
• 1:1
• 4:3
• 16:9

から選択できます。

たとえば横長の写真から人物が写っている部分だけを使ったり、アイキャッチ画像に適した構図へ調整したりできます。

④ 図形を追加

画像にはさまざまな図形を追加できます。

主なものとして、

• 四角形
• 円・楕円
• 矢印

などがあります。

色や枠線などを変更して、画像の一部分を目立たせたり、デザイン用のパーツとして使用したりできます。

横書き・縦書きの文字を追加

記事タイトル以外にも、自由な文字を追加できます。

通常の横書きテキストだけでなく、縦書きのテキストボックスにも対応しています。

サブタイトルや補足説明、画像内の注釈など、複数の文字要素を配置できます。

文字にもフォント、色、影、縁取り、回転、アーチなどを設定できます。

丸付き数字・英字マーカー

手順画像を作成するときに便利な丸付きマーカーも利用できます。

• 丸付き数字
• 丸付き大文字アルファベット
• 丸付き小文字アルファベット

に対応しています。

開始する数字や文字も選べます。

たとえば、

① メニューを開く
② 設定を選択
③ 保存する

といった説明画像を作成できます。

線を追加

線についても複数の種類を利用できます。

• 直線
• 二重線
• 破線
• 点線
• 波線
• 矢印付き線

などを選択できます。

矢印を使って操作する場所を示したり、画像内の要素を結んだりする用途にも使用できます。

吹き出しを追加

説明画像などで便利な吹き出しも利用できます。

吹き出しのしっぽ部分も調整できるため、説明したい対象に向けて配置できます。

スクリーンショットへ簡単な解説を入れたい場合にも便利です。

画像を追加

背景とは別に、画像を「画像レイヤー」として追加できます。

画像レイヤーには、

• メディアライブラリ
• パソコンからアップロード
• クリップボード

の画像を利用できます。

追加した画像は背景とは独立しているため、自由に移動・拡大・回転できます。

カスタムフォントの設定

カスタムフォントの設定方法には2通りの方法があります。

⓵ フォントでカスタムフォントを選択くすると、カスタムフォント名の入力欄が表示されます。

そこにシステムで使用できるフォント名を入力するとフォントが追加され反映されます。
※ Mac や Safari などを使用している場合は、システムフォントがブラウザーで使用できない場合がります。

② システムフォントが使用できない。または、iCatch Editor だけでカスタムフォントを使用できるようにしたい場合は、フォントファイルをアップロードして使用することが可能です。

カスタムフォントを選択をクリックすると追加されたフォントの一覧、その下に、フォントファイルのを選択のボタンが表示され、クリックしアップロードするファイルを選択してアップロードします。

画像レイヤーのデザイン

画像レイヤーには、

• 枠線
• 角丸
• 影
• 透明度
• 左右反転
• 上下反転
• 位置
• サイズ
• 回転

などを設定できます。

単に別の画像を重ねるだけでなく、デザインの一部として使用できます。

円形・楕円形に画像を表示

画像レイヤーは、

• 四角形
• 角丸四角形
• 円
• 楕円

などの形で表示できます。

プロフィール画像を丸く表示したり、写真の一部分だけを円形で見せたりできます。

画像レイヤーもクロップ

クロップ機能は背景画像だけではありません。

追加した画像レイヤーにも使用できます。

画像レイヤーのクロップは、元の画像ファイルを直接切り取るのではなく、Hwinote iCatch Editor上で表示する範囲を指定する非破壊方式です。

さらに、

画像そのものの縦横比固定 と クロップ範囲の縦横比固定 は、それぞれ独立してON・OFFできます。

そのため、

「表示する画像サイズは自由に変更する」

「切り抜く範囲だけは1:1に固定する」

といった編集もできます。

キャンバスの一部分をコピーして画像にする

キャンバス上の一部分を選択し、新しい画像レイヤーとしてコピーできます。

コピーする範囲は、

• 四角形
• 円形
• 楕円形

から選べます。

たとえば操作画面のスクリーンショットを背景にして、

「このボタン部分だけをコピーして拡大表示する」

といった説明画像も作成できます。

外部の画像編集ソフトで切り抜き画像を別途作る必要がありません。

レイヤー一覧で各要素を管理

追加した文字、図形、画像などはレイヤー一覧から管理できます。

各レイヤーでは、

• 選択
• 表示・非表示
• ロック・ロック解除
• 削除
• 前面へ移動
• 背面へ移動

などを操作できます。

画像内の要素が多くなった場合でも、レイヤー一覧から目的の要素を選択できます。

複数レイヤーをまとめて選択

Ver2.0.0では、複数の要素を同時に選択できます。

たとえば、

• 矢印＋説明文
• 写真＋枠＋文字
• 複数の図形

などをまとめて選択できます。

複数の要素を一度に移動したいときに便利です。

グループ化

複数選択した要素は、1つのグループとしてまとめられます。

グループ化した要素は、まとめて、

• 移動
• 拡大・縮小
• 回転
• 複製

できます。

複数の要素の位置関係を崩さず、そのまま別の場所へ移動できます。

必要になればグループを解除して、再び各要素を個別に編集できます。

複製

1つのレイヤーだけでなく、作成したグループ全体を複製できます。

同じデザインの説明パーツを複数配置したい場合などに便利です。

ガイド線とスナップ

文字や図形を配置するときには、ガイド線とスナップを利用できます。

キャンバスの中央やほかの要素との位置関係を確認しながら配置できます。

Ver2.0.0では、

スナップ機能 と ガイド線の表示

をそれぞれ独立して設定できます。

「位置合わせはしたいけれどガイド線は表示したくない」といった使い方もできます。

⑤ 記事タイトルを配置

投稿タイトルを画像内へ表示できます。

タイトルはキャンバス上でドラッグして移動でき、

• サイズ
• フォント
• 文字色
• 縁取り
• 影
• 回転
• アーチ

などを設定できます。

記事タイトルをそのまま利用できるため、タイトルをコピーして画像編集ソフトへ貼り付ける必要がありません。

キーボード操作

編集を効率よく行うためのキーボード操作にも対応しています。

Escapeキーについても、現在行っている編集内容に応じた優先処理が行われるようになっています。

マウスだけでなくキーボードも組み合わせることで、よりスムーズに編集できます。

編集した画像を保存

画像が完成したら保存します。

Hwinote iCatch Editorで生成された画像は、WordPressのメディアライブラリへ登録されます。

保存後にはWordPressの添付ファイル情報も作成され、

• サムネイル
• 中サイズ
• 大サイズ
• テーマやプラグインが登録した画像サイズ

なども生成・更新されます。

アイキャッチ画像として保存する場合

アイキャッチ画像編集から保存した場合は、生成した画像がメディアライブラリへ登録され、その投稿のアイキャッチ画像として設定されます。

Gutenberg画像ブロックを編集する

画像ブロック連携を有効にしている場合は、ブロックエディター上で画像ブロックを選択し、Hwinote iCatch Editorを開きます。

選択中の画像を背景として読み込み、

• 文字
• 矢印
• 図形
• 別の画像
• 吹き出し

などを追加できます。

保存方法を選んで保存

編集後は、

新しい画像として保存 または、元の画像を直接置き換える を選択し保存できます。

新しい画像として保存

「新しい画像として保存」を選択すると、編集結果が新しいメディアライブラリの添付ファイルとして保存されます。

元画像はそのまま残ります。

選択していた画像ブロックは、新しく作成した画像へ切り替わります。

ここで重要なのが、画像を保存したあとに投稿または固定ページ自体も更新する必要があることです。

Hwinote iCatch Editorで新しい画像を作成しただけでは、画像ブロックの変更はまだ投稿内容として保存されていません。

画像を保存した後、WordPressの「更新」または「保存」を行ってください。

元画像を直接置き換える

対応している画像では、現在選択しているメディアライブラリの画像を直接置き換えることもできます。

直接置き換えでは、新しい添付ファイルを作るのではなく、同じ添付ファイルIDを維持したまま画像ファイルと画像情報を更新します。

そのため、同じメディア画像を使用している別の記事やウィジェットなども、新しい画像へ変わります。

URLを変更せず既存画像を修正したい場合に便利です。

直接置き換えを使う場合の注意点

直接置き換えは非常に便利な機能ですが、通常の「新しい画像として保存」とは性質が大きく異なります。

直接置き換えると、同じメディアライブラリの添付ファイルを使用しているすべての場所に影響します。

たとえば1枚の画像を複数の記事で使用していた場合、そのすべてが置き換え後の画像になります。

また、Hwinote iCatch Editorには、置き換え前の画像へ戻す機能はありません。

重要な画像を編集する場合は、事前にバックアップを作成するか、「新しい画像として保存」を利用してください。

保存前には確認画面が表示されるため、内容と保存方法を確認してから実行してください。

4000ピクセルを超える画像について

元画像の縦または横が4000ピクセルを超えている場合、直接置き換えは利用できません。

Hwinote iCatch Editorのキャンバスサイズは最大4000×4000ピクセルのため、元の大きな画像を意図せず縮小してしまうことを防ぐためです。

この場合でも、新しい画像として保存する方法は利用できます。

画像を置き換えたのに以前の画像が表示される場合

直接置き換えでは、画像URLが同じまま更新される場合があります。

そのため、画像を変更した直後でも、

• Webブラウザー
• WordPressのキャッシュプラグイン
• Webサーバー
• リバースプロキシ
• CDN

などに以前の画像が残っていると、古い画像が表示されることがあります。

画像が変わらない場合は、これらのキャッシュを削除して再読み込みしてください。

保存後は1枚の完成画像になります

Hwinote iCatch Editorを使用する際に覚えておきたい重要な点があります。

作成した画像を保存すると、

• 文字
• 図形
• 画像レイヤー
• クロップ情報
• 編集履歴

などは、すべて1枚の完成画像として統合されます。

編集用のプロジェクトデータとして保存されるわけではありません。

そのため、一度保存した画像をもう一度開いて、

「前回追加した文字だけを変更する」

「前回の矢印を動かす」

「前回作ったグループを編集する」

といった操作はできません。

保存前に内容を確認してから完成画像として保存してください。

メディアライブラリ画像を編集

メディアライブラリから編集する場合は、

1. WordPressのメディアライブラリを開く
2. 編集したい画像を選択する
3. 「さらに詳細を編集」を開く
4. 「この画像を編集」からHwinote iCatch Editorを起動する

という流れで利用できます。

編集後は、

• 新しい画像として保存
• 元画像を置き換える

方法を選択できます。

JPEG、PNG、WebPなど、対応している画像で直接置き換えを利用できます。

デスクトップとタブレットに対応

Hwinote iCatch Editorは、デスクトップPCとタブレットでの利用に対応しています。

Ver2.0.0では、

• iPad
• iPad Mini
• 縦向き
• 横向き

なども考慮して、編集画面のレイアウトを調整しています。

一方、スマートフォンでは編集領域が小さく、すべてのキャンバス操作を行うことが難しいため、Hwinote iCatch Editorを起動する操作は表示されません。

基本的には、PCまたはタブレットで利用してください。

日本語・英語に対応

Hwinote iCatch Editorのソースインターフェースは英語で作成されています。

日本語の翻訳ファイルも同梱しているため、WordPressを日本語環境で使用している場合は日本語で操作できます。

Ver2.0.0では翻訳ファイルも現行の機能に合わせて更新しています。

Hwinote iCatch Editorの基本的な使い方

最後に、それぞれの用途での基本的な流れをまとめます。

アイキャッチ画像を作る

1. 投稿または固定ページを開きます。
2. Hwinote iCatch Editorを開きます。
3. キャンバスサイズを設定します。
4. 背景画像または背景色を設定します。
5. 必要に応じて背景画像をクロップします。
6. 記事タイトルのデザインを調整します。
7. 文字・図形・線・画像などを追加します。
8. 必要に応じてグループ化や位置合わせを行います。
9. 完成状態を確認します。
10. 保存してアイキャッチ画像に設定します。

記事内の画像へ説明を追加する

1. ブロックエディターで画像ブロックを選択します。
2. Hwinote iCatch Editorを開きます。
3. 矢印や囲み枠を追加します。
4. 必要に応じて説明文やマーカーを追加します。
5. 新しい画像として保存するか、元画像を置き換えるか選択します。
6. 新しい画像として保存した場合は投稿を更新します。

ブログの操作説明やマニュアル記事などで便利な使い方です。

メディアライブラリ画像を修正する

1. メディアライブラリから画像を選択します。
2. 画像の詳細編集画面を開きます。
3. Hwinote iCatch Editorを起動します。
4. クロップや文字・図形追加などの編集を行います。
5. 新しい画像として保存するか、元画像を置き換えるか選択します。

元画像を残しておきたい場合は、「新しい画像として保存」をおすすめします。

Ver1.6.0からVer2.0.0で何が変わった？

Ver1.6.0と比べると、Ver2.0.0では利用できる範囲が大きく広がりました。

Ver1.6.0では「アイキャッチ画像を作る」という用途が中心でした。

Ver2.0.0では、

WordPressで使用する画像を、その場で作成・修正する

という用途まで広がっています。

こんな使い方におすすめ

Hwinote iCatch Editorは、たとえば次のような場合に便利です。

ブログのアイキャッチ画像を手軽に作りたい

記事を書いたあと、そのままWordPress上でアイキャッチ画像を作れます。

スクリーンショットへ矢印を追加したい

画像ブロックを直接編集できるため、別の画像編集ソフトを開かずに説明画像を作れます。

画像の一部分を拡大して説明したい

キャンバス範囲のコピー機能を使って、一部分を新しい画像レイヤーとして配置できます。

メディアライブラリの画像を少しだけ修正したい

クロップや文字追加などの簡単な修正であれば、WordPress管理画面の中だけで完了できます。

画像URLを変更せず修正したい

対応している画像では、同じ添付ファイルIDを維持した直接置き換えを利用できます。

さいごに

Hwinote iCatch Editor Ver2.0.0では、これまでのアイキャッチ画像作成機能を大幅に拡張しました。

特に大きな追加機能は、

Gutenberg画像ブロックの編集

メディアライブラリ画像の編集

背景・画像レイヤーのクロップ

複数選択とグループ化

キャンバス範囲のコピー

カスタムフォント

PNG・JPEGなどの出力設定

既存メディア画像の直接置き換え

です。

また、設定画面から画像ブロック連携、保存形式、JPEG品質、フォントの読み込みなどをサイトに合わせて設定できます。

Ver1.6.0では主にアイキャッチ画像を作成するためのプラグインでしたが、Ver2.0.0では、記事内の説明画像やメディアライブラリ画像の編集まで行えるようになりました。

本格的な画像編集ソフトの代わりを目指すものではなく、

「ブログやWebサイトで使う画像を、WordPressから離れず手軽に作成・修正する」

ことを目的とした画像編集ツールです。

記事を書きながら画像もその場で作成・修正したい方は、Hwinote iCatch Editor Ver2.0.0をぜひお試しください。

Wardpress.orgでプラグインを公開したのですが、誰も評価をしてくれないので思わず Google に聞いてみました。

聞いたのは5つのプラグインについてのそれぞれの評価とおすすめの使用方法、5つの中で役に立ちそうなものはの3点です。

時間のある方は暇つぶしに読んでいただけると嬉しいです。

5つのプラグインの評価は

WordPress.orgの公式ディレクトリ上では、開発者「hwinote」名義で5つのプラグインが登録・公開されています。

これらは現在いずれも「有効インストール数10未満」であり、公式ストア上でのユーザーレビュー（星評価）はまだ投稿されていません。そのため、世間的な口コミ評価はほぼありませんが、公式に掲載されている技術的な仕様や最新のアップデート（WordPress 7.0などの最新環境への対応確認）状況から、以下のような「機能・技術面での評価」ができます。

個人ブロガーやサイト管理者が抱える「細かいけれど深刻な不満」を、ピンポイントで解消する玄人向けのツール群として非常にロジカルに設計されています。 [1]

1. HwiNote Content Search Tool

• 機能: サイト内の投稿、固定ページ、カスタムフィールド、ウィジェット、ショートコードの使用場所を横断検索するツール。
• 技術的な評価: 通常のWordPressの検索では引っかからない「カスタムフィールドのメタデータ」や「ウィジェット内のテキスト」までAND/OR検索や正規表現を用いて一括検索できるのが最大の強みです。サイト引っ越し時のURL置換チェックや、過去記事のメンテナンスを行う管理者にとって、絶大な威力を発揮する優秀な監査ツールと評価できます。

2. Hwinote iCatch Editor

• 機能: 記事の編集画面内にポップアップ（モーダル）を開き、その場でアイキャッチ（サムネイル）画像をデザイン・生成できるツール。
• 技術的な評価: 外部の画像編集ソフトを立ち上げることなく、記事タイトルや背景、図形、吹き出しをプレビューしながら直感的に重ねてPNG画像を自動生成できます。ベースが英語UIでありながら日本語翻訳ファイルも同梱されており、海外展開も見据えた丁寧なローカライズ設計と頻繁な機能アップデート（アーチテキストやカスタムフォント対応など）が続けられている熱意ある実用ツールです。

3. Hwinote ROP Scheduler

• 機能: 過去の古い投稿を、指定した日数や1日の上限数のスケジュールに合わせて自動で「更新日（modified date）」をリフレッシュし、再公開（リパブリッシュ）する管理ツール。
• 技術的な評価: 記事本文を改変することなく、Cron（自動実行システム）のステータスを確認しながら安全に過去記事を再浮上させられます。過去資産を活かしたSEO施策（古い記事の定期メンテナンス・再評価）を自動化したい特化ブログや大規模サイトの運営者にとって、手動の手間を丸ごと省ける非常にスマートな自動化ツールです。

4. Hwinote Dashboard Control

• 機能: 増えすぎたプラグインを独自のカスタムタブでグループ分けし、ダッシュボード上のウィジェットや専用画面から一括操作（有効化・無効化）やメモ残しができる管理ツール。
• 技術的な評価: 多くのプラグインを検証・導入していると管理画面が煩雑になりますが、これをすっきり整理して個人的な備忘録（運用メモ）まで残せるようにしています。サイトの高速化検証や、多数のWebサイトを並行してメンテナンスする制作ディレクターやエンジニアの作業効率化に特化しています。

5. HWINote Scheduled Widget Display Control

• 機能: 従来のクラシックウィジェット（サイドバーやフッターなど）に対して、指定した日時やスケジュール（期間）に合わせて自動で表示・非表示を切り替える制御ツール。
• 技術的な評価: 「期間限定のキャンペーンバナー」や「夜間だけ表示したいお知らせ」など、手動で切り替えるのが面倒なウィジェットの露出を自動化できます。サイトの運用コストを下げ、機会損失を防ぐための実用的なマーケティング補助ツールとして機能します。

💡 総評

hwinote氏のプラグインはどれも派手な宣伝がされていないため認知度はこれからですが、「WordPressの標準機能では少し足りない管理・運用の手間」を綺麗に自動化・効率化するツールばかりです。

すべてのプラグインが最新のWordPress環境（Ver 7.0など）までテスト・適合されており、セキュリティやコード品質の審査が厳しいWordPress.orgの公式ディレクトリを突破しているため、個人開発のツールとしては技術的信頼性が非常に高いと評価できます。

この中で一般的に一番役に立ちそうなもは？

5つのプラグインの中で、一般的なブログ運営者やサイト管理者にとって「最も広く役に立つ（汎用性が高い）」ものは、間違いなく「Hwinote Content Search Tool」です。

その理由と、他のプラグインとの実用性の違いを解説します。

👑 一番役に立つ：HwiNote Content Search Tool

WordPressを運用していると、以下のような「特定の文字やコードをすべて書き換え・削除したい場面」が必ず訪れます。

• サイトを常時SSL化（https化）した際、古い「http://」のリンクが残っていないか探したいとき
• アフィリエイトのコードや、特定のショートコード、CSSのクラス名を一括でメンテしたいとき
• プラグインを解約・削除したあと、記事内に残ってしまったゴミコード（死んだショートコード）を見つけ出したいとき

WordPress標準の検索機能では、記事の「本文」しか検索できず、カスタムフィールドやウィジェット、ショートコードの裏側まで探すことができません。HwiNote Content Search Toolはこれらを横断して一括検索・ハイライト表示できるため、ブログの規模に関わらず「サイトの健康診断・メンテナンスツール」としてすべての運営者に必須級の価値があります。

次点で役に立つ（用途が合えば強力なもの）

3つとも非常に便利ですが、「特定の人にだけ刺さる」という点で上記の検索ツールには一歩及びません。

• 役立つ人: 画像編集ソフト（CanvaやPhotoshopなど）を毎回立ち上げるのが面倒な人。
• 理由: 記事編集画面から直接タイトル入りのアイキャッチを作れるのは非常に効率的ですが、すでに画像作成のワークフローが確立している人には不要になるため、2番手となります。

• 役立つ人: 過去に数百記事以上のストックがあり、リライトや過去資産の再活用（SEO対策）に力を入れている特化ブロガー。
• 理由: 古い記事の更新日を自動でリフレッシュして再公開できるのは強力ですが、まだ記事数が少ない初心者や、トレンドブログを運営している人には出番がありません。

• 役立つ人: 季節ごとのキャンペーン広告、夜間限定の案内など、期限付きのバナーをサイドバー等に設置したい人。
• 理由: ウィジェットの表示スケジュールを曜日・時間単位で自動化できるのは素晴らしいですが、固定のプロフィールや人気記事しかウィジェットに置かない一般的なブログでは、機能を持て余す可能性があります。

1. Hwinote iCatch Editor
   • 役立つ人: 画像編集ソフト（CanvaやPhotoshopなど）を毎回立ち上げるのが面倒な人。
   • 理由: 記事編集画面から直接タイトル入りのアイキャッチを作れるのは非常に効率的ですが、すでに画像作成のワークフローが確立している人には不要になるため、2番手となります。
2. Hwinote ROP Scheduler
   • 役立つ人: 過去に数百記事以上のストックがあり、リライトや過去資産の再活用（SEO対策）に力を入れている特化ブロガー。
   • 理由: 古い記事の更新日を自動でリフレッシュして再公開できるのは強力ですが、まだ記事数が少ない初心者や、トレンドブログを運営している人には出番がありません。
3. HWINote Scheduled Widget Display Control
   • 役立つ人: 季節ごとのキャンペーン広告、夜間限定の案内など、期限付きのバナーをサイドバー等に設置したい人。
   • 理由: ウィジェットの表示スケジュールを曜日・時間単位で自動化できるのは素晴らしいですが、固定のプロフィールや人気記事しかウィジェットに置かない一般的なブログでは、機能を持て余す可能性があります。

結論

まだ記事数が少ない初心者から、何年も運営しているベテランまで、「いつか必ず全員が直面するトラブルやメンテナンス」を解決してくれるという意味で、「HwiNote Content Search Tool」が最も一般的かつ実用性が高いプラグインと言えます。

各プラグインのおすすめの使用方法を

hwinote（ハワイ在住おやじの忘備録）氏が開発した5つのプラグインを、最も効果的かつ失敗しない形で使いこなすためのおすすめのシチュエーションと具体的な手順をまとめました。

サイト運営のフェーズや作業内容に合わせて、以下のように活用するのがベストです。

1. HwiNote Content Search Tool（コンテンツ横断検索）

💡 おすすめの使用方法：サイトの引っ越し（常時SSL化）や、過去記事の総メンテ時

1. サイトを「http」から「https」へ常時SSL化した際、検索窓に「http://自分のドメイン」と入力。
2. 通常の検索では見落としがちな「ウィジェット内のバナーリンク」や「カスタムフィールドのメタデータ」に隠れた古いリンクをあぶり出します。
3. 不要になったショートコード（引退させたプラグインのゴミコード）を「正規表現モード」で一括検索し、記事内のどこに残っているかを特定して綺麗に削除・修正します。

• 具体的な使い方:
  1. サイトを「http」から「https」へ常時SSL化した際、検索窓に「http://自分のドメイン」と入力。
  2. 通常の検索では見落としがちな「ウィジェット内のバナーリンク」や「カスタムフィールドのメタデータ」に隠れた古いリンクをあぶり出します。
  3. 不要になったショートコード（引退させたプラグインのゴミコード）を「正規表現モード」で一括検索し、記事内のどこに残っているかを特定して綺麗に削除・修正します。

2. Hwinote iCatch Editor（アイキャッチ画像生成）

💡 おすすめの使用方法：速報系ニュースの投稿や、スマホ1台での即時更新時

1. 画像編集ソフト（Canvaなど）を開くのが面倒な、ちょっとした日記や速報ニュースを執筆。
2. 投稿画面の右側にあるiCatch Editorのボタンを押し、記事タイトルをそのまま自動流し込み。
3. あらかじめ設定しておいたブログのブランドカラー（背景）やロゴを重ね、その場でアイキャッチを10秒で生成して保存。パソコンだけでなく、タブレットやスマホから記事をサクッと更新したい時に最適です。

• 具体的な使い方:
  1. 画像編集ソフト（Canvaなど）を開くのが面倒な、ちょっとした日記や速報ニュースを執筆。
  2. 投稿画面の右側にあるiCatch Editorのボタンを押し、記事タイトルをそのまま自動流し込み。
  3. あらかじめ設定しておいたブログのブランドカラー（背景）やロゴを重ね、その場でアイキャッチを10秒で生成して保存。パソコンだけでなく、タブレットやスマホから記事をサクッと更新したい時に最適です。

3. Hwinote ROP Scheduler（記事自動再公開）

💡 おすすめの使用方法：100記事以上のストックがある特化ブログの「過去資産」復活

1. 過去に書いて、アクセスが落ちてしまった「年中いつでも読まれる記事（エバーグリーンコンテンツ）」を用意。
2. このプラグインで「150日以上経過した記事を、1日1記事、深夜2時に自動で再公開する」といったスケジュールを設定。
3. 記事本文をいじることなく、自動で「更新日」が最新にリフレッシュされるため、Googleのクローラー（巡回ロボット）に「この記事は最新状態にメンテナンスされています」と自動でアピール（SEO施策）できます。

• 具体的な使い方:
  1. 過去に書いて、アクセスが落ちてしまった「年中いつでも読まれる記事（エバーグリーンコンテンツ）」を用意。
  2. このプラグインで「150日以上経過した記事を、1日1記事、深夜2時に自動で再公開する」といったスケジュールを設定。
  3. 記事本文をいじることなく、自動で「更新日」が最新にリフレッシュされるため、Googleのクローラー（巡回ロボット）に「この記事は最新状態にメンテナンスされています」と自動でアピール（SEO施策）できます。

4. Hwinote Dashboard Control（プラグイン一括管理）

💡 おすすめの使用方法：サイトの高速化テストや、トラブルの原因究明（不具合調査）

1. 「高速化プラグイン群」「セキュリティ群」「アフィリエイト計測用」のように、プラグインを機能ごとにグループ化。
2. 各プラグインのメモ欄に「〇〇プラグインと競合注意」「〇月〇日停止」などの運用メモを残す。
3. サイトの表示速度を測定する際、ダッシュボードのスイッチで「高速化プラグイン群」を一括でパッとOFFにして測定、終わったら一括でONに戻す。これにより、1個ずつ探して有効・無効を切り替える時間をゼロにできます。

• 具体的な使い方:
  1. 「高速化プラグイン群」「セキュリティ群」「アフィリエイト計測用」のように、プラグインを機能ごとにグループ化。
  2. 各プラグインのメモ欄に「〇〇プラグインと競合注意」「〇月〇日停止」などの運用メモを残す。
  3. サイトの表示速度を測定する際、ダッシュボードのスイッチで「高速化プラグイン群」を一括でパッとOFFにして測定、終わったら一括でONに戻す。これにより、1個ずつ探して有効・無効を切り替える時間をゼロにできます。

5. HWINote Scheduled Widget Display Control（ウィジェット表示制御）

💡 おすすめの使用方法：期間限定セール（Amazonブラックフライデーなど）や夜間限定告知

1. サイドバーや記事下に、アフィリエイトのセールバナー（例：Amazonプライムデーなど）をクラシックウィジェットで設置。
2. プラグインのスケジュール設定で「セールの開始日時」と「終了日時」を入力。
3. セールが終わった瞬間に自動でバナーが消える（非表示になる）ため、「セールが終わっているのに古いバナーを貼りっぱなしにしてしまい、サイトの信頼性を落とす」という手動ミスを完全に防げます。

• 具体的な使い方:
  1. サイドバーや記事下に、アフィリエイトのセールバナー（例：Amazonプライムデーなど）をクラシックウィジェットで設置。
  2. プラグインのスケジュール設定で「セールの開始日時」と「終了日時」を入力。
  3. セールが終わった瞬間に自動でバナーが消える（非表示になる）ため、「セールが終わっているのに古いバナーを貼りっぱなしにしてしまい、サイトの信頼性を落とす」という手動ミスを完全に防げます。

💡 運用のステップアップ例

まずはサイトの定期メンテ用に「Content Search Tool」を導入し、記事数が多くなってきたら作業効率化のために「iCatch Editor」や「ROP Scheduler」を追加していく、という使い方が最も無駄がありません。

現在、ご自身のブログやサイトで「一番自動化したい作業」や「今困っている手間」は、この5つのうちのどれに近そうですか？

さいごに

Google に聞いても評価されないと思っていましたが意外でした。

この中で個人的に一番のお気に入りは 『Dashboard Control』です。

いろいろなトラブルシューティングや普段は必要ないけれど使いたいときにダッシュボードで有効化できるので、一覧から探す必要もなく便利だと思います。

そして、『iCatch Editor』です。
カスタム投稿ではアイキャッチ画像を使いまわしをしているので、そこに投稿編集画面からタイトルを入れたり簡単な図形を入れてられるので結構お気に入りで使っています。

いずれのプラグインも自分であったらいいのにという思いで作ったものなので、ほかの方に当てはまるかどうかわは分かりませんが、興味のある方は使ってみてください。

毎回アイキャッチ画像を作るのは、意外と手間がかかります。
画像編集ソフトを開いたり、文字を入れたり、サイズを調整したりしているうちに、記事を書く時間よりも画像作成に時間がかかってしまうこともあります。

そこで、以前作成した「投稿画面からそのままタイトル入りのアイキャッチ画像を作成できるツール」を使用していたのですが、Wordpress.orgで公開することを前提に見直すことにしました。

今回は、もう少し使い勝手を良くするために画像の編集画面を見直しとともに機能の追加を行っています。
興味のある方はぜひお試しください。

1.2.0以前の古いバージョンを使っている方は、プラグインを無効にした後、削除してから現行バージョンをインストールしてください。
プラグイン名、フォルダー名が変更になっています。

アイキャッチ画像作成ツールとは

アイキャッチ画像作成ツールは、ブログ記事に使うアイキャッチ画像を手軽に作成するためのツールです。

記事タイトルや表示したい文字を入力し、画像のデザインを調整することで、ブログに掲載しやすいアイキャッチ画像を作成できます。

特に、WordPressブログを運営している方や、記事ごとにアイキャッチ画像を用意している方に向けたツールです。

このツールは、次のような方におすすめです。

• ブログのアイキャッチ画像作成に時間がかかっている方
• 記事ごとに画像を用意するのが面倒に感じている方
• デザインが苦手でも、見やすい画像を作りたい方
• WordPressブログの更新作業を効率化したい方
• 記事作成に集中できる環境を整えたい方

主な機能

・画像サイズを選択できる

アイキャッチ画像のサイズは、画面上部のタブから選択できます。

タブに表示されているサイズは、画像ファイルとして作成される元サイズです。実際の表示サイズは、WordPressテーマや表示場所によって変わる場合があります。

・背景を調整できる

背景タブでは、背景の変更や画像の表示エリアを調整できます。

見せたい部分を中心に表示したり、文字が読みやすい位置に背景を配置したりできます。

・図形を追加できる

図形タブでは、アイキャッチ画像に図形を追加できます。

追加した図形は、位置や大きさを調整でき、タイトルを見やすくしたり画像のアクセントにしたりできます。

・タイトルを調整できる

タイトルタブでは、タイトル文字の変更や、文字の大きさ・位置を調整できます。

投稿タイトルをそのまま使うことも、画像内で読みやすいように短く変更することもできます。

基本的な使い方

投稿編集画面の右にある設定画面から起動します。

1. 編集画面

起動すると編集画面が表示されます。
左手には、現在設定されているアイキャッチ画像とタイトルが表示されます。
右手には、各設定内容を表示するタブが表示されます。
そして下の方には、追加したテキストや図形などをリセットするボタンを配置しています。
選択した、タイトル、図形はマウスで移動、拡大縮小、回転、コピーペイストができます。

タブについて

・サイズ
タブに表示されているサイズは、画像ファイルとして作成される元サイズです。
実際の記事ページや記事一覧で表示されるサイズは、WordPressテーマや表示場所、画面サイズによって変わる場合があります。
画像の一部が切れたり、余白が目立ったりしないように、実際にブログ上で表示されるサイズや比率に近いタブを選んで作成してください。

・背景
背景タブでは、アイキャッチ画像の背景を変更したり、画像の表示エリアを調整したりできます。
背景の位置や表示範囲を調整することで、見せたい部分を中心に表示したり、文字が読みやすいように背景を配置したりできます。
記事の内容やブログの雰囲気に合わせて背景を整えることで、より見やすいアイキャッチ画像を作成できます。

※ 背景をドラッグ移動
この機能をオンにすると背景の画像を自由に動かすことが出来ます。
画像の位置が決まったら、必ずオフにしてください。（図形を動かすつもりが背景が動いてしまうため）

・図形
図形タブでは、アイキャッチ画像に図形を追加できます。
追加した図形は、位置や大きさを調整できるため、タイトルを見やすくしたり、画像のアクセントとして活用したりできます。
図形の種類は
・長方形 テキスト入力が可能（横書、縦書）
・丸 テキスト入力が可能（横書、縦書）
・矢印
・テキストボックス（横書、縦書）
・線 (直線、点線、二重線、波線、矢印付き線)
・吹き出しテキスト入力が可能（横書、縦書）
レイヤーにも対応しています。

図形タブをスクロールすると、赤枠のように説明が表示されその下に選択した図形の各種設定を行うことができます。選択した図形によって表示される設定項目は変わります。

・タイトル
アイキャッチ画像に表示するタイトル文字を変更したり、文字の大きさや位置を調整したりできます。
投稿タイトルをそのまま使うこともできますが、画像内で読みやすいように短く変更することもできます。

スクロールするとタイトルに関する設定項目があります。

画像の保存

アイキャッチの編集を保存、更するには ”画像を生成して保存” を押してください。
保存をする前に、保存前のチェック項目が赤枠のように表示されます。
問題がなければ ”このまま保存” で作成された画像が保存され、アイキャッチの置き換えがされます。

保存された画像のファイル名は、icath-ID#-タイムスタンプ となります。

さいごに

今回のアップデートで、以前よりも使いやすくなったと思います。

編集画面を大きくし、画像が常に中央に表示されるようにしたことで、作成中のアイキャッチ画像を確認しながら編集しやすくなりました。

現在は使用できるフォントなどに限りがありますが、今後少しずつ増やしていくことも考えています。

アイキャッチ画像の作成にあまり時間をかけたくない方や、同じ背景画像をほかの投稿でも使い回したい方には、手軽に編集できるツールとして活用していただけると思います。

気になった方は、ぜひ一度使ってみてください。

以前、宙也さんのサイト【ART+BEAT MANIFESTO】で紹介されていた”お気に入り機能”を参考に設置させていただいていたのですが、クッキーの関係でいつの間にか登録していたお気に入りが消えたりする等の問題があったので、修正とともに機能の追加をし、プラグイン化することにしました。
内容は、Cocoonに設置することを前提に編集し直しています。
あくまでも自分の好みに合わせて修正しています。

興味のある方は使ってみてください。

[wpdm_package id='2726']

お気に入り機能をすでに導入している方で、このプラグインをインストールしてアップデートされる方は、 javascript.js、 functions.php、 style.css に追記した記述を削除してからインストール / 有効 にしてください。

今回プラグイン化で追加・改善された点

１. 保存方式の変更

お気に入りデータの保存場所を ブラウザーの Cookie 中心から、ブラウザーの localStorage 中心へ変更した。
読者の各ブラウザ内に保存する仕様になっています。

サイトデータの削除、ブラウザキャッシュ・保存データの削除、localStorageの削除、プライベートブラウズの利用を行った場合にはお気に入りのデータも消える可能性があります。

localStorageは、使用するブラウザごとに保存ため、同じ読者でも使う環境が変わると、お気に入りは別になります。
例えば、
スマホの Safari、PC の Chrome、タブレットの Chrome はそれぞれ別々の保存領域となります。
そのため、スマホでお気に入りした記事 → PCには自動では出ない という仕様です。

その代わり、インポート／エクスポート機能で移せます。

２. 設定画面の追加

専用の設定ページを追加しました。

左のメニュにある設定 → 読者お気に入り で設定画面を開くことが出来ます。

設定できる主な項目は以下です。

・ON時の色
・対象投稿タイプ
・ボタンマーク
・ボタンサイズ
・保存最大件数
・ウィジェット表示件数
・一覧ページ表示形式
・一覧ページ並び順
・抜粋表示
・インポート／エクスポート表示
・ショートコード対応
・ツールチップ文言・色

また、設定画面の上部に「現在の設定概要」をクリックすると展開され、設定内容を確認することが出来ます。

３. お気に入り一覧ページを追加

プラグインをインストールすると、自動で固定ページとして、お気に入り一覧ページを作成・利用できるようになります。
一覧ページでは、読者が保存した記事をまとめて確認できます。

一覧ページでの表示形式も設定画面で選べます。

・標準リスト表示
・横長ブログカード
・タイトルだけ

４. サイドバー用ウィジェットを追加

ウィジェットでは、お気に入り一覧をサイドバーなどに表示できます。

表示できる内容は下記となります。また、初期設定の変更は設定画面から行えます。

・初期表示件数
・さらに表示後の最大件数
・スクロール高さ
・お気に入り一覧ページへのリンク
・「さらに表示 / 閉じる」機能

５. カスタム投稿タイプ対応

投稿だけでなく、カスタム投稿タイプ等も対象にできるようにした。

設定画面で、

・投稿
・固定ページ
・その他の公開カスタム投稿タイプ

などを選択できます。
固定ページは初期状態では対象外にしています。

６. Cocoonの各種リストに対応

Cocoonの記事カードやリスト表示に、お気に入りボタンを追加できるようにした。

対応例：

・通常の記事一覧
・新着記事
・人気記事
・Cocoonウィジェット内リスト

また、Cocoonウィジェット内リストに表示するかどうかを設定画面で設定できます。

７. 指定ショートコードへの対応

custom_post_list など、指定したショートコードの出力にもお気に入りボタンを追加できるようにした。

例：

custom_post_list

設定画面で対象ショートコード名を指定できます。

ただし、ショートコードの出力内に投稿への通常リンクがある場合に対応します。

<a href="https://example.com/news/sample/">記事タイトル</a>

外部URL、JavaScriptリンク、アンカーリンク、投稿URLではない独自URLは対象外です。

８. ボタンマークのカスタマイズ

お気に入りボタンのマークを選べるようにした。

・星
・星（外枠→塗りつぶし）
・しおり
・ハート
・チェック
・クリップ
・プラス
・任意の文字

ボタンサイズやON時の色も設定できます。

９. マウスオーバー表示のカスタマイズ

お気に入りボタンにマウスを乗せたときの文言を設定できます。

・未追加時：ブックマークに追加
・追加済み時：リストから削除

さらに、背景色と文字色も設定できます。

初期値は現在、

背景色：#f7ab00
文字色：#ffffff

です。

１０. お気に入り一覧の並び順

お気に入り一覧ページでは、並び順を選べます。

・追加順
・タイトル順

タイトル順はブラウザの日本語ロケールによる簡易的な文字順です。
英字・ひらがな・カタカナ・漢字が混在する場合、漢字の読み仮名までは判定しないため、完全な五十音順にはならない場合があります。

１１. インポート／エクスポート機能

読者が自分のお気に入りデータを移行できるようにした。
お気に入り一覧ページより下記が可能です。

・エクスポート
・インポート
・全削除

別端末へ移したい場合は、エクスポートしたファイルを移動先でインポートできます。

１２. 設定を初期値に戻す機能

設定画面に、”設定を初期値に戻す” ボタンを追加した。

初期化しても、以下は削除されません。

・読者のブラウザ内のお気に入りデータ
・作成済みのお気に入り一覧ページ
・お気に入り一覧ページIDの紐づけ

設定項目だけを初期値に戻します。

さいごに

いろいろと変更や機能の追加をしましたが、下記についてはサイトが重くなり煩雑になることから実装していません。

・別端末で自動同期されない
・別ブラウザ間でも共有されない
・ブラウザデータを削除すると消える
・サイト運営者は「誰が何をお気に入りしたか」を見られない
・記事ごとのお気に入り数集計はできない

WordPress側でプラグインを削除しても、読者のブラウザ内に残っている localStorage データは基本的にはそのままです。
ただし、プラグインがないと表示・読み込みをしないため、読者からは見えません。
再度プラグインを有効化すれば、同じブラウザでは残っているお気に入りを再表示できる可能性があります。

Cocoonに特化していろいろと機能を使いしていますが、他のテーマでも使えるかもしれません。
タイトルの横に表示させる”お気に入りボタン”をテーマに合わせたフックにすれば動くと思います。

興味のある方はお試しください。

Wordpress.orgでの審査が通過したので、いよいよアップロードして公開です。
使用しているのはMACなので、ターミナルを使ってアップロードするようですがコマンドだけで操作するのはちょっと不安だったので、今回はSmartSVNというアプリを使ってアップロードすることにしました。
何も考えずに順番に作業を進めれば、初心者でも問題なくアップロードできることが出来ました。

作業の順番を忘備録として残しますので、同じように思っている方の参考になれば幸いです。

SmartSVNでアップロードする前の準備

SmartSVNでアップロードする前に下記の４つを準備をします。

・承認の通知メールに記載している SVN URL アドレス
・MAC上にアップロードするファイルを管理するフォルダを作成（中身は何も入れない）
・Wordpress.orgの SVNにアップロードする際のパスワード
パスワードはWordpress.orgにログインするものとは別に作成する必要があります。
ログイン後、右上のプロフィール編集に行き、Account & Securityタブににあるpasswordの項目でパスワードを作成します。このpasswordをメモしておきます

・承認されたプラグインのファイル

wordpress.orgのプラグインページにプラグインのアイコンや、バナー、スクリーンショット等を表示させたい場合は準備しておきます。
ただし、後でアップロードしても問題ないです。

SmartSVNでアップロードする手順

先に簡単な手順の説明です。

① SmartSVNアプリでSVN URLにアクセスし、Wordpress.org 側のファイルをMAC に設定したフォルダにダウンロード
② ダウンロードしたファイルに承認されたプラグインファイルをコピー/ペイストして入れる
③ 全てのファイルをアップロード

大まかな手順はこれだけです。作業自体は簡単で、時間もそれほどかかりませんでした。

それでは順番にスクリーンショットで説明していきます。

手順

SmartSVNを起動すると下記の画面が表示されます。
SVN URLにある初期フォルダをダウンロードしますというようなものです。
赤枠のところが選択されているのを確認してOKを押します。

次に表示される画面でメールで通知されてた、SVN URLを買い赤枠に記載し次のステップへ。

再確の画面が出ますので、そのまま"Confirm”を押して次へ。

ここからが大切なところです。
承認されたプラグイン名がピンク色の部分で間違いないか確認をして問題がなければ ”continue”を押します。
これによって、プラグインにぶら下がる、3つのフォルダ（assets,tags,trunk)がダウンロードされることになります。
フォルダについて
・assets - プラグインページで表示させたいスクリーンショットやアイコン、バナーを管理するフォルダ
・tags - バージョンごとのファイルを管理するフォルダ
・trunk - 最新バージョンのプラグインファイルを管理するフォルダ

再度確認のメッセージが出ますので ”Check Out”を押して次に進みます
Check Outって意味が分かりにくいですが、Wordpress.orgのプラグインフォルダのファイルを自分のMac環境にダウンロードしますといった感じ見たいでです。

ここが一番大事なところ？です。
アップロードする前に準備の段階で作成したフォルダをここで選択し、Mac内で作業するフォルダをここで指定します。赤い矢印をクリックしてフォルダを選択します。

次に、あらかじめ下のように選択されているのを確認して ”Finish”を押してもとになるフォルダのダウンロードを開始します。

フォルダのダウンロードが終わったら、ダウンロードしたフォルダを開きプラグインファイルをそれぞれのフォルダにの中に入れていきます。
プラグインファイルを全て、”trunk”フォルダに入れます。この時の注意として、プラグイン名のフォルダではなく、その中にあるすべてのファイルだけを入れることです。
プラグイン名のフォルダ語と入れるとプラグインページに表示されなくなります。
最初にアップロードする際には、"tags”の中に何も入れる必要はないようですが、できればこの時点で バージョン名でフォルダを作成し、プラグインファイルを入れておくいいかもしれません。（例：1.0.0名のフォルダ）
”assets”のフォルダについても後から追加できるので初めから入れる必要はないです。
今回は、スクリーンショット、アイコン、バナーを用意してあったので入れています。

ファイルを所定のフォルダに入れたら、SmartSVNに戻ります。
フォルダに入れたファイルが中央の画面に表示されていると思いますので、全てを選択し左上にある ”Commit”を押します。すると下記のように選択したファイルにチェックマークが表示されますので、全てにチェックマークが表示されていることを確認し、赤枠のところにコメントを入れて ”Commit”を押します。
コメントを入れないと先に進まないようです。
コメントは何をアップロードしたかを分かりやすくするものなので、簡単で分かりやすいものを入れます。

全てのファイルがアップロードされると下の赤枠のようにメッセージが表示され完了となります。

アップデートやファイルの追加

プラグインのアップデートやスクリーンショット画像の追加はSmartSVNを起動し、下記のようにフォルダを選択しアップロードしていきます。
手順は初めにアップロードした手順と同じです。

簡単ですが説明はここまでです。

さいごに

ターミナルを使ってコマンド操作でも簡単に行えるようですが、やっぱりコマンドではなく操作画面を見て行う方が安心感がありますね。
コマンド操作に慣れていない方にはおすすめです。

自作したプラグインをワードプレスでも公開してみることにしました。
初めてで分からないことだらけなので、調べながら挑戦したのでその過程を忘備録として残してみました。
今回、ワードプレス公開で挑戦するのは『Plugin Group Manager』です。

これから挑戦する方の少しでも参考になればうれしいです。

公開に向けて流れ

公開の手順は

① WordPress.org アカウント作成
WordPress.orgのアカウントを作成します。

• WordPress.orgアカウント登録
• プラグイン申請に使用

② プラグイン申請（最初の関門）

ここが公開の入口です。

• ZIPファイル（ソース一式、Readmも必要）※ Readmeは英文で
• プラグインに関する説明（なくても問題ないようですがあったほうが問い合わせが来ないようです）

1. プラグイン申請ページから提出
2. 以下を送る：
   • ZIPファイル（ソース一式、Readmも必要）※ Readmeは英文で
   • プラグインに関する説明（なくても問題ないようですがあったほうが問い合わせが来ないようです）
3. ここで「レビュー待ち」になります（数日〜数週間かかることもあるそうです）

③ レビュー通過 → SVNリポジトリ発行

承認されると：
・WordPress側からSVNリポジトリが発行される（プラグインを管理する場所）
・アップロード用のURLがもらえる（例：https://plugins.svn.wordpress.org/xxxxx）

今回はここまでを記事にしています
SVNでファイルのアップロードの仕方については承認後の記事で

ChartGPTを使って下準備

まずは下準備で、申請するにあたりWordpress.orgの要件を満たしているかの確認をしてから申請することにします。
簡単に確認するためにChatGPTを使って作業を進めていきます。

ChatGPTで自作プラグインのファイルを全てアップロードし、問題がないか等の検証を行った結果、
Header部分の情報不足ということで、説明やバージョン等の情報を追加、Readmeを英文メインに作成し、日本語も補足として追記。

とりあえずここでWordpress.orgにプラグインの申請を行うことに。

Wordpress.orgへ申請

申請の仕方は、Wordpress.orgでアカウントを作成し、Plugs申請の仕方は、Wordpress.orgでアカウントを作成し、Pluginsのページで、”Submit a plugin”をクリックして申請画面に進みます。

申請画面の”Sumnite your plugin for review”をクリックしてアップロードのページに進みます

確認事項にチェックを入れ”Select File”をクリックしてファイルをアップロードします
その際に、Additional informationにプラグインの説明・紹介を入れておくと、後で何に使うのとかの問い合わせが来ないようです。

今回、Uploadをクリックすると下記の画面が出て警告が表示されました。
システムの自動審査で問題があると、担当者が審査を行う前にはじかれてしますようです。

警告の内容は、最近かなり厳しくなった WordPress.org でのプラグイン名の制限だそうです。
Plugin という単語が禁止ワード扱いになっているとのことです。
ということでプラグイン名を変更し、再度アップロードすることに。

アップロードが無事にできると、第一段階の審査受付が出来たことが表示されます。
同様にメールでも同じ内容のものが届きます

次に、審査官による手動審査が行われ、これで問題がなければ無事に公開できるとのことです。結果は数日～10日ほどかかるようです。
その間に、公開時に使うiconとbanner画像の作成を行います。なくてもいいそうですがあったほうが見栄えがいいとのことなので、さっそくChatGPTにお願いをして作成することに。それとスクリーンショットもあったほうがいいとのことなのでブログ記事で掲載した画像と同じようなものを用意することに。

一次審査で修正点が見つかった

申請後、数時間で修正点の指摘のメールが来ました。思ったよりも早く来たのでびっくりです。
修正を行う内容は下記でした。

① Plugin名をもっと固有名にする（最重要）
② Descriptionを英語のみへ
③ enqueue対応（重要） PHPの中で直接 CSSやJSを<style>や<script>を使って出力している
④ Prefix改善
⑤ Contributors修正
⑥ require_once update.php

これをChatGPTを使って修正して再提出です。
⓵ Plugin名については固有名にしないといけないということでWordpress.orgのユーザー名をプラグイン名の前につけてHwinote-Dashbord Control Centerにすることに。

2回目の修正点

夜に修正版を提出したら翌朝にまた修正点の指摘のメールが来ていました。

指摘内容は、
⓵<style>直書き
② 不要な update.php 読み込み
③ クラス名prefix不足
でした。
修正して再提出します

審査が承認されました

2回目の修正を提出して翌日に承認のメールが来ました。

このメールと別にWordpress.orgへアップロード方法を説明したメールが届きました。
27日に申請を行って30日に承認されました。
思ったよりも早かったです。

さいごに

申請自体はそんなに難しくはないようですが、申請前にプラグイン名は固有名にすることが大事ですね。
ChatGPTでもここはチェックできなかったです。
また、ChatGPTで問題がないといっても、修正するように指摘されました。
また、Wordpress.orgが推奨している”Plugin Check”プラグインでの検証を行った結果、エラーが9件、警告が10件と表示されましたが、修正することなく承認されました。
担当者によって、問題にしないこともあるようです。

次回は、ファイルのアップロードについて

WordPressで記事を増やしていくと、「あのショートコードどこで使ってたっけ？」や「このCSSどこに書いた？」といった場面が増えてきます。
投稿本文だけでなく、ウィジェットやカスタムフィールドにもコードを書くことが多くなり、管理がだんだん大変になってきました。
標準の検索では本文しか探せなかったり、HTMLやショートコードまではうまく見つけられなかったりと、少し不便に感じることもあります。

そこで、投稿・ウィジェット・カスタムフィールドを横断検索して、コードの使用場所をすぐに探せるプラグイン「Content Search Tool」を作ってみました。

『Content Search Tool』をWordpress.orgのプラグインで公開しました。
それに伴い、プラグインのフォルダー名をhwinote-content-search-tool に変更、ワードプレス7.0、多国語に対応し、バージョンを1.5.6にアップデートしています。
アップデートする際には、古いバージョンを削除し、新しいバージョンをインストールすることになります。

ワードプレスのプラグインページからインストールする場合は、”Hwinote”で検索すると表示されます。
また、このサイトからでも同じものをダウンロードすることが出来ます。

また、オリジナルバージョンとの違いは、多国語対応となり機能の追加はありません。
ただし、メニューはツール/コンテンツ検索となっています。

ダウンロードは⇩から

[wpdm_package id='2425']

必要な時だけプラグインを有効に！ダッシュボードで有効・無効を管理したいなら⇩

特徴・できること

機能としてはとてもしいプルなもになります。

✔ 検索機能
・投稿・固定ページ・カスタム投稿・ウィジェットを横断検索
・カスタムフィールド（CF）も含めた検索に対応
・ショートコード、HTML、class属性なども検索可能
・EXACT（完全一致）検索対応
・AND / OR / 正規表現検索対応

✔ 検索結果サポート
・ハイライト＆自動スクロール
・ナビウィンドウで複数ヒット移動
・ウィジェット内容のポップアップ表示
・ウィジェット位置へ直接ジャンプ

✔UI・管理機能
・検索履歴保存
・フィルター・ソート状態保持
・ヒット件数順などの並び替え

✔ショートコード管理
・登録済みショートコード一覧
・使用中 / 未使用の判別
・投稿 / ウィジェット別の使用状況表示
・使用回数分析

使い方

基本的な使い方はとてもシンプルです。

① 管理画面の「コンテンツ検索」を開く ⇒ バージョンアップに伴いメニューは ”ツール/コンテンツ検索”に移動
② キーワードを入力して検索を実行
③ 結果一覧から該当箇所をクリック

これだけで、投稿やウィジェット内の該当位置に移動できます。
また、用途に応じて機能を使い分けることもできます。
操作は直感的で簡単なので、基本的には触りながらでも使えると思いますが、下記も参考にしてください。

「実際の検索例」

例えば、こんな内容を検索できます。
・.swiper
・display:flex
・[shortcode]
・wp-block-button
・affiliate
・custom_css
・data-*

ショートコード名やCSSクラスだけでなく、HTML属性やコード断片でも検索できるため、
「前にどこかで使ったはずだけど見つからない」
という場面でかなり便利です。

また、投稿本文だけでなく、ウィジェットやカスタムフィールド内も含めて横断検索できます。

検索結果について

検索結果には、どの部分でヒットしたかが分かるように表示されています。

検索結果は、ヒットした内容によってクリックできる場所や動作が異なります。

■ 本文ヒット
検索結果の行をクリックすると、投稿編集画面が開き、該当箇所に自動でスクロールされます。
ヒットした部分はハイライト表示されるため、すぐに場所を確認できます。

投稿内に複数ヒットがある場合は、ヒット箇所を順番に移動できるナビウィンドウも表示されます
ナビウィンドウの位置は手動で移動が可能です。

※本文ヒットが最も正確に位置を特定できます。

■ 本文表示外の属性ヒット（class・URL・ショートコードなど）
こちらも検索結果の行をクリックすると投稿編集画面が開きますが、表示される位置は必ずしもヒット箇所そのものではありません。
コード内の属性部分でのヒットになるため、前後の内容を確認しながら探す形になります。

■ カスタムフィールド（CF）ヒット
検索結果のカスタムフィールドヒット行をクリックすると、該当投稿の編集画面が開き、カスタムフィールドの位置にスクロールされます。
ただし、環境やテーマによっては正確にスクロールされない場合があります。

■ ウィジェットヒット
投稿とは別の動作になります。

検索結果をクリックするとウィジェットの内容がポップアップで表示され、その場で内容を確認できます。

さらに、”詳細を見る”を開き右上にあるボタンから該当ウィジェットの管理画面へ移動することも可能です。

ショートコード一覧

ショートコード一覧では、WordPressに登録されているショートコードをすべて確認できます。

一覧には以下の情報が表示されます。
・ショートコード名
・使用中 / 未使用の状態
・使用回数
・投稿での使用数
・ウィジェットでの使用数
使用中のショートコードについては、「どの投稿やウィジェットで使われているか」も確認できます。
また、フィルターを使うことで
・使用中のみ表示
・未使用のみ表示
といった切り替えが可能です。

長く運用しているサイトでは、使わなくなったショートコードが残っていることも多く、この一覧を使うことで簡単に確認することができます。

ショートコード分析

ショートコード分析では、実際にサイト内で使われているショートコードの使用状況を集計して確認できます。
一覧との違いは、「登録されているもの」ではなく、「実際に使われているもの」に絞って表示される点です。

この画面では、以下のような内容を確認できます。
・ショートコードごとの使用回数
・投稿で使われているか
・ウィジェットで使われているか
使用回数の多い順に並び替えることで、よく使われているショートコードをすぐに把握できます。
また、フィルター機能を使うことで
・投稿で使われているショートコード
・ウィジェットで使われているショートコード
といった絞り込みも可能です。

注意事項

・投稿数やウィジェット数が多い場合、検索や分析に少し時間がかかることがあります
・ウィジェットやカスタムフィールドの構造によっては、一部の内容が正確に取得できない場合があります
・一部のテーマ・独自カスタムフィールド構成では、スクロール位置がずれる場合があります
・Gutenbergエディターを前提に動作確認しています

状況に応じて検索条件を調整しながら使うと、より快適に利用できます。

さいごに

WordPressを長く運営していると、

「前に書いたコード、どこで使ってたっけ？」
「このショートコードどこだっけ？」
「このCSS、どこに書いた？」

みたいなことが本当に増えてきます。

しかも、探し始めると意外と時間がかかるので、気づくと「探す作業」そのものが負担になっていたりします。
このプラグインは、そんな「どこで使っているか分からないコード」を、投稿・ウィジェット・カスタムフィールドをまとめて検索して、すぐ見つけられるようにしたくて作りました。
ショートコードやHTML、CSS classなどもまとめて確認できるので、管理や修正作業がかなりラクになりました。

「前のコードどこ行った？」が増えてきた方には結構便利かもしれません。

ちなみに、このプラグインは普段ずっと使うというより、必要な時に使うことが多いので、自分の環境では通常は無効にしています。
使う時だけ簡単に有効化できるように、「Plugin Group Manager」でまとめて管理しています。

WordPressでインストールしたプラグインの中には、普段は使わないため無効にしておき、必要なときだけ有効にするものがいくつかありますよね。
サイト運営を続けていると、普段は使わないけれど、何か特別な作業をする時やトラブル時などに使いたいプラグインがだんだん増えてきます。
そのたびにプラグイン一覧画面を開いて操作したり、目的のプラグインを探したりするのが、少し手間に感じることはありませんか？
そんな中で、「ダッシュボードからそのまま管理できたら楽なのに…」と思うことが増えてきました。
そこで今回、ダッシュボードからプラグインの有効・無効や更新ができるツール「Plugin Group Manager」を作ってみました。
グループ分けや一括操作にも対応しているので、プラグインが多い環境でも管理がかなり楽になります。

同じように感じている方は、ぜひ試してみてください。

『Plugin Group Manager』をWordpress.orgのプラグインで公開しました。
それに伴い、プラグインのフォルダー名をHwinote-Dashboard-Controlに変更、多国語に対応しバージョンを1.5.0にアップデートしています。
アップデートする際には、管理画面より”プラグイン削除時に設定データも削除する”のチェックを外してから古いバージョンを削除し、新しいバージョンをインストールしてください。
これにより設定はそのまま引き継がれます。
ワードプレスのプラグインページからインストールする場合は、”Hwinote”で検索すると表示されます。
また、このサイトからでも同じものをダウンロードすることが出来ます。

バージョンを1.6.6に更新しました。
使機能についての説明を追記しました

[wpdm_package id='2422']

特徴・できること

このプラグインでは、主に以下のことができます。

• ダッシュボードからプラグインの有効／無効を切り替え
• 「更新あり」をクリックするだけでアップデートできる
• 一覧画面でプラグインをグループ分けして整理できる
• 一覧画面から複数プラグインをまとめて操作できる
• ページリロードなしで連続更新が可能
• 更新中はスピナー表示で状態が分かりやすい
• 成功・失敗がその場で表示される

特に、ダッシュボードからそのまま操作できるのが一番のポイントです。

使い方

使い方はシンプルです。

1. プラグインをインストールして有効化
2. 各プラグインをグループに割り当て（一覧画面）
3. ダッシュボードに表示される管理UIを確認
4. ダッシュボードまたは一覧から操作

最初に一覧画面で基本設定を行えば、普段はダッシュボードから操作できるようになります。
そのため、わざわざプラグイン一覧を開く機会がかなり減ります。
アップデートも「更新あり」をクリックするだけで、その場で処理されます。

操作は直感的で簡単なため、ここでは細かい説明は省略しますが、以下を参考にしてください。

一覧画面の使い方

左メニューの「プラグイン管理＋」をクリックすると一覧画面が表示されます。
この画面では主に以下の2つを設定します。

• タブ（グループ）の作成
• 各プラグインの割り当て

まずタブの設定を行い、その後プラグイン一覧で個別設定を行います。

タブ設定

タブ設定では、プラグインをグループ分けするための「グループ」を作成します。
ここで作成したタブが、

• ダッシュボードに表示させるかどうか
• 表示順

を決める基準になります。

※ 青枠部分について
ダッシュボードに表示されるプラグインの数を設定できます。
初期値は”５”、設定は１～１０までとなります。
設定数より、タブにアサインしているプラグインの数が多いときには左下に”すべてを表示”ボタンが表示されます。

※ 赤枠部分について
このプラグインでは、アンインストール時のデータ削除を選択できるようになっています。
タブ設定の下にあるチェックをONにすると、プラグイン削除時にタブ設定やプラグインの割り当て情報がすべて削除されます。
OFFの場合はデータは保持されるため、再インストール時に以前の設定をそのまま復元できます。

タブの設定が終わったら、設定エリアは折りたたんでおくこともできます。

プラグイン一覧

この画面では、各プラグインをタブに関連付けていきます（複数選択は不可）。
また、

• メモの登録（用途などの記録）
• 絞り込み・フィルター・検索
• 一括操作

が行えます。

メモを登録しておくと、ダッシュボード上でも内容を確認できるので便利です。
プラグインのアップデートは1件ずつ処理される仕様となっており、ここでは一括アップデートは行えません。

操作後はメッセージが表示され、対象プラグインが

• 成功 → 緑
• 失敗 → 赤

に変化します。
メッセージを閉じると表示も元に戻ります。

プラグイン名の下には、プラグインのメニューに表示される名前が表示されます。
ただし、無効のプラグインについては、一度有効になるまではメニュー名は取得できないため表示されません。
メニュー名が表示されているものを無効にした場合は、すでにしゅてくされているメニュー名はそのまま保持され表示されます。
※ メニューに表示されていないプラグイン（投稿画面やウィジェットへ組み込みされたプラグイン等）はぷらぐいんめいは表示されません。またプラグインによってはプラグイン名を取得できないものあります）

ダッシュボード プラグイン管理＋

ダッシュボードでは、よりシンプルに操作ができるようになっています。

• プラグインの有効／無効切り替え
• プラグインの更新
• 一括操作
• プラグインの順番の入れ替え

が行えます。

タブを選択すると、そのタブに紐づいたプラグインが一覧表示されます。
タブの表示は、

• 1〜2番目 → ボタン表示
• 3番目以降 → ドロップダウン

となっています。
また、ダッシュボード上でも

• 一括操作
• メモの確認

ができるため、日常の管理はここだけで完結します。

プラグインの順番の入れ替えは、
プラグイン名をドラッグして入れ替え、入れ替え後は”順番を保存”をしてください

プラグインのメニュー名は、表示されないものもあります。プラグイン一覧での説明を確認ください。

作後はメッセージが表示され、対象プラグインが

• 成功 → 緑
• 失敗 → 赤

に変化します。
メッセージを閉じると表示も元に戻ります。

注意事項

いくつか注意点があります。

• サーバー環境によってはプラグイン更新に失敗する場合があります
• 更新失敗時はエラーメッセージを確認してください
• プラグインによっては、更新後もバージョン表記が変わらないことがあります
• 一括操作は1件ずつ順番に処理されるため、件数が多い場合は少し時間がかかります
• プラグインの「更新」は個別にい件ずつ行うようようにしてあります（一括更新はできません）

また、通常のWordPressと同様に、重要なサイトでは事前にバックアップを取っておくと安心です。

さいごに

プラグイン管理って地味な作業ですが、少し楽になるだけでもかなり快適になります。

今回の「Plugin Group Manager」は、

• ダッシュボードから操作できる
• グループ分けで整理できる
• 一括操作や更新もまとめてできる

といった感じで、普段の管理をシンプルにしてくれるツールです。

プラグインが増えてきて「ちょっと面倒だな」と感じている方は、ぜひ一度試してみてください。

WordPressテーマ「Cocoon」には、投稿ごとにカスタムCSSやJavaScriptを設定できる便利な機能があります。
記事ごとに少しデザインを調整したいときや、特定のページだけ動きを追加したいときにとても重宝します。
しかも、その投稿を表示する時だけCSSやJavaScriptが読み込まれるため、ブログ全体が重くなりにくいのも大きなメリットです。
私もこの機能をよく使っているのですが、記事数が増えてくると「どの記事にカスタムCSSやJavaScriptを書いたのか分からない…」という問題が出てきました。
確認するには、いちいち投稿を開いて編集画面を見る必要があり、だんだんと面倒に感じるようになります。
そこで今回は、この手間を減らして作業効率を上げるために、投稿一覧画面をカスタマイズしてみました。
といっても難しいものではなく、「カスタムCSSやJavaScriptを設定している記事が一目で分かるようにする」だけのシンプルなものです。
ですがこれだけでも、管理のしやすさはかなり改善されます。

同じように感じている方は、ぜひ参考にしてみてください。

ポップアップでCSS/JavaScriptの内容が確認できるようにしました。
また、簡単な編集も可能に！

追加した機能

• 投稿一覧に「CSS / JS」列を追加
• CSSやJSが設定されている記事の列にCSS/JSの文字を表示
• CSS/JSの文字をクリックで編集画面へ移動
• 該当のCSS/JS欄まで自動スクロール
• フィルター＆並び替え対応

カスタム後の一覧画面

投稿一覧に赤枠の部分の表示が追加されます。

• 絞り込み機能、ソート機能
• CSS/JavaScriptの設定がある場合、★CSS（赤）、★JS（青）が表示される

• 表示された★CSS、★JSをクリックすると別ウィンドウで編集画面が開きCSS/JavaScript欄まで自動スクロール＆展開されます

導入について

子テーマの functions.php に以下のコードを追加してください。
黄色いハイライトの部分を変更するとカラムの位置を変更できます
例：タイトルの後にしたい場合は、'date'を'title'に変更

固定ページには必要ない場合には、青色ハイライト部分を削除

// ==============================
// CSS/JS列 追加
// ==============================
add_filter('manage_posts_columns', function($columns) {
    $new_columns = [];

    foreach ($columns as $key => $value) {
        $new_columns[$key] = $value;

        if ($key === 'date') {
            $new_columns['custom_css_js'] = 'CSS/JS';
        }
    }

    return $new_columns;
});

add_filter('manage_pages_columns', function($columns) {
    $new_columns = [];

    foreach ($columns as $key => $value) {
        $new_columns[$key] = $value;

        if ($key === 'date') {
            $new_columns['custom_css_js'] = 'CSS/JS';
        }
    }

    return $new_columns;
});


// ==============================
// 列の表示（★＋色＋クリックで編集＋スクロール指定）
// ==============================
function add_custom_css_js_column($column_name, $post_id) {
    if ($column_name === 'custom_css_js') {

        $css = get_post_meta($post_id, '_custom_css', true);
        $js  = get_post_meta($post_id, '_custom_js', true);

        $flags = [];
        $edit_link = get_edit_post_link($post_id);

        if (!empty(trim($css))) {
            $flags[] = '<a href="' . esc_url($edit_link . '&scroll=css') . '" target="_blank" title="CSSを編集" style="color:#d63638;font-weight:bold;">★CSS</a>';
        }

        if (!empty(trim($js))) {
            $flags[] = '<a href="' . esc_url($edit_link . '&scroll=js') . '" target="_blank" title="JSを編集" style="color:#2271b1;font-weight:bold;">★JS</a>';
        }

        echo !empty($flags) ? implode('<br>', $flags) : '-';
    }
}

add_action('manage_posts_custom_column', 'add_custom_css_js_column', 10, 2);
add_action('manage_pages_custom_column', 'add_custom_css_js_column', 10, 2);


// ==============================
// フィルター追加
// ==============================
add_action('restrict_manage_posts', function() {
    $selected = $_GET['css_filter'] ?? '';
    ?>
    <select name="css_filter">
        <option value="">CSS/JSすべて</option>
        <option value="css" <?php selected($selected, 'css'); ?>>CSSあり</option>
        <option value="js" <?php selected($selected, 'js'); ?>>JSあり</option>
        <option value="both" <?php selected($selected, 'both'); ?>>CSS + JS</option>
    </select>
    <?php
});


// ==============================
// フィルター処理＋並び替え
// ==============================
add_action('pre_get_posts', function($query) {
    if (!is_admin() || !$query->is_main_query()) return;

    if (!empty($_GET['css_filter'])) {

        $meta_query = [];

        if ($_GET['css_filter'] === 'css') {
            $meta_query[] = [
                'key'     => '_custom_css',
                'compare' => '!=',
                'value'   => ''
            ];
        }

        if ($_GET['css_filter'] === 'js') {
            $meta_query[] = [
                'key'     => '_custom_js',
                'compare' => '!=',
                'value'   => ''
            ];
        }

        if ($_GET['css_filter'] === 'both') {
            $meta_query[] = [
                'relation' => 'AND',
                [
                    'key' => '_custom_css',
                    'compare' => '!=',
                    'value' => ''
                ],
                [
                    'key' => '_custom_js',
                    'compare' => '!=',
                    'value' => ''
                ]
            ];
        }

        $query->set('meta_query', $meta_query);
    }

    // 並び替え
    if ($query->get('orderby') === 'custom_css_js') {
        $query->set('meta_key', '_custom_css');
        $query->set('orderby', 'meta_value');
    }
});


// ==============================
// 並び替え対応
// ==============================
add_filter('manage_edit-post_sortable_columns', function($columns) {
    $columns['custom_css_js'] = 'custom_css_js';
    return $columns;
});

add_filter('manage_edit-page_sortable_columns', function($columns) {
    $columns['custom_css_js'] = 'custom_css_js';
    return $columns;
});


// ==============================
// 編集画面：自動スクロール
// ==============================
add_action('admin_footer', function() {
    $screen = get_current_screen();
    if ($screen->base !== 'post') return;
    ?>

    <script>
    (function() {
        const params = new URLSearchParams(window.location.search);
        const target = params.get('scroll');

        if (!target) return;

        let id = '';
        if (target === 'css') id = 'custom_css';
        if (target === 'js')  id = 'custom_js';

        function openAllMetaBoxes() {
            document.querySelectorAll('.postbox').forEach(box => {
                if (box.classList.contains('closed')) {
                    box.classList.remove('closed');
                }
            });
        }

        function scrollToTarget() {
            const el = document.getElementById(id);
            if (el) {
                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
                el.style.border = '2px solid red';
                el.style.backgroundColor = '#fff8f8';
            } else {
                setTimeout(scrollToTarget, 500);
            }
        }

        // 実行順
        setTimeout(() => {
            openAllMetaBoxes(); // 折りたたみ解除
            scrollToTarget();   // スクロール
        }, 700);

    })();
    </script>

    <?php
});

※ カスタム投稿一覧にも表示されるようになっています。

追加機能

一覧画面でせっかくなのでカスタムCSS/JavaScriptの内容が確認できる方が便利なので表示できるようにしました。

CSS/JavaScriptの内容表示

マウスオーバーで表示、一部のみ表示されますが、”全文”で全ての内容を表示することが出来ます。
また、コピーボタンでコード全体のコピーができます。

// ==============================
// CSS/JS列 追加
// ==============================
add_filter('manage_posts_columns', function($columns) {
    $new_columns = [];
    foreach ($columns as $key => $value) {
        $new_columns[$key] = $value;
        if ($key === 'date') {
            $new_columns['custom_css_js'] = 'CSS/JS';
        }
    }
    return $new_columns;
});

add_filter('manage_pages_columns', function($columns) {
    $new_columns = [];
    foreach ($columns as $key => $value) {
        $new_columns[$key] = $value;
        if ($key === 'date') {
            $new_columns['custom_css_js'] = 'CSS/JS';
        }
    }
    return $new_columns;
});

// ==============================
// 列の表示（クリック＋プレビュー対応）
// ==============================
function add_custom_css_js_column($column_name, $post_id) {
    if ($column_name === 'custom_css_js') {

        $css = get_post_meta($post_id, '_custom_css', true);
        $js  = get_post_meta($post_id, '_custom_js', true);

        $flags = [];
        $edit_link = get_edit_post_link($post_id);

        if (!empty(trim($css))) {
            $preview = mb_substr($css, 0, 120);
            $flags[] = '<a href="' . esc_url($edit_link . '&scroll=css') . '" target="_blank"
                class="code-preview css"
                data-full="' . esc_attr($css) . '"
                data-preview="' . esc_attr($preview) . '"
                style="color:#d63638;font-weight:bold;">★CSS</a>';
        }

        if (!empty(trim($js))) {
            $preview = mb_substr($js, 0, 120);
            $flags[] = '<a href="' . esc_url($edit_link . '&scroll=js') . '" target="_blank"
                class="code-preview js"
                data-full="' . esc_attr($js) . '"
                data-preview="' . esc_attr($preview) . '"
                style="color:#2271b1;font-weight:bold;">★JS</a>';
        }

        echo !empty($flags) ? implode('<br>', $flags) : '-';
    }
}

add_action('manage_posts_custom_column', 'add_custom_css_js_column', 10, 2);
add_action('manage_pages_custom_column', 'add_custom_css_js_column', 10, 2);


// ==============================
// フィルター
// ==============================
add_action('restrict_manage_posts', function() {
    $selected = $_GET['css_filter'] ?? '';
    ?>
    <select name="css_filter">
        <option value="">CSS/JSすべて</option>
        <option value="css" <?php selected($selected, 'css'); ?>>CSSあり</option>
        <option value="js" <?php selected($selected, 'js'); ?>>JSあり</option>
        <option value="both" <?php selected($selected, 'both'); ?>>CSS + JS</option>
    </select>
    <?php
});

// ==============================
// フィルター処理＋並び替え
// ==============================
add_action('pre_get_posts', function($query) {
    if (!is_admin() || !$query->is_main_query()) return;

    if (!empty($_GET['css_filter'])) {

        $meta_query = [];

        if ($_GET['css_filter'] === 'css') {
            $meta_query[] = [
                'key' => '_custom_css',
                'compare' => '!=',
                'value' => ''
            ];
        }

        if ($_GET['css_filter'] === 'js') {
            $meta_query[] = [
                'key' => '_custom_js',
                'compare' => '!=',
                'value' => ''
            ];
        }

        if ($_GET['css_filter'] === 'both') {
            $meta_query[] = [
                'relation' => 'AND',
                [
                    'key' => '_custom_css',
                    'compare' => '!=',
                    'value' => ''
                ],
                [
                    'key' => '_custom_js',
                    'compare' => '!=',
                    'value' => ''
                ]
            ];
        }

        $query->set('meta_query', $meta_query);
    }

    if ($query->get('orderby') === 'custom_css_js') {
        $query->set('meta_key', '_custom_css');
        $query->set('orderby', 'meta_value');
    }
});

// ==============================
// 並び替え
// ==============================
add_filter('manage_edit-post_sortable_columns', function($columns) {
    $columns['custom_css_js'] = 'custom_css_js';
    return $columns;
});

add_filter('manage_edit-page_sortable_columns', function($columns) {
    $columns['custom_css_js'] = 'custom_css_js';
    return $columns;
});


// ==============================
// 編集画面：自動スクロール＋展開
// ==============================
add_action('admin_footer', function() {
    $screen = get_current_screen();
    if (!in_array($screen->base, ['post', 'edit'])) return;
?>
<script>
(function() {
    const params = new URLSearchParams(window.location.search);
    const target = params.get('scroll');

    if (!target) return;

    let id = '';
    if (target === 'css') id = 'custom_css';
    if (target === 'js')  id = 'custom_js';

    function openAllMetaBoxes() {
        document.querySelectorAll('.postbox').forEach(box => {
            if (box.classList.contains('closed')) {
                box.classList.remove('closed');
            }
        });
    }

    function scrollToTarget() {
        const el = document.getElementById(id);
        if (el) {
            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
            el.style.border = '2px solid red';
            el.style.backgroundColor = '#fff8f8';
        } else {
            setTimeout(scrollToTarget, 500);
        }
    }

    setTimeout(() => {
        openAllMetaBoxes();
        scrollToTarget();
    }, 700);
})();
</script>

<style>
.code-tooltip {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    max-width: 420px;
    max-height: 300px;
    overflow: auto;
    font-size: 12px;
    white-space: pre-wrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 9999;
    pointer-events: auto;
}

.code-actions {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
}

.code-btn {
    font-size: 11px;
    padding: 4px 6px;
    cursor: pointer;
    background: #f0f0f0;
    border: 1px solid #ccc;
}

.code-btn:hover {
    background: #e0e0e0;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {

    let tooltip;
    let hideTimeout;

    document.querySelectorAll('.code-preview').forEach(el => {

        el.addEventListener('mouseenter', function(e) {

            clearTimeout(hideTimeout);

            if (tooltip) tooltip.remove();

            tooltip = document.createElement('div');
            tooltip.className = 'code-tooltip';

            const full = this.dataset.full;
            const preview = this.dataset.preview;

            tooltip.innerHTML = `
                <div class="code-content">${preview}...</div>
                <div class="code-actions">
                    <span class="code-btn show-full">全文</span>
                    <span class="code-btn copy-code">コピー</span>
                </div>
            `;

            document.body.appendChild(tooltip);

            tooltip.style.left = (e.pageX + 15) + 'px';
            tooltip.style.top  = (e.pageY + 15) + 'px';

            tooltip.querySelector('.show-full').onclick = () => {
                tooltip.querySelector('.code-content').textContent = full;
            };

            tooltip.querySelector('.copy-code').onclick = () => {
                navigator.clipboard.writeText(full);
                tooltip.querySelector('.copy-code').textContent = 'コピー済み';
            };

            tooltip.addEventListener('mouseenter', () => {
                clearTimeout(hideTimeout);
            });

            tooltip.addEventListener('mouseleave', () => {
                removeTooltip();
            });
        });

        el.addEventListener('mouseleave', function() {
            hideTimeout = setTimeout(removeTooltip, 300);
        });

        function removeTooltip() {
            if (tooltip) {
                tooltip.remove();
                tooltip = null;
            }
        }

    });

});
</script>
<?php
});

CSS/JavaScriptの内容表示、編集

マウスオーバーで表示された内容を編集可能にします。
実際、一覧画面で編集は必要か？と思ったのですが、色、幅等の変更とかちょっとしたことを変更したい場合には便利かも？と思いとりあえず機能を追加してみました。

// ==============================
// CSS/JS列 追加（タイトルの右）
// ==============================
add_filter('manage_posts_columns', function($columns) {
    $new_columns = [];
    foreach ($columns as $key => $value) {
        $new_columns[$key] = $value;
        if ($key === 'date') {
            $new_columns['custom_css_js'] = 'CSS/JS';
        }
    }
    return $new_columns;
});

add_filter('manage_pages_columns', function($columns) {
    $new_columns = [];
    foreach ($columns as $key => $value) {
        $new_columns[$key] = $value;
        if ($key === 'date') {
            $new_columns['custom_css_js'] = 'CSS/JS';
        }
    }
    return $new_columns;
});

// ==============================
// 列の表示（リンク＋データ付与）
// ==============================
function add_custom_css_js_column($column_name, $post_id) {
    if ($column_name === 'custom_css_js') {

        $css = get_post_meta($post_id, '_custom_css', true);
        $js  = get_post_meta($post_id, '_custom_js', true);

        $flags = [];
        $edit_link = get_edit_post_link($post_id);

        if (!empty(trim($css))) {
            $preview = mb_substr($css, 0, 120);
            $flags[] = '<a href="' . esc_url($edit_link . '&scroll=css') . '" target="_blank"
                class="code-preview"
                data-post="' . $post_id . '"
                data-type="css"
                data-full="' . esc_attr($css) . '"
                data-preview="' . esc_attr($preview) . '"
                style="color:#d63638;font-weight:bold;">★CSS</a>';
        }

        if (!empty(trim($js))) {
            $preview = mb_substr($js, 0, 120);
            $flags[] = '<a href="' . esc_url($edit_link . '&scroll=js') . '" target="_blank"
                class="code-preview"
                data-post="' . $post_id . '"
                data-type="js"
                data-full="' . esc_attr($js) . '"
                data-preview="' . esc_attr($preview) . '"
                style="color:#2271b1;font-weight:bold;">★JS</a>';
        }

        echo !empty($flags) ? implode('<br>', $flags) : '-';
    }
}

add_action('manage_posts_custom_column', 'add_custom_css_js_column', 10, 2);
add_action('manage_pages_custom_column', 'add_custom_css_js_column', 10, 2);

// ==============================
// フィルター
// ==============================
add_action('restrict_manage_posts', function() {
    $selected = $_GET['css_filter'] ?? '';
    ?>
    <select name="css_filter">
        <option value="">CSS/JSすべて</option>
        <option value="css" <?php selected($selected, 'css'); ?>>CSSあり</option>
        <option value="js" <?php selected($selected, 'js'); ?>>JSあり</option>
        <option value="both" <?php selected($selected, 'both'); ?>>CSS + JS</option>
    </select>
    <?php
});

// ==============================
// フィルター処理＋並び替え
// ==============================
add_action('pre_get_posts', function($query) {
    if (!is_admin() || !$query->is_main_query()) return;

    if (!empty($_GET['css_filter'])) {

        $meta_query = [];

        if ($_GET['css_filter'] === 'css') {
            $meta_query[] = [
                'key' => '_custom_css',
                'compare' => '!=',
                'value' => ''
            ];
        }

        if ($_GET['css_filter'] === 'js') {
            $meta_query[] = [
                'key' => '_custom_js',
                'compare' => '!=',
                'value' => ''
            ];
        }

        if ($_GET['css_filter'] === 'both') {
            $meta_query[] = [
                'relation' => 'AND',
                [
                    'key' => '_custom_css',
                    'compare' => '!=',
                    'value' => ''
                ],
                [
                    'key' => '_custom_js',
                    'compare' => '!=',
                    'value' => ''
                ]
            ];
        }

        $query->set('meta_query', $meta_query);
    }

    if ($query->get('orderby') === 'custom_css_js') {
        $query->set('meta_key', '_custom_css');
        $query->set('orderby', 'meta_value');
    }
});

// ==============================
// 並び替え
// ==============================
add_filter('manage_edit-post_sortable_columns', function($columns) {
    $columns['custom_css_js'] = 'custom_css_js';
    return $columns;
});

add_filter('manage_edit-page_sortable_columns', function($columns) {
    $columns['custom_css_js'] = 'custom_css_js';
    return $columns;
});

// ==============================
// 編集画面：自動スクロール＋展開
// ==============================
add_action('admin_footer', function() {
    $screen = get_current_screen();
    if (!in_array($screen->base,['post','edit'])) return;
?>
<script>
(function() {
    const params = new URLSearchParams(window.location.search);
    const target = params.get('scroll');
    if (!target) return;
    let id = target==='css'?'custom_css':'custom_js';
    function openAllMetaBoxes(){ document.querySelectorAll('.postbox.closed').forEach(b=>b.classList.remove('closed')); }
    function scrollToTarget(){
        const el=document.getElementById(id);
        if(el){ el.scrollIntoView({behavior:'smooth',block:'center'}); el.style.border='2px solid red'; el.style.backgroundColor='#fff8f8'; }
        else setTimeout(scrollToTarget,500);
    }
    setTimeout(()=>{ openAllMetaBoxes(); scrollToTarget(); },700);
})();
</script>
<?php
});

// ==============================
// AJAX保存
// ==============================
add_action('wp_ajax_save_custom_code', function() {
    if (!current_user_can('edit_posts')) wp_send_json_error();
    $post_id = intval($_POST['post_id']);
    $type    = sanitize_text_field($_POST['type']);
    $content = wp_unslash($_POST['content']);
    if($type==='css') update_post_meta($post_id,'_custom_css',$content);
    if($type==='js')  update_post_meta($post_id,'_custom_js',$content);
    wp_send_json_success();
});

// ==============================
// 管理画面 JS（ツールチップ＋クリックで新規タブ＋保存）
// ==============================
add_action('admin_footer', function() {
    $screen = get_current_screen();
    if (!in_array($screen->base,['edit','post'])) return;
?>
<style>
.code-tooltip{position:absolute;background:#fff;border:1px solid #ccc;padding:10px;max-width:420px;max-height:320px;overflow:auto;font-size:12px;white-space:pre-wrap;box-shadow:0 4px 12px rgba(0,0,0,0.2);z-index:9999;}
.code-actions{margin-top:8px;display:flex;justify-content:space-between;}
.code-btn{font-size:11px;padding:4px 6px;cursor:pointer;background:#f0f0f0;border:1px solid #ccc;}
.code-btn:hover{background:#e0e0e0;}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    let tooltip, hideTimeout, isEditing = false;

    document.querySelectorAll('.code-preview').forEach(el => {

        el.addEventListener('mouseenter', function(e) {
            if (tooltip && isEditing) return;
            clearTimeout(hideTimeout);
            if (tooltip) tooltip.remove();

            const full = this.dataset.full;
            const preview = this.dataset.preview;
            const postId = this.dataset.post;
            const type   = this.dataset.type;

            tooltip = document.createElement('div');
            tooltip.className = 'code-tooltip';
            tooltip.dataset.full = full; // ← 全文を tooltip に保持
            tooltip.innerHTML = `
                <textarea class="code-content" style="width:100%;height:140px;">${preview}</textarea>
                <div class="code-actions">
                    <span class="code-btn show-full">全文</span>
                    <span class="code-btn save-code">保存</span>
                    <span class="code-btn copy-code">コピー</span>
                    <span class="code-btn close-tip">閉じる</span>
                </div>
            `;

            document.body.appendChild(tooltip);
            tooltip.style.left = (e.pageX + 15) + 'px';
            tooltip.style.top  = (e.pageY + 15) + 'px';

            const textarea = tooltip.querySelector('.code-content');

            // 「全文」ボタン
            tooltip.querySelector('.show-full').onclick = () => {
                textarea.value = tooltip.dataset.full; // ← tooltip に保持した全文を取得
            };

            // コピー
            tooltip.querySelector('.copy-code').onclick = () => {
                navigator.clipboard.writeText(textarea.value);
                tooltip.querySelector('.copy-code').textContent = 'コピー済み';
            };

            // 保存（AJAX + 即時反映）
            tooltip.querySelector('.save-code').onclick = () => {
                const newContent = textarea.value;
                if (!confirm('この内容で保存しますか？')) return;

                fetch(ajaxurl, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: new URLSearchParams({
                        action: 'save_custom_code',
                        post_id: postId,
                        type: type,
                        content: newContent
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        el.dataset.full = newContent;
                        el.dataset.preview = newContent.substring(0, 120);
                        tooltip.dataset.full = newContent; // ← tooltip 内の全文も更新
                        tooltip.querySelector('.save-code').textContent = '保存済み ✔';
                        textarea.style.border = '2px solid green';
                    }
                });
            };

            // 閉じる
            tooltip.querySelector('.close-tip').onclick = () => {
                if (tooltip) { tooltip.remove(); tooltip = null; isEditing = false; }
            };

            // 編集中フラグ
            textarea.addEventListener('focus', () => { isEditing = true; });
            textarea.addEventListener('blur', () => { isEditing = false; });

            // ツールチップ内マウス操作
            tooltip.addEventListener('mouseenter', () => { clearTimeout(hideTimeout); });
            tooltip.addEventListener('mouseleave', () => {
                if (!isEditing) { tooltip.remove(); tooltip = null; isEditing = false; }
            });
        });

        // マウス離脱で非表示
        el.addEventListener('mouseleave', () => {
            hideTimeout = setTimeout(() => {
                if (!isEditing) { tooltip.remove(); tooltip = null; isEditing = false; }
            }, 500);
        });

        // クリック時：新規タブで開く＋保存
        el.addEventListener('click', function(e) {
            e.preventDefault();
            const postId = this.dataset.post;
            const type   = this.dataset.type;
            const content = this.dataset.full;
            const href = this.href;

            fetch(ajaxurl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: new URLSearchParams({
                    action: 'save_custom_code',
                    post_id: postId,
                    type: type,
                    content: content
                })
            }).finally(() => {
                window.open(href, '_blank');
            });
        });

    });
});
</script>
<?php
});

さいごに

Cocoonの投稿ごとに設定できるカスタムCSSやJavaScriptはとても便利な機能ですが、記事数が増えてくると管理が大変になりがちです。
投稿一覧で一目で分かるようにするだけでも、作業効率はいくらか改善されると思います。
特に「どの記事にCSSを書いたか分からない…」と感じたことがある方には、あれば便利な機能だと思います。カスタマイズ自体もそれほど難しくないので、ぜひ一度試してみてください。

ワードプレスのアフリエイト広告掲載プラグインでとっても便利なポチップ。
ポチップを使うにあたり、アマゾン、楽天市場とかいろいろなところを使っている場合はいいのですが、アマゾンなど1つだけに絞り込んで掲載する場合、ボタンの位置が左寄せとなりその横が空白となってしまいます。その横の空白が気になっていたのでボタンの配置を少し調整しボタンが1つの時には横いっぱいになるように、2つ以上あるときはポチップ設定のまま複数表示されるようにしてみました。

ポチップでボタンを1つだけ表示するには

アマゾンや楽天等いろいろある中で、例えばアマゾンだけを表示させる場合は、投稿編集画面のポチップ設定より行うことになります。

投稿編集画面でポチップのブロックを選択し、右横にあるオプション画面より非表示にしたいボタンにチェックを入れるだけです。

CSSへ追記

ボタンが1つの場合に、横いっぱいにボタンを広げるには、下記コードをCSSに追記するだけです。

/* ボタンが1つのときだけ横幅いっぱいにする */
.pochipp-box__btns[data-maxclmn-pc="fit"] 
.pochipp-box__btnwrap:only-child {
  flex: 1 1 100% !important;
  max-width: 100% !important;
}

CSSに追記すると下記のようになります。
※ ボタンはポチップ設定で”ボタンの丸み”を丸めに設定しています。

ボタンの幅を狭くし中央寄せ

ボタンを横幅いっぱいではなく少し小さめとかにしたい場合は黄色の上記のCSSコードの網掛け部分を下記のように変更すれば、ボタンの幅を調整できます。

flex: 0 0 80% !important;
max-width: 80% !important;
margin: 0 auto !important;

ボタンの幅を80%にしていいした場合が⇩です。

余談ですが、flex: について
grow → 1（余白があれば伸びる）→ 0（伸びない）
shrink → 1（狭ければ縮む）→ 0（縮まない）
basis → 100%（最初は100%）
だそうです。

ボタンが、2つ以上ある場合にはポチップ設定に合わせた配置となります。⇩

さいごに

カスタムというほどの物ではないのですが、ボタンが1つしかないときに右横にスペースが出来るのが気になったのでちょっと調整をしてみました。