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つしかないときに右横にスペースが出来るのが気になったのでちょっと調整をしてみました。

先週、Nextcloudを32.0.6にアップデートしたと思ったら、33.0.0が出ていました。
早速アップデートし、いつものようにインデックスの追加、occ maintenance 等を行い警告の対処を行ったのですが、新しい”設定サーバーID”という見慣れないものが表示されいたので、対処することにしました。

設定サーバーID

下の赤枠の部分です。

サーバー識別子が設定されていません。Nextcloudインスタンスが複数のPHPサーバー上で動作している場合、設定することを推奨します。設定ファイルにサーバーIDを追加してください。
となっています。
この警告は、複数のPHPサーバーで動かしている場合に重要な設定だそうです。
ただレンタルサーバーの場合は、単一PHP環境として動作するので実質「シングルサーバー運用」扱いになるので、特に何もしなくても問題はないとのことです。
でも気になるので、消せるなら消したいものです。

ということで調べると簡単に消すことが出来るようです。

対処方法

Nexcoludのconfig.phpに下記のコードを追記するだけでした。

'serverid' => 'xserver01',

追記場所は、config.phpの上の方にある’secret'の下に追記します。

$CONFIG = array (
  'instanceid' => 'xxxx',
  'passwordsalt' => 'xxxx',
  'secret' => 'xxxx',
  'serverid' => 'xserver01',
);

追記したら、Nextcloudにサインインし直すと消えています。ただしキャッシュが残っているとすぐには消えないようですので少し時間を空けてログインしてみてください。

さいごに

Onlyofficeが有効になっているとファイルのフォルダーが読み込まれないようです。
Onlyofficeを無効にすれば問題なくフォルダーが読み込まれますが、Onlyofficeをよく使う方はしばらくアップデートは待った方がいいようです。
もうすぐ、Onlyofficeのアップデートが出るようですが...

OnlyofficeがVer10.0.0に更新されました。
これでNextcloud更新後のフォルダー問題は解決となります

ただ、Community Document ServerがNextloud33に対応していないようで、Onlyofficeでファイルを開いても何も表示されず、編集等もできなくなっています。

Onlyofficeを使っている方は要注意です！

警告の対処方法とかは⇩で検索

アップデートが出たので、早速アップデートしたらところ、今まで見たことのない ”第二要素の設定 このインスタンスには利用可能な第二要素プロバイダーがありません。”の警告が出ていました。
早速調べると、Nextcloudで「利用可能な第二要素プロバイダーがありません」と表示されるのは、二要素認証（2FA）が有効化されているのに、利用可能なアプリ（TOTP、SMS等）がインストール・設定されていないためとのこと。
今まで2段階認証の設定はしていないのでですが。今回のアプデートでセクリティーが強化されてために2段階認証を設定できるようにアプリを入れろとの警告のようです。
ということで2段階認証を行うためのアプリをインストールすることにしました。
すでに2段階認証を設定している場合は、この警告は出ないかもしれません。
警告が出た方はご参考ください。

対処方法

今回でた警告は、赤枠のところです。

さっそくアプリをインストールします。
今回は、”無効なアプリ”で確認すると”Two-Factor TOTP Provider"というのが無効になっていたのでそれを有効にします。

すると警告が消えて、新たに下の赤枠のように”第二要素の設定”が情報として表示されました。
2段階認証が設定されていませんよという情報に変わりました。

今のところ2段階認証はログインする時に手間暇がかかるので、設定をするつもりはないのでそのままにすることにしました。
とりあえず警告の対処はここまでとします。

2段階認証の設定を行う場合は、管理者設定のセキュリティから設定を行えるようです。