WordPress

WordPressで複数の画像ブロックを一度に追加する方法

最近はGutenbergのビジュアルエディタを使ってWordPressの記事を書く方法に慣れてきましたが、コピー&ペーストで複数の画像を一度に挿入したい場合など、Gutenbergのビジュアルエディタでは実現できない操作も存在します。

想定ケース

私の場合、記事の中に複数の画像ファイルを挿入するケースが多くあります。
また、Easy FancyBoxというプラグインで、リンクを張った画像が自動でポップアップ表示されるように設定しているので、画像ファイルへのリンクも同時に設定する必要があります。

WordPress 5.3のGutenbergでは、クリップボードの画像を直接貼り付けたり、画像ファイルをドラッグして追加することも可能になっていますが、この操作で追加した画像は「WordPressのメディア」に追加されてしまいます。WordPressのメディアに追加すると、自動で複数サイズの画像(縮小版の画像など)が作成されるので、この方法は好みません

そのため、記事の中で使用する画像は専用のimgディレクトリ配下に格納して、画像ファイルのURLを直接指定する形で画像を挿入しています。

以前は複数画像ファイルへのリンク付きHTML(<p><a href="~.png"><img src="~.png"/><a></p>のようなHTML)をプログラムで作成して、クラシックエディタのソースコードに直接貼り付けて使用していましたが、Gutenbergのビジュアルエディタでは、これまでのHTMLをそのまま貼り付けることはできませんでした。(そして、それぞれの画像はGutenbergの画像ブロックとして扱いたい)

よって、私の場合は次の要件を全て満たすような操作を実現したいと思っています。

  • 複数の画像を一度に挿入したい
  • 各画像は専用のimgフォルダに格納したファイルを使いたい
    (WordPressのメディア機能は使わずに、FTPソフトでアップした画像を直接使う)
  • 各画像には、元の画像ファイルへのリンクを設定したい
  • 各画像はGutenbergの画像ブロックとして認識させたい

WordPressのメディアを使う想定であれば、Gutenbergのギャラリーブロックを使って複数画像を登録し、それを画像ブロックに変換する方法で複数の画像ブロックを一度に作成できます。ただし、メディアを使いたくない場合、この方法は使えません。

複数の画像ブロックをコピー&ペーストで挿入する方法

いろいろな方法を試してみた結果、上記であげた条件を満たした状態で、複数の画像ブロックを1回のコピー&ペーストで挿入することに成功しました。

方法としては、クラシックエディタを利用していたときのようにHTMLのコードを生成して、そのHTMLコードを貼り付け…という手順なのですが、生成するHTMLのコードが変わっています。具体的には、次のような形のHTMLコードを生成すれば、Gutenbergのビジュアルエディタに直接貼り付けて画像ブロックを作成できます

Gutenbergの画像ブロック用HTMLコード

次のようにHTMLのコメントでブロックの種類を指定すれば、ビジュアルエディタに貼り付けたときに自動で画像ブロックとして認識されるようになります。

imgタグのalt属性で画像の代替テキストを設定できます。また、画像のキャプションを設定したい場合は、figcaptionタグを使ってキャプションを挿入できます。

<!-- wp:image {"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://~/img/image.png"><img src="https://~/img/image.png" alt=""/></a></figure>
<!-- /wp:image -->
<!-- wp:image {"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://~/img/image.png"><img src="https://~/img/image.png" alt=""/></a><figcaption>キャプションの内容</figcaption></figure>
<!-- /wp:image -->

今回は画像ブロックに焦点を絞っていますが、他のブロックについても同じような方法でHTMLコードを作成できます。

各ブロックのHTMLコードを知りたい場合は、Gutenbergのビジュアルエディタの編集画面で内容をコピーして、テキストエディタなどに貼り付ければHTMLコードを確認できます。

ここではGutenbergのビジュアルエディタに直接貼り付け可能なHTMLコードについてのみの説明になります。そのため、画像ファイルからHTMLコードを作成するプログラムについては説明していないのでご了承ください。

画像ファイルのリストからHTMLコードを生成する手段は色々考えられると思いますが、独自にプログラムを作成しなくても、テキストエディタのキーマクロを使ったり、正規表現を使った置換だけでもコード生成が可能だと思われます。

例えば、正規表現の置換でHTMLコードを生成したい場合は次のようにできます。
まずは、挿入したい画像ファイル名を単純に改行して列挙します。

image01.png
image02.png
image03.png

これを正規表現を使った置換で、次のように置換すればHTMLコードが完成します。

置換前の文字列:^(.+)$
置換後の文字列:<!-- wp:image {"sizeSlug":"large","linkDestination":"media"} -->\n<figure class="wp-block-image size-large"><a href="https://~/img/\1"><img src="https://~/img/\1" alt=""/></a></figure>\n<!-- /wp:image -->\n