ここが画像の【キャプション】
WordPressの旧エディタ（Classic Editor）でビジュアルモードを使用中、記事に配置した表（table）の編集UIが操作できない問題に遭遇しました。 表のセルをクリックしても反応しない・カーソルが消える・横幅をドラッグで変更できないなど、表を正常に編集できない状態になります。
tableサンプル
| 項目 | 番号 |
| Item1 | １２３４５ |
| Item2 | ６７８９１０ |
試行錯誤の結果、記事の先頭に「キャプション付き画像」を挿入した場合のみ、この不具合が発現することが分かりました。
本記事では、この現象の推定原因とその回避方法を紹介します。
WordPressの使用環境
- WordPress6.8.3
- 使用テーマ：AFFINGER6 ver. 20250802
- Advanced Editor Tools：ver. 5.9.2
- TinyMCE：ver.4.9.11（Consoleで確認）
画像キャプションの実際
キャプションを付ける
画像にキャプションを付与するには、画像を選択後、鉛筆アイコンをクリックして「画像詳細」を表示させます。その後、赤枠で示すキャプション領域に説明文を入力すれば、キャプションの付与は完了です。
コードモードで確認
ビジュアルからコードモードに切り替えると下のコードが記述されて、画像に [caption]ショートコードでラップされているのが分かります。
shortcode 【caption id="attachment_28446" align="aligncenter" width="1024"】 <img src="画像.png" alt="" class="wp-image-28446" style="width: 361px; height: auto;" width="1024" height="819" /> ここが画像の【キャプション】 【/caption】
原因の推定
ビジュアルモードで [caption] ショートコードを使用すると、TinyMCE によって JavaScript が実行され、ショートコードが HTML に変換されてビジュアル上に表示されます。 ビジュアルモードのまま、Google Chromeの「検証」機能を用いて「キャプション付き画像」要素を解析したところ、class=“wp-caption” を含んだHTML構造が確認できました。
WordPress の旧エディタ（TinyMCE）では、ページ先頭に ショートコードがある場合、そこから生成される wp-caption を含む HTML 構造が TinyMCE の DOM パースや自動整形処理に影響し、後続の <table> 要素に対する Advanced Editor Tools によって拡張されたテーブル編集UI（列幅のドラッグ調整など）が正しく初期化されず、無効化されたものと推定されます。
回避方法（対処療法）
本件の最も簡単な回避策はブロックエディタの導入です。 しかし、直感的で効率的に記事が作成でき、強力なテーブルの編集UI機能を含めて魅力を感じている旧エディタ派にとってはブロックエディタへの移行には抵抗があります。 そこで、下の回避策の内のどれか一つを選べば旧エディタでも回避可能です。
旧エディタでの回避策
- キャプション付き画像を記事の先頭に置かない
- ページ先頭に空の行を設け、その下にキャプション付き画像を配置する
- 上記 ② の変形として[none]ショートコードをページの先頭に配置
- <div>タグでキャプション全体をラップする
【none】ショートコード
過去記事で紹介した[none]ショートコードは、何もしないショートコードです。
[none]ショートコードは、子テーマの function.php に以下のコードを記述して作成します。
|
1 2 3 4 5 |
function shortcode_none(){ //[none]ショートコード return null; //又は '' でもOK } add_shortcode('none','shortcode_none'); |
当サイトでは、③の回避策：[none]ショートコードを採用して、[none]をページの先頭に配置しその下にキャプション付き画像を置き、テーブル編集UIが効なくなる問題を回避しました。
備考：もし、Affinger6テーマを使っていれば、[none]の代わりに、「タグ」＞「条件表示」＞「エディタ用メモ」の[st-comment-out memo="メモ"]ショートコードで代替えできます。