エックスサーバーで運用しているNextcloudで、ExcelファイルをONLYOFFICEから開けない状態が、ここ数か月続いていました。

ファイルを開こうとすると、次のメッセージが表示されます。

ONLYOFFICEに接続できません。管理者に相談してください。

ONLYOFFICEに接続できません。管理者に相談してください。

もともと、NextcloudやONLYOFFICEのアップデートに伴い、文書編集に使用している「Community Document Server」が新しいバージョンに対応しておらず、ONLYOFFICEを利用できない状態が続いていました。

そのため、Community Document Serverの対応版が公開されるのを待っていました。

その後、Nextcloudの新しいバージョンに対応した0.4.1が公開されたため、改善を期待してアップデートしましたが、残念ながらExcelファイルを開くことができませんでした。

そこで今回、ChatGPTにも相談しながら、エラーの原因を詳しく調べてみることにしました。

使用している環境

今回の環境は以下のとおりです。

Nextcloudは、ファイルを保存・共有できるオンラインストレージです。

ONLYOFFICEを組み合わせることで、ExcelやWordなどのファイルをブラウザ上で開いたり、編集したりできます。

1. ONLYOFFICEの設定を確認

まず、Nextcloudの「管理者設定 → ONLYOFFICE」を確認しました。

すると、シークレットキーの設定を求める警告が表示されていました。

シークレットキーとは、NextcloudとONLYOFFICEの通信を安全に行うために使用するものです。
ただし、今回使用している「Community Document Server」は、一般的な独立したONLYOFFICEサーバーとは仕組みが異なり、シークレットキーを設定する必要はありません。

公式の説明でも、Community Document Serverを利用する場合は、シークレットキーなどの設定項目を空欄にするよう案内されています。

そのため、今回表示されている警告は、Excelファイルが開けない直接の原因ではないと考えられます。
そこで、ほかに原因がないか調べてみることにしました。

2. Community Document Serverの動作確認

次に、Community Document Serverが正常に動作しているか確認しました。

まず、Community Document Serverには、基本的な動作状態を確認するための「healthcheck」という機能があります。
これは、サーバーが正常に応答できるかを確認するためのもので、ブラウザから専用のURLにアクセスするだけで結果を確認できます。

確認するには、ブラウザのアドレス欄に次のURLを入力します。

https://自分のドメイン/index.php/apps/documentserver_community/healthcheck

※「自分のドメイン」の部分は、利用しているNextcloudのドメインに置き換えます。また、環境によっては「index.php」が不要な場合もあります。

正常に応答した場合は、画面に次のように表示されます。

true

今回の環境でも「true」と表示されました。
これは、Community Document Serverが基本的な要求に応答できていることを意味します。
しかし、「true」と表示されたからといって、ExcelやWordの編集機能まで正常に動作しているとは限りません。
実際、今回の環境では「true」と表示されているにもかかわらず、Excelファイルを開くことができませんでした。

そこで、次にONLYOFFICEの編集画面に必要なプログラムが正常に読み込まれているか確認してみました。

3. エラーログを調べてみた

次に、Nextcloudの「管理者設定 → ログ」を確認しました。

最初に見つかったのは、次のエラーです。

fclose(): supplied resource is not a valid stream resource

これは、プログラムの処理中に発生したエラーですが、この内容だけでは具体的な原因までは分かりませんでした。

そこで、さらに同じ時刻のログを調べたところ、次のエラーも記録されていました。

Error while testing x2t binary

「x2t」は、ONLYOFFICEがExcelやWordなどのファイルを処理するために使用するプログラムです。
このエラーは、そのプログラムの動作確認に失敗したことを示しています。

さらに、詳細なログには次のような記録がありました。

GLIBC_2.29 not found
GLIBC_2.34 not found
GLIBC_2.35 not found
GLIBCXX_3.4.26 not found

※実際のエラーログから、分かりやすいように一部を抜粋しています。

「GLIBC」や「GLIBCXX」は、Linuxサーバーでプログラムを動かすために必要なシステムライブラリ（基本的なプログラム部品）に関係するものです。
「not found」は、必要なバージョンが見つからないことを意味します。

つまり、ONLYOFFICEの文書処理に必要なシステムライブラリのバージョンが、現在のサーバー環境では不足していることが分かりました。

このエラーが、今回の問題の原因を特定する重要な手掛かりとなりました。

4. 原因はサーバー環境との互換性？

GLIBCとは、Linuxサーバーでプログラムを動かすために必要な、基本的なシステム部品のようなものです。

今回のエラーを簡単に説明すると、次のような状態です。

• ONLYOFFICEのプログラムは、比較的新しいシステム部品を必要としている。
• 現在利用しているサーバーには、必要なバージョンが用意されていない。
• そのため、ONLYOFFICEの文書処理プログラムが正常に起動できない。

つまり、Community Document Server 0.4.1に含まれるプログラムと、現在のエックスサーバーの実行環境が合っていないことが原因と考えられます。

また、エックスサーバーのPHP設定を確認し、WAF（不正なアクセスを防ぐセキュリティ機能）の影響についても検討しました。
しかし、今回のエラーログには、必要なシステムライブラリのバージョンが見つからないことが記録されているため、PHPやWAFの設定変更だけでは解決できないと考えられます。

そのため、現在のサーバー環境で対応できる方法があるのか、エックスサーバーに確認することにしました。

5. 現在、エックスサーバーに問い合わせ中

今回の問題は、NextcloudやONLYOFFICEの設定を変更するだけでは解決できないようです。

一般的な共用レンタルサーバーでは、利用者がサーバーの基本的なシステムを自由に更新することはできません。
そこで現在、エックスサーバーのサポートに問い合わせて、必要なシステムライブラリを利用できる方法がないか確認しています。

もし現在のサーバー環境では対応が難しい場合は、ONLYOFFICEを別のサーバーで動かすなど、ほかの方法も検討する必要がありそうです。

さいごに

ここ数か月、NextcloudでONLYOFFICEが使えない状態が続いていました。

Community Document Serverの対応版が公開されるのを待ち、0.4.1へのアップデートで改善されることを期待していましたが、残念ながら解決には至りませんでした。

今回、改めてエラーログを調査したことで、Community Document Serverの文書処理プログラムに必要なシステムライブラリのバージョンが、現在のサーバー環境では不足していることが分かりました。

2026年10月29日時点では、まだExcelファイルを開ける状態には復旧していません。

現在、エックスサーバーのサポートに問い合わせ中です。回答があり、何か進展がありましたら、この記事に追記したいと思います。

同じようにNextcloudでONLYOFFICEが開けずに困っている方の参考になれば幸いです。

11/2追記 エックスサーバーから回答がありました

その後、エックスサーバーのサポートから回答がありました。
回答によると、現在の共用サーバー環境では、

• glibc：2.17
• libstdc++：3.4.19

となっているとのことです。
一方、今回必要となるバージョンは、

• glibc：2.28以上
• libstdc++：3.4.25以上

とのことでした。

さらに、エックスサーバーで提供されているlibstdc++では、GLIBCXXの最大バージョンが3.4.25、CXXABIの最大バージョンが1.3.9とのことです。
今回のNextcloudのエラーログでは、GLIBCXX_3.4.26やGLIBCXX_3.4.29などが見つからないというエラーが出ていました。

このことから、Community Document Server 0.4.1で使用されるプログラムが必要とするシステム環境に対して、現在のエックスサーバーの共用サーバー環境ではバージョンが不足していることが分かりました。

エックスサーバーでは、今後のサーバーOSやライブラリの更新予定については、現時点では未定とのことです。
また、個別のソフトウェアの動作保証や、サーバー環境をカスタマイズする方法については、サポート対象外とのことでした。

今回の調査で、Excelファイルを開けなかった原因については、かなり絞り込むことができました。
ただし、現時点ではエックスサーバー側で対応できる方法がないため、今後どうするかは少し考える必要がありそうです。

WordPressテーマ「Cocoon 2.9.6」で、リンクのクリック状況を確認できるクリック解析機能が追加されました。

この機能を使って、広告リンクやダウンロードリンクなどを自分の好みに合わせて分類し、商品別やファイル別にも詳しく集計できれば、さらに便利になるのではないかと思いました。

例えば、次のようなことです。

• Amazonや楽天市場など、広告サービス別のクリック数を確認したい
• どの商品リンクがよくクリックされているのか知りたい
• 配布しているソフトウェアやファイルのダウンロード数を確認したい
• どの記事や掲載場所からクリックされているのか調べたい
• リンクを分かりやすい名前で管理したい

そこで、Cocoonのクリック解析データを活用し、自分のブログに合わせた分類や分析ができるように 「Click Analytics for Cocoon」 を作ってみました。

このプラグインは、Cocoonが記録したクリック解析データを読み取り、広告やダウンロードなどに分類して、広告サービス別・商品別・ファイル別などに集計するものです。

Cocoon標準のアクセス集計では、主に「どの記事が読まれているか」を確認できます。一方、Click Analytics for Cocoonでは、Cocoonのクリック解析データを利用して、「どの広告や商品、ダウンロードリンクがクリックされているか」を中心に詳しく分析できます。

新しいクリック計測用のタグなどを追加する必要はなく、Cocoonのクリック解析データをそのまま利用します。

また、Cocoonのクリック解析データベースは読み取り専用で使用するため、プラグイン側から元の解析データを書き換えることもありません。

この記事では、Click Analytics for Cocoonでできることや、各画面の内容、設定項目などについて、おおまかに紹介します。

なお、プラグインの各画面には、項目ごとの詳しい説明や「使い方」ガイドも用意していますので、実際に使用する際は、そちらも参考にしてみてください。

「その他」の未分類リンクの集計数に関する説明を追加

[wpdm_package id="3522" template="button"]

メニューについて

インストールすると左メニューに「Click Analytics」が追加されます

インストール後は初期値となっていますので、設定画面で設定を変更してください。

この記事に掲載されている説明用の画像は「Hwinote Image Scroll」を使用して掲載しています。
スクロールして画像の確認をしてください。

1. 概要画面

プラグインの「概要」画面では、Cocoonが記録したクリック解析データを確認できます。

画面上部には、「概要」「広告」「ダウンロード」「その他」 のタブがあり、確認したい項目に切り替えて表示できます。

※「広告」「ダウンロード」というタブ名は、後で説明する「表示」設定から自由に変更できます。

「概要」タブ

「概要」では、クリック解析の全体的な状況を確認できます。

主な指標として、広告クリック、ダウンロード、全クリックの集計が表示されます。
また、Cocoonが記録したリンクの種類に応じて、外部リンク、内部リンク、ページ内リンク、特殊リンクのクリック数も確認できます。

画面内には、広告サービス別やダウンロード分類別の簡単な集計も表示され、それぞれの詳細画面へ移動できます。広告とダウンロードの両方に一致しているリンクがある場合は、分類競合として警告が表示されます。

「広告」タブ

「広告」では、Amazonや楽天市場などの広告リンクを詳しく分析できます。

広告サービスごとのクリック数だけでなく、個別の商品・リンクについても集計できます。
主な確認項目は次のとおりです。

• 広告サービス別の集計
• 商品・リンク別の集計
• 元記事別・掲載場所別の分析
• 日別・月別の推移
• クリック数や推定表示回数によるランキング
• 推定表示回数、CTR、平均クリック時間など

例えば、同じ商品を複数の記事で紹介している場合、どの記事や掲載場所からクリックされたかを確認できます。
また、Amazonの商品リンクでは、アソシエイトのトラッキングID（tag）の確認機能も利用できます。

「ダウンロード」タブ

「ダウンロード」では、配布しているソフトウェアやファイルのクリック状況を確認できます。

WordPress Download Manager（WPDM）のリンクに対応しているほか、独自のファイル配布リンクも分類設定によって集計できます。
分類別の合計に加えて、登録した商品・ファイルごとの集計や、元記事別・掲載場所別の分析もできます。

このブログのようにソフトウェアを配布している場合、どのソフトウェアがよくダウンロードされているのかを調べる際に便利です。
なお、ここでいうダウンロード数は、対象リンクのクリック数をもとにしたものです。ファイルの転送が最後まで完了した回数とは限りません。

「その他」タブ

「その他」には、広告にもダウンロードにも分類されていないリンクが表示されます。

未分類リンクは、内部リンク、外部・特殊リンク、ページ内リンクなど、Cocoonのリンク種別によって絞り込めます。
例えば、アフィリエイトリンクなのに「その他」に表示されている場合は、そのリンクを広告として登録できます。
また、「分類・生成元を確認」から、リンクがどのような方法で作成されたものかを確認できます。

Pochipp、Rinker、Cocoon、WPDMなどの生成元情報が分かる場合は、分類や個別登録を行う際の参考になります。
リンク一覧からは、新しい分類や商品・ファイルを直接追加することもできます。

最初からすべてのリンクを手動で登録する必要はなく、「その他」に残っているリンクを確認しながら、必要なものだけ追加していく使い方がおすすめです。

v1.2.1：未分類リンクの集計数に関する説明を追加

「概要」と「その他」画面で表示されるクリック数とリンク件数の違いが分かりやすくなるよう、説明文を追加しました。

「その他」のクリック数と「未分類リンク」の件数は、集計している内容が異なります。

• その他のクリック数：広告・ダウンロードに分類されなかったクリックの合計回数
• 未分類リンクの件数：未分類リンク一覧にまとめられたリンク項目の数

例えば、「その他」が 7クリック、「未分類リンク」が 4件 の場合、4つのリンク項目で合計7回のクリックが記録されていることを意味します。同じリンク先への複数クリックは1つの項目にまとめられる場合があるため、クリック数とリンク件数は必ずしも一致しません。

今回の更新では、実際の集計値に応じて数字の見方を表示するようにしました。
なお、クリック数の集計方法や広告・ダウンロードの分類処理に変更はありません。

集計期間と表示対象

各解析画面では、期間を切り替えて集計結果を確認できます。

また、クリックされたリンクだけを表示するか、クリック数が0でも推定表示回数があるリンクを含めるかを切り替えることもできます。
後者を利用すると、表示されているのにクリックされていないリンクを見つけやすくなります。
ただし、推定表示回数とCTRは、Cocoonのサンプリングと重み付けに基づく値で、実際の表示回数をそのまま数えたものではありません。

2. 設定画面

ここからは、本プラグインの設定方法を説明します。

「設定」画面には、次のタブが用意されています。
「表示」「 広告」「ダウンロード」「URL判定テスト」「AdSense 」「ダッシュボード」「データ管理」

通常は初期設定のままでも使い始められますが、ブログの用途に合わせて表示名や分類条件を変更することができます。

2-1. 「表示」タブ

「表示」は、解析画面の初期表示や、各項目の名称を変更するための設定です。

特に便利なのが、「広告」「ダウンロード」といった表示名を自由に変更できる機能です。

解析一覧の表示

「解析一覧の表示」では、解析画面を開いたときの初期状態を設定できます。

初期表示期間は「今月」ですが、必要に応じて別の期間を選択できます。
また、一覧に表示するリンクの対象も選択できます。

• クリックされたリンクのみ
• クリック0でも推定表示があるリンクを含める

通常は「クリックされたリンクのみ」で十分ですが、表示されているのにクリックされないリンクを確認したい場合には、後者が便利です。

ただし、対象リンクが多い場合は集計に時間がかかることがあります。

表示名

「表示名」では、管理画面に表示される項目の名称を変更できます。

例えば、次のような変更が可能です。

例えば、ブログ内でアフィリエイト広告を中心に管理したい場合は、「広告」を「アフィリエイト」に変更すると分かりやすくなります。

また、ソフトウェアを配布している場合は、「ダウンロード」を「ファイル配布」、「商品・ファイル」を「配布ソフト」に変更すると、ブログの内容に合った表示にできます。

変更した表示名は、概要画面のタブや集計項目、設定画面、ダッシュボードなど、関連する部分に反映されます。
ただし、表示名を変更しても、分類の判定条件やクリック解析データ自体は変更されません。

また、この設定は項目全体の呼び方を変えるものです。Amazonや楽天市場などの個別の分類名や、商品名を変更する設定とは異なります。

※ ダウンロード機能を使わない場合は、「広告」を「Amazon」、「ダウンロード」を「楽天市場」に変更するなど、自分のブログに合わせた使い方もできます。
ただし、表示名を変更するだけでは集計対象は変わらないため、それぞれの分類条件も合わせて設定する必要があります。
このように、表示名と分類条件を組み合わせることで、ブログの用途に合わせた集計ができます。

表示名を空欄で保存すると、初期の名称に戻ります。

2-2. 「広告」タブ

「広告」では、広告リンクをどのように分類して集計するかを設定します。

このタブには、さらに「分類」と「商品・リンク」の2つのサブタブがあります。
ここで重要なのが、両者の役割の違いです。

「分類」は広告サービスなどのグループ、「商品・リンク」はそのグループ内の個別の商品やリンクです。

「分類」の設定

例えば、次のような分類を作成できます。

• Amazon
• 楽天
• Yahoo!ショッピング
• その他のアフィリエイトサービス

Amazonや楽天など、主なサービスには初期の分類条件が用意されています。
独自の広告サービスを追加したい場合は、「分類を追加」から登録できます。

設定する主な項目は、次のとおりです。

分類名

集計画面に表示するグループの名前です。
例えば「○○アフィリエイト」といった名称を入力します。

判定方法

対象リンクをどのような条件で識別するかを指定します。

代表的な判定方法には、次のものがあります。

判定方法には「？」のヘルプも用意しており、それぞれの用途を画面上で確認できます。
例えば、特定の広告サービスのドメインをまとめて分類する場合には「ドメイン配下一致」が便利です。

判定文字列

選択した判定方法で使用する文字列を指定します。

例えば、「URLに含む」で /affiliate/ を登録した場合、その文字列を含むリンクを判定対象にできます。
また「ドメイン配下一致」で example.com を指定すると、example.com や www.example.com などが対象になります。

※これらは設定例です。実際には利用している広告サービスのURLに合わせて指定してください。

有効・無効と優先順位

各判定条件は有効・無効を切り替えられます。
また、分類は上から順に判定され、最初に一致した分類が優先されます。

1つの分類に複数の判定条件を登録することもできます。
例えば、同じ広告サービスが複数のドメインを使っている場合、それらを1つの分類にまとめられます。

設定後は「設定を保存」で保存します。

「商品・リンク」の設定

「商品・リンク」では、広告サービス内の個別の商品やリンクを登録します。

例えば、Amazonという分類の中に「ワイヤレスマウス」「キーボード」などの商品を登録できます。
登録する主な内容は、商品・リンク名、所属する分類、判定方法、判定文字列です。

同じ商品に複数のURLや判定条件を登録することもできます。
また、Amazon、楽天市場、Yahoo!ショッピングの対応URLについては、商品識別情報を利用して、同じ商品をまとめられる場合があります。

AmazonではASIN、楽天市場やYahoo!ショッピングでは、それぞれの商品識別子が利用されます。

商品を登録するときは、解析画面に表示されている実際のリンクから追加する方法が便利です。

リンクの種類によっては、Cocoonの内部識別情報や商品識別子を自動で設定できるため、難しい識別子を手入力する必要がありません。

不要な未登録の商品候補は「候補から除外」にでき、後から復元することもできます。

2-3. 「ダウンロード」タブ

「ダウンロード」も広告と同じように、「分類」と「商品・ファイル」の2段階で設定します。

「分類」の設定

ダウンロードの分類は、主にファイルの配布方法やリンクの種類を管理するためのものです。
例えば、WordPress Download Manager、PDFファイル、ZIPファイルなどで分類できます。

初期設定では、WordPress Download Managerのリンクに対応しています。
WPDMの場合、wpdmdl のクエリキーや、#unlock のページ内リンクを判定する条件が用意されています。

その他のダウンロードリンクについても、「分類を追加」から独自の条件を登録できます。
例えば、配布ファイルのURLに共通する /downloads/ などの文字列を使って分類する方法があります。

ただし、広すぎる条件を登録すると、対象外のリンクまで分類される場合があるため注意してください。

「商品・ファイル」の設定

「商品・ファイル」では、実際に配布しているソフトウェアや資料などを登録します。

例えば、WordPress Download Managerという分類の中に、次のような個別の配布物を登録できます。

• Hwinote iCatch Editor
• 操作マニュアル
• サンプルファイル

これにより、ダウンロード解析画面でファイルごとのクリック数を確認できます。
また、複数のリンク先URLやCocoonのリンク識別情報を、1つの商品・ファイルにまとめることもできます。

特にWPDMの #unlock のように、複数のダウンロードボタンで同じリンク先が使われる場合は、Cocoonのリンク定義識別子を使うことで、個別のボタンを区別できる場合があります。

このような内部識別情報は、解析画面から登録する際に自動設定されることがあるため、通常は手入力する必要はありません。

解析画面からの追加も可能

広告・ダウンロードのどちらも、設定画面から手動登録するだけでなく、解析画面のリンク一覧から登録できます。

未分類リンクなどの「追加」操作から、次のような登録方法を選べます。

• 新しい分類を追加する
• 新しい商品・リンク／商品・ファイルを登録する
• 既存の商品・リンク／商品・ファイルに判定条件を追加する

解析画面から登録する場合は、実際に記録されているリンクの情報を利用できるため、入力の手間を減らせます。

登録後は、解析画面で分類や集計の反映を確認できます。

2-4. 「URL判定テスト」タブ

「URL判定テスト」は、登録した分類条件でリンクがどのように判定されるかを確認する機能です。

使い方は簡単です。

1. 判定したいリンク先URLを入力する
2. 「URLを判定」をクリックする
3. 分類や商品・ファイルの判定結果を確認する

ここで入力するのは、記事そのもののURLではなく、広告ボタンやダウンロードボタンなどのリンク先URLです。
実際の公開ページでリンクを右クリックし、リンクのアドレスをコピーして使用すると分かりやすいと思います

分類条件を編集した直後で、まだ保存していない場合でも、編集中の設定を使ってテストできます。
ただし、テスト自体は設定を保存しません。問題がなければ元の設定タブに戻って「設定を保存」を押します。

2-5. 「AdSense」タブ

「AdSense」では、Google AdSenseとの連携設定を行います。

Google AdSense Management APIを利用し、読み取り専用の権限でレポートを取得します。
連携にはGoogle Cloud側の設定が必要ですが、画面内の「接続手順を見る」から、準備や接続方法を確認できます。

利用するAdSenseアカウントと、デフォルトの解析対象サイトも設定できます。
なお、Google OAuthを「テスト中」の公開ステータスで使用する場合、認証が7日で失効するため、定期的な再接続が必要になることがあります。

これはAdSenseのテストデータを取得するという意味ではなく、実際のAdSenseレポートを取得するための認証設定です。

2-6. 「ダッシュボード」タブ

「ダッシュボード」では、WordPress管理画面のダッシュボードに表示する集計情報を設定します。

共通設定では、デフォルトの集計期間を選択できます。

Click Analytics for Cocoonの表示内容については、次のような設定ができます。

• ダッシュボードウィジェットの表示ON/OFF
• 広告とダウンロードの両方を表示
• 広告のみ表示
• ダウンロードのみ表示
• 広告の分類別内訳を表示するか
• ダウンロードの商品・ファイル別内訳を表示するか
• 分類競合の警告を表示するか

また、AdSense連携が完了している場合は、AdSenseの指標もウィジェット内に表示できます。
推定収益、インプレッション、クリック、CTR、CPC、RPMなどから必要な項目を選び、表示順も変更できます。

2-7. 「データ管理」タブ

「データ管理」では、プラグインを削除したときの設定データの取り扱いを選択できます。

初期設定は「設定データを残す（推奨）」です。
この場合、表示名や分類条件、商品・ファイルなどの設定を残すため、再インストール時に設定を引き継ぎやすくなります。

「設定データを削除する」を選択した場合は、プラグイン削除時に、本プラグイン独自の設定データも削除します。
ただし、どちらを選んでもCocoon本体のクリック解析データは削除されません。
また、安全のため、AdSenseの認証トークンや保存済みクライアントシークレットなどの機密情報は、設定を残す場合でも削除されます。

3. Google AdSense解析

Google AdSenseとの連携が完了すると、管理画面に「AdSense解析」が表示されます。

ここでは、Google AdSenseの公式レポートを確認できます。

解析画面には次の5つのタブがあります。

• 概要：推定収益やクリック数など、主要指標を確認
• 推移・比較：日別の推移や前期間との比較
• 広告ユニット：広告ユニットごとの状況や改善候補
• 形式・配置：広告形式・配置別の集計
• デバイス：パソコンやスマートフォンなどのデバイス別集計

集計期間や解析対象サイトを切り替えて確認することもできます。

広告ユニットの改善候補は、取得した指標をもとに本プラグインが参考情報として判定するもので、Google公式の改善提案ではありません。
また、Cocoonのクリック解析データとAdSenseのレポートは、集計対象や取得方法が異なるため、数値が一致するとは限りません。

AdSense連携は任意の機能です。利用しなくても、Cocoonのクリック解析を使った広告・ダウンロード分析はできます。

4. システム情報

「システム情報」では、プラグインの動作環境やCocoonとの互換性を確認できます。

画面には、WordPress・PHP・Cocoonなどのバージョン、クリック解析の状態、必要なデータベーステーブルやカラムの状態などが表示されます。
また、分類条件の競合や設定データの状態なども確認できます。

集計が表示されない場合や、動作に問題がある場合は、最初にこの画面を確認すると原因を調べやすくなります。
診断情報をコピーする機能や、集計キャッシュの更新機能もあります。

テストデータの使い方

システム情報には、「テストデータ」機能も用意しています。

この機能を利用すると、実際のクリック解析データが少ない場合でも、広告やダウンロードの集計、グラフ、ランキングなどの表示を確認できます。

テストデータは本プラグインの管理画面で使用するダミーデータで、Cocoon本体のデータベースに書き込むものではありません。

テストデータを有効にする

使い方は次のとおりです。

1. 「システム情報」を開く
2. 「テストデータ」の項目を探す
3. 「テストデータモードを有効にする」にチェックを入れる
4. テスト難易度を選択する
5. 「テストデータ設定を保存」をクリックする

これで解析画面にテストデータが表示されます。

テスト難易度について

テストデータには3つの難易度があります。

テスト用リンクは30種類で固定されていますが、難易度によって未分類として残るリンクの内容や数が変わります。
「分類練習」を選択しておけば、「その他」に表示されたリンクを広告やダウンロードとして登録する操作を試せます。
追加した分類条件は実際と同じ判定処理で使用されるため、正しく設定できていれば、対象リンクが「その他」から広告やダウンロードへ移動します。
ただし、分類の設定変更は実際のプラグイン設定にも保存されます。テストが終わった後も設定が残る点には注意してください。

通常の解析データに戻す

テストが終わったら、「システム情報」のテストデータ設定へ戻ります。

「テストデータモードを有効にする」のチェックを外し、「テストデータ設定を保存」をクリックしてください。
これで通常のCocoonクリック解析データの表示に戻ります。
なお、テストデータはClick Analytics for Cocoonのクリック解析専用です。Google AdSense用のダミーデータは生成されません。

AdSense連携中は、テストデータモードであってもAdSense解析にはGoogleから取得した実データが表示されます。

5. 利用上の注意事項

最後に、利用する際の注意点をまとめておきます。

Cocoonのクリック解析が必要

このプラグインはCocoonのクリック解析データを利用するため、Cocoon側でクリック解析が利用できる状態になっている必要があります。Cocoon2.9.6以降のバージョンが必要となります。

クリック解析が無効になっている場合、新しいクリックは記録されません。

また、クリック解析が記録されていなかった期間のデータを、後から自動で復元することはできません。

クリック集計の対象について

本プラグインはCocoonが記録したクリックデータを利用しています。

Cocoonの仕様により、記事一覧形式のトップページ、カテゴリー・タグ一覧ページ、検索結果ページなどで発生したクリックは集計対象外です。
また、管理者ログイン中やプレビュー画面でのクリック、iframe内の広告クリックも集計されません。
このため、表示されるクリック数はサイト全体で発生したすべてのクリック数を表すものではありません。

分類条件は重複に注意

広告とダウンロードの両方に一致するリンクがある場合、分類競合として扱われます。

競合したリンクのクリック数などは、広告とダウンロードのどちらにも重複集計されません。

分類を追加するときは、URL判定テストなどで確認することをおすすめします。

クリック数と実際の成果は異なる

広告のクリック数は、商品の購入数や報酬の発生件数ではありません。

また、ダウンロード数はリンクのクリック数をもとにしているため、ファイルのダウンロード完了数とは限りません。

推定表示回数やCTRについても、Cocoonのデータの取得・集計方法を理解したうえで参考指標として利用してください。

テストデータの使用後は通常表示に戻す

テストデータモードを有効にしている間は、通常のクリック解析データの代わりにテスト用の集計が表示されます。

表示を確認した後は、忘れずにテストデータモードを無効にしてください。

Cocoonの解析データは変更されません

Click Analytics for Cocoonは、Cocoonのクリック解析データベースを読み取り専用で利用します。

分類や表示名、商品・ファイルなどの設定は、本プラグイン独自のデータとして保存します。

プラグインを削除する場合も、Cocoon本体のクリック解析データを削除することはありません。

6. さいごに

Click Analytics for Cocoonは、Cocoonのクリック解析を自分のブログに合わせて、もっと便利に使えたらいいなと思って作ってみたプラグインです。

広告やダウンロードの分類を自由に設定できるほか、表示名も変更できるので、それぞれのブログに合った使い方ができると思います。

まだまだ工夫できるところはあるかもしれませんが、広告リンクのクリック状況や、配布ファイルの利用状況を確認する際に、少しでもお役に立てればうれしいです。

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

WordPressで記事を書いていると、設定画面や操作手順などのスクリーンショットを掲載することがあります。
ただ、縦に長いスクリーンショットをそのまま載せると、画像だけでかなりの場所を取ってしまうんですよね。
画像の内容は全部見せたいけれど、長すぎると記事全体が間延びして、前後の説明も読みにくくなってしまいます。

そこで、**縦長画像をコンパクトに表示し、必要な部分をスクロールして確認できるプラグイン「Hwinote Image Scroll」**を作り公開することにしました。

Hwinote Image Scrollとは？

Hwinote Image Scrollは、WordPress標準の画像ブロックに縦スクロール機能を追加するプラグインです。
通常は縦に長く表示される画像も、表示領域の高さを制限することで、記事内にコンパクトに収められます。
表示しきれない部分は、画像の中をスクロールして確認できます。
また、画像全体を確認したい場合は、ボタンを押して記事内に展開することもできます。

今回こだわったのは、WordPress標準の画像ブロックをそのまま使えることです。

スクロール表示専用のブロックを追加する方式ではなく、いつも使っている画像ブロックに機能を追加しています。
そのため、どのブロックを使えばいいのか迷うこともありません。
普段どおり画像を挿入して、必要な画像だけスクロール表示をONにするだけです。
もちろん、スクロール表示を使わない画像は、これまでどおりの表示になります。

設定方法と各項目の説明

設定は、投稿編集画面から行います。

スクロール表示したい画像ブロックを選択すると、右側のブロック設定に専用の設定項目が表示されます。
プラグイン独自の設定ページを開く必要はなく、画像ごとに表示方法を変更できます。

下の画像は、Hwinote Image Scrollの設定画面、縦長のスクリーンショットを配置しています。
画像内をスクロールしたり、「画像全体を表示」ボタンを押したりして設定項目を確認ください。

① スクロール表示モード

スクロール表示の方法を選択します。
選べるのは「OFF」「手動」「自動判定」の3種類です。

初期設定はOFFです。

そのため、プラグインを有効化しただけで、既存の記事の画像が勝手にスクロール表示へ変更されることはありません。

手動は、画像の長さに関係なく表示領域を指定したい場合に便利です。

自動判定は、一定以上縦長の画像だけにスクロール表示を適用したい場合に向いています。

なお、自動判定は設定した画像ブロックだけが対象で、記事内のすべての画像を自動的に変更するわけではありません。

② 自動判定の基準

自動判定を選択した場合は、画像がどれくらい縦長ならスクロール表示にするかを指定します。

選択できる基準は次の3種類です。

初期値は2倍です。

例えば、横幅800px、高さ2,000pxの画像は、縦の長さが横幅の2.5倍なので、2倍の判定基準に該当します。
一方、横幅800px、高さ1,000pxの画像は1.25倍なので、対象外になります。

極端に縦長の画像だけを対象にしたい場合は3倍、少し縦長の画像も対象にしたい場合は1.5倍というように使い分けられます。

③ 表示領域の高さ・縦横比

スクロール表示する領域の高さを設定します。

指定方法は、「縦横比」と「高さ（px）」の2種類です。

縦横比で指定する場合

16:9、4:3、1:1などの比率を使って、表示領域の高さを決めます。
画像の表示幅に合わせて高さが決まるため、画面サイズが変わっても表示領域のバランスを保ちたい場合に便利です。

高さ（px）で指定する場合

500pxや600pxなど、数値で高さを指定します。
表示幅に関係なく、ある程度決まった高さに収めたい場合はこちらが便利です。

どちらも画像そのものを縮小・切り抜きする機能ではなく、表示する枠の高さを調整するものです。
枠に収まらない部分は、画像の中をスクロールして確認できます。

④ スマートフォン用の高さ設定

PCではちょうどよい高さでも、スマートフォンでは表示領域が大きすぎる場合があります。
そこで、スマートフォン用の高さを別に指定できるようにしました。

例えば、PCでは600px、スマートフォンでは350pxといった設定ができます。

スマートフォンでは画像の上を指で上下にスワイプして操作できます。
また、小さな画面でスクロール領域が大きくなりすぎないよう、画面の高さに応じた調整も行います。

⑤ スクロール案内・進捗表示

画像が途中までしか表示されていないと、スクロールできることに気付かない場合もあります。
そこで、スクロールできることを知らせる案内表示を用意しました。
また、画像全体のどのあたりまでスクロールしているかを示す進捗表示も利用できます。

どちらも必要に応じてON/OFFを変更できます。
なお、画像が表示領域に収まっていてスクロールが必要ない場合は、不要な案内が表示されないようにしています。

⑥ 画像全体の表示方法

スクロール表示は便利ですが、ときには画像全体を一度に確認したいこともあります。
そこで、「画像全体を表示」する機能も追加しました。

表示方法は次の2種類です。

記事内で展開する（初期設定）

「画像全体を表示」ボタンを押すと、スクロール領域の高さ制限が解除され、画像全体が記事内に表示されます。
もう一度「画像を折りたたむ」を押せば、元のスクロール表示に戻ります。
展開中は画像の上部と下部の両方から折りたためるため、かなり長い画像でも操作しやすくしています。

新しいタブで開く

元画像を別のタブで確認したい場合は、こちらを選択します。
記事内で画像を大きく展開したくない場合に便利です。
また、画像全体を表示するボタン自体をOFFにすることもできま

使用する際の注意事項

画像のファイルサイズは小さくなりません

このプラグインは、画像の表示領域を制限するものです。
画像を圧縮したり、ファイルサイズを小さくしたりするものではありません。
そのため、非常に大きなスクリーンショットを掲載する場合は、画像を適切なサイズに調整したり、WebPなどの形式を利用したりすることをおすすめします。

WordPress標準の画像ブロックが対象です

Hwinote Image Scrollは、WordPress標準の画像ブロックを対象としています。
カバーブロックの背景画像や、他のプラグインが独自に追加する画像表示ブロックには対応していません。
また、使用中のテーマやプラグインの組み合わせによっては、表示や操作方法に違いが出る場合があります。

すべての画像に使う必要はありません

通常の写真や短い画像までスクロール表示にすると、かえって読みにくくなる場合があります。
必要以上に使用せず、縦長のスクリーンショットや説明画像など、記事の中で場所を取りすぎる画像に使うのがおすすめです。

さいごに

今回のHwinote Image Scrollは、記事を書いているときに感じていた「長いスクリーンショットが場所を取りすぎる」という、ちょっとした不便を解消したくて作りました。

画像の内容は省略したくないけれど、記事はできるだけ読みやすくしたい。
そんなときに、スクロール表示でコンパクトに収められたら便利だなと思ったのがきっかけです。
また、専用の画像ブロックを新しく覚えるのではなく、普段使っている画像ブロックの中で使えるようにしたかったので、できるだけシンプルな仕組みにしています。

自分で記事を書くときに便利だと思えるものを形にしたプラグインですが、同じように縦長画像の掲載で困っている方にも使っていただけたらうれしいです。

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

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

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

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

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

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

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

Cocoonバージョン2.9.5.6のCocoon設定画面での変更へ対応しました。バージョンは Ver 0.4.27です。
アップデートする方は、フォルダごと上書きしてください。

・おすすめ表示への対応
・従来の表示への対応

主な機能

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

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

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

導入方法

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

[wpdm_package id="3023" template="button"]

まず、配布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での一覧表示設定を同じ画面から管理できるようになっています。

Cocoonバージョン2.9.5.6のCocoon設定画面変更への対応をしました。バージョンは Ver 0.4.27です。
アップデートする方は、フォルダ語と上書きしてください。

おすすめ表示を選択した場合、追加の設定に「カスタム投稿」が表示されます。

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日間表示させたいといった場合に対応させるものです。

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

期間指定をした後に、ディフォルト（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; ?>

期間指定をした後に、ディフォルト（14日）に戻した際に、期間指定日が残り表示されない問題を修正しました。上記コードの赤いハイライト部分を下記コードに置き換えてください。

			/*
			 * 表示期間を決定
			 *
			 * デフォルト選択時はデフォルト日数を使用。
			 * 期間指定の場合のみ保存済みの日数を使用。
			 */

			$display_days = absint(
				$default_display_days
			);

			/*
			 * 期間指定の場合のみ
			 * 投稿ごとの設定日数を取得
			 */
			if ( $display_type === 'days' ) {

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

				if ( $custom_days > 0 ) {
					$display_days = $custom_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;
			}
		}

表示を揃えたい場合は、下記 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」でまとめて管理しています。