【WordPress Cocoon】プラグイン無し　表（テーブル）の中に画像を挿入する方法

ワテのブログは、WordPress/Cocoonを使わせてもらって作成しているが、プラグイン無しで表の中に画像を挿入する方法を探しても見つからなかったので、ここに残しておく。

「TablePress」というプラグインが便利らしいので、普通は素直にそれを使うのが良いのだと思う。
ワテはプラグインを増やしていくのに抵抗があるので、自力で出来る方法を探してみた。

ワテが作りたかった表はコチラのページの表だ。

このページの表に、国旗の画像を挿入したかった。

とりあえず、下記の2つの方法が見つかった。
基本は「HTMLで直接書き込む」のが良いと思う。

上記のページでは、別途セルの結合を行いたかった為「クラシックエディターの表を使う」方法を採用した。

これも理由がよくわからないが、今のエディターはセルの結合が出来ない。（サポートされていない）
HTMLで直接セルの結合を書き込んでもエラーとなってしまい、クラシックエディターを使うしかなくなる。

かもめ

エクセル感覚で表を編集出来るようにならないものか。。。
エクセルが如何に優れているかを実感できたよ。

尚、エクセルで表を作って、HTMLに変換するというのもやってみたが挫折したので、番外編として紹介します。

HTMLで直接書き込む
クラシックエディターの表を使う
番外編　エクセルで表を作成し、HTMLに変換

HTMLで直接書き込む

下の表のように、かもめの画像を表内に入れた。
なぜ標準機能でこれが出来ないのかはよくわからないが、HTMLに直接書き込むことで、画像を入れることが出来た。

表をHTMLで表示するとこのようになる。
（わかりやすいように、改行や空白を入れた）
赤字の部分が画像データを呼び出している部分だ。ここを追加で入力すれば良い。

<figure class=”wp-block-table”>
<table>
<tbody>
　<tr><td class=”has-text-align-center” data-align=”center”>画像</td><td>あいうえお</td><td>かきくけこさしすせそ</td><td>たちつてとなにぬねのはひふへほ</td><td>わをん</td></tr>
　<tr><td class=”has-text-align-center” data-align=”center”><img src=”https://www.kamomelion.com/wp-content/uploads/2020/09/cropped-kamome.jpg” alt=”” class=”wp-image-122″></td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
</figure>

赤字部分に何を入力すれば良いか探す方法はいろいろあるが、下記の方法が簡単だと思う。

まず、適当な場所に表示したい画像を挿入する。

その画像をHTML表示にすると、下記のようになる。

<figure class=”wp-block-image size-large”><img src=”https://www.kamomelion.com/wp-content/uploads/2020/09/cropped-kamome.jpg” alt=”” class=”wp-image-122″/></figure>

この赤字部分が画像データの場所なので、コピペして貼れば良い。

クラシックエディターの表を使う

こちらでも下の表のように、かもめの画像を表内に入れた。

クラシックエディターでは、標準機能として画像が挿入できるようになっているので、それを使ってやれば良い。

ただし、クラシックエディターで気を付けなければならないのは、表の編集をしている間に表の高さを変更してしまうと、設定値として記録されてしまう。

試しに、ブラウザの大きさを変更しながらこのページの表を見てみて欲しい。
通常のエディターで作成した「HTMLで直接書き込む」の表の高さは、ブラウザの大きさに合わせて適切な大きさに変わっていくが、クラシックエディターで作成した「クラシックエディターの表を使う」の表の高さは、変わらないのがわかるかと思う。

敢えて高さを固定したいのであればいいのだが、そうでない場合は気を付けなければならない。

高さをフリーに変更という機能が無い為、うっかり高さを固定してしまった場合、表を作り直すか、HTMLで高さ指定の部分を削除しなければならない。