WordPressのグループブロックにリンクを設置したいなら、Editors Kitの代替プラグインHyperlink Group Blockがオススメ

2024年12月5日

EditorsKitは、WordPressの「グループ」ブロック全体をリンク（a要素）にしたいときに重宝していた。しかし、WordPress6.5.5より後のバージョンで動作しなくなってしまった。

EditorsKitは、Wordpressを6.5.5までダウングレードすれば問題なく動くのでしばらく様子を見ていたのだが、ここ数か月の間プラグインのバージョンアップは行われていない。本プラグインのために旧バージョンのWordPressを運用し続けることには、いろいろと問題があるので代替プラグインを調査した。

結果的に「Hyperlink Group Block」という素晴らしいプラグインのおかげで、ブロックエディタからノーコードでグループへのリンク設定が可能となった。無駄なグループdivを生成せずにaタグで出力されるHTMLもスマートだ。今のところ、WordPress6.7.1の環境で安定して動作している。

EditorsKitが息をしていない

EditorsKitはブロックエディタの拡張プラグインで、前述の「グループ」ブロックへのリンク設定など、ブロックエディタのちょっと足りない部分を補ってくれる。とくにSWELLユーザーがよく導入している印象なのだが、かれこれ半年くらいアップデートされていない。

ついにはWordPressが7月に6.6系へ更新されると、動かなくなってしまった。本プラグインが対応する最新バージョンは6.5.5となっており、たしかにWordPressコアを6.5.5までダウングレードすると、ブロックエディタに馴染のUIが現れる。

EditorsKitの機能の多くは他のプラグインで代替できるのだが、グループのリンク化は意外とニッチな需要なのか、代替手段を見つけられずにいた。

もちろんブロックエディタに拘らず、カスタムHTMLを書くなりすれば対処はできる。しかし私は、サイト運用上で顧客をはじめロースキルの人が触っても問題ないように、ブロックエディタ上で実現できるものはなるべくノーコードにしたいと考えている。

有志公開の代替手段は…残念ながら再編集に問題

知の壺

WordPressのカバーブロックにリンクを設定するプラグインを作りましたタイトルの通りですが、必要だったので簡単なプラグインを作りました。ネットで調べると、EditorsKitというプラグインを使えばできるようになるという記事がヒットし、実際…

WordPressカスタマイズ

EditorsKitのリンク機能が使えない、動かなかったので別のプラグインを拡張してみた | WordPressカスタマイ… カラムブロックやグループ、カバーブロックなどにリンク機能を付けるEditorsKitというプラグインがあります。 SWELLを使っているとそれらの機能がテーマに組み込まれている…

同じような悩みを抱えている人は他にもいたようで、親切にプラグインを公開してくださっていた。2つ目のサイトに記載のある、プラグインの拡張コードを追加することで、ブロックエディタ上でグループへのリンクaを設定できるようになる。

cssを調整して万事解決…と思たら再編集で罠。

問題は、ページの保存後に、同じページの編集画面を開き直した際に生じる。これらのプラグインを用いてグループにリンクを設定した場合に限らず、コードエディタでaタグをくっつけて更新した場合にも、再度同じページの編集画面を開き直すとブロックのエラー表示が出てしまうのだ。

「このブロックには、想定されていないか無効なコンテンツが含まれています」

しかも「リカバリ」や「HTMLに変換」した際に、aタグの中身は（構造により差はあるが）ごっそり消えてしまったり、クラスが飛んでしまうといった問題が生じる。

これは、aタグを設定したブロックのまとまりに「attributes」が設定されていないことによって、WordPressから構文が正しくない旨のエラーが返ってくることに関係しているようだ。

あくまで編集画面上の問題なので、その部分のブロックには触らなければ、ページの閲覧においては正常に表示される。めったに触らないページであれば影響は少ないかもしれないが、たとえば構築中のサイトだと厳しい。私用ならまだしも、クライアントに渡すサイトがこの状態で「仕様です」は難しいかな。

Hyperlink Group Block は完成度が高い

日本語情報がまったくヒットしないものの、「Hyperlink Group Block」は必要な機能をバッチリ満たしている。最終更新も比較的新しく、WordPressバージョンも6.7.1（2024年12月時点）に対応で安心だ。何よりとてもシンプルで使いやすい。

WordPress.org

Hyperlink Group Block

Hyperlink Group Blockの機能

Wrap Blocks with a hyperlink
Use link from Query Loop Block
Transform Blocks into a group wrapped with an HTML anchor tag (a)
Set the link href attribute
Set rel, title and aria-label attributes
Option open in a new window
Set hover background color
Inner anchor elements are automatically deleted

機能の意訳

Hyperlink Group Blockは、ブロックをハイパーリンクaでWrapする
クエリループブロックからのリンクを使用（？）
複数のブロックをaタグで囲まれたグループに変換する
リンクの属性（href、rel、title、aria-label）の設定
新規ウィンドウで開くオプション
:hoverのbackground-colorの設定
内部のアンカー要素を自動的に削除する

ブロックをまとめて選択したら「変換」でHyperlink Groupに

a要素でwrapしたいブロックをまとめて選択して変換メニューの「」アイコンをポチっとすると、Hyperlink Groupが作成される。EditorsKitが構造を変えずにグループに対してリンクを設定したのとは挙動が異なるので、慣れが必要かもしれないが、機能の代替手段としては欲しい機能そのものズバリだ。

グループとHyperlink Groupブロックの変換の挙動

「Hyperlink Group」が「変換：」メニューにあるので少し混乱が生じた。既存のグループ（単体）に対して「変換⇒Hyperlink Group」とした場合は、Hyperlink Groupの中にグループが入って入れ子になる。また、グループでない単体のブロックか、あるいは複数のブロック（グループを含む）を選択して変換した場合も、Hyperlink Groupの中に選択したブロックが入れ子になる。つまり、Hyperlink Groupでwrapされるのであって、ブロックそのものが置き換わるわけではない。

「変換：」という日本語がイマイチ仕様にあっていないように思う。実際には、選択したブロック（単体/複数）の親にHyperlink Groupを新たにつくる挙動に見える。

逆にHyperlink Group⇒グループに「変換：」した場合は、Hyperlink Groupをwrapする形でグループが増えるだけで、こちらも変換はされない。「変換：」でエンドレスに親のグループを増やせてしまう。もし本当の意味でグループに変換したい（戻したい）場合には、要素を再度グループ化した上でドラッグしてHyperlink Groupのwrap外に出し、Hyperlink Groupを削除する必要がある。「グループを解除」のような機能が無いからだ。なお、グループに設定したリンクを解除したとしてもHyperlink Groupそのものは解除されない。

以上粗探しのようになってしまったが、こうした挙動が理解できれば何の問題もない。むしろ、このリンクの機能に限定して言えば、Hyperlink GroupはEditors Kitよりよほど使いやすい。Hyperlink Groupで、多くのブロックエディタのグループリンク難民が救われると思う。

Hyperlink Group（a要素）のスタイル調整

なお作成したHyperlink Groupのa要素の色やhoverについては、右カラムで設定できる。WordoPressコアもしくはテーマの仕様で意図しないところにmarginが設定されていたりするので、背景色の設定は意外と使用頻度が高くなるかもしれない。

もっとも、ブロック1つずつにリンクの色設定を行うのは結構骨が折れるので、テーマの設定と喧嘩しないようにHyperlink Groupで出力されるaタグをうまく調整したい。

/* aタグの中身に標準のスタイルが当たらないように調整 */
a.wp-block-tiptip-hyperlink-group-block {
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}
/* 雑にhoverで明るく（透明に）しておく*/
a.wp-block-tiptip-hyperlink-group-block:hover{
  opacity: 0.7;
}

Use link from Query Loop Blockとは？

最後に説明文で（？）だったクエリーループ〜の機能について触れる。まだ詳細には試していないが、「クエリーループ」ブロックの中で使うと、Hyperlink Groupのリンク先（href）にpostのURLを自動で設定する機能のようだ。

まだ使い道がいまひとつピンと来ないが、自作の投稿リストブロックを用意するケースで役に立つかもしれない。

ちなみに「クエリーループ」ブロックはフルサイト編集（FSE）関連のブロックのひとつなので、テーマによってはあらかじめ非表示になっているらしい。SWELLの場合は以下をfunction.phpに追記することでFSE関連ブロックを有効化できる。

//SWELLでFSE関連ブロックを有効化
add_filter( 'swell_hide_fse_blocks', '__return_false' );

EditorsKit難民に、Hyperlink Group Blockが最高

WordPress.org 日本語

Hyperlink Group Link – Combine blocks into a group wrapped with an hyperlink

EditorsKitでグループリンク難民の方は、ぜひ「Hyperlink Group Block」を使ってみてほしい。私もしばらく制作の案件に使ってみるつもりだ。最近のWordPressプラグイン界隈の不安は、いつまで開発（サポート）が続くか、だ。こうした役に立つプラグインは、開発者の方にちゃんと還元したいな。