AddQuickTagにブロックエディタ専用のデザインを登録するには?

WordPress
スポンサーリンク

当ブログは収益を目的としたアフィリエイト広告およびアドセンス広告を使用しており、記事内にそれらの広告が含まれる場合があります。

『AddQuickTag』にブロックエディタ専用のデザインを登録する方法です。

「ブロックエディタ」と「AddQuichTag」

ブロックエディタとは?

『ブロックエディタ』(Gutenberg)はWordPress5.0から採用された新エディタです。(※旧バージョンは「クラシックエディタ」。)

正直なところ、慣れ親しんだ「クラシックエディタ」(旧エディタ)のほうが今でも使い勝手はよいです。

旧エディタのサポートは2022年いっぱいで終了する予定になっていますが、クラシックエディタ(プラグイン)の有効インストール数はいまだに500万を超えているので、ちまたでは2023年以降もサポートは継続するのでは?とも噂されています。

わざわざブロックエディタを使う理由は?

このボックスは「見出しボックス」というデザインなのですが、残念ながら旧エディタでこのデザインを使うことはできません

このサイトは『Cocoon』を使っていますが、どのテーマにしてもこれからはブロックエディタに対応してアップデートが進んでいくのはまちがいありません。(今後、旧エディタに新しいデザインはおそらく追加されないのでは?ということ。)

AddQuickTagとは?

『AddQuickTag』あらかじめ登録したHTMLを素早く取り出すことができるプラグインです。

このプラグインは現在、旧エディタにのみ対応となっています。(※1年くらい前からアップデートが止まっているので、旧エディタ上ですらいつまで使えるかはちょっと怪しいですが。)

ただ、ブロックエディタでも「クラシック」というブロックを挿入することで、今でもこのAddQuickTagを使用することは可能です。

スポンサーリンク

再利用ブロックではダメな理由

私の場合

ここは飛ばし読みしてもらっても構いません。

これはあくまで、私の本業における(塾講師)AddQuickTagの使い方なのですが。

ヘッダーとカラム・ボックスを組み合わせたこういうものを、AddQuickTagに登録しています。(↓)

CSSを読み込ませるためというより、よく使う形をテンプレートのような感じで登録しています。

これをブロックエディタ専用のボックスを使うと、こんな感じでスッキリなレイアウトになります。(↓)

(※1カラムになっていますが、これまでどおり2カラムにすることももちろん可能です。)

つまり、ブロックエディタのボックスのほうがやはりスマートでカッコイイので、このタグをAddQuickTagにどうしても登録したいというわけです。

スポンサーリンク

「再利用ブロック」とは?

「再利用ブロック」は、任意のブロックを登録をしておくことで(複数のブロックをまとめて登録も可)、あとから呼び出すことができる機能です。

結論からいうと、前述したような使い方にはNGでした。

試しにやってみます。

まず、下のようなボックスを「再利用ブロック」として登録します。

すぐ下のブロックに、先ほど登録したものを呼び出すと、(「/」で呼び出し)

こんな感じで同じブロックを呼び出すことができました。

問題はここからです。

上のボックス内のテキストを書き換えると、下のボックス内のテキストまで(勝手に)書き換えられていきます。

これについてはちゃんと記載がありました。(↓)

つまり「再利用ブロック」として登録したブロックは、どの場所に設置したとしても互いがリンクしており、登録ブロック内の変更はそのすべてに反映されてしまうということ。

表現はおかしいかもしれませんが、要するに「再利用ブロック」の正体は、ただの「コピペ」というよりも「クローン」に近いものだったというわけです。

私の場合は、ボックス内に毎日まったくちがうテキストを入力しなければなりませんから、残念ながらこの「再利用ブロック」は用途に合いませんでした。

「テンプレート」を使う方法ももちろん論外です。
挿入はできても編集画面で書き換えができなければ意味がありません。

スポンサーリンク

ブロックエディタのタグをAddQuickTagで使う方法

AddQuickTagの登録

前置きがずいぶん長くなってしまいましたが、ようやくここからが本題です。
ただ、ここからの方法はおそらく非推奨であることはご理解ください。

まず、旧エディタとブロックエディタで、同じボックスを挿入してみます。

サイト上での見た目は同じですが、タグの構造はまったく違います。

ここで『AddQuickTag』の設定方法ですが、

旧エディタの場合は、「開始タグ」「終了タグ」を以下のように登録します。

ブロックエディタのほうも同様に登録してみました。

ちなみにボタン名は「ボックス – ブロック」にしました。(ボタン名は任意の文字列)

スポンサーリンク

ブロックエディタでの呼び出し

編集画面(ブロックエディタ)で「クラシック」を選択します。

このようにAddQuickTagが非表示になっている場合は、右端にある「ツールバーの切り替え」をクリックして表示させます。

AddQuickTagが表示されたら、先ほど登録した「ボックス – ブロック」の項目名をクリックします。

これでクラシックエディタとして、ボックスが挿入されます。

「クラシック」を「ブロック」に変換

実は、ブロックへの変換に難しい操作は必要ありません。

ブロックに変換されるトリガーは以下の2つ。

  1. 「コードエディター」に切り替えてから、ふたたび「ビジュアルエディター」に戻す。
  2. 「保存」・「公開」・「更新」のどれかをおこなう。

上の①、②のいずれかをおこなえば、自動的にクラシックからブロックになります。

確認のためコードエディターに切り替えてみましょう。

編集画面の右上をクリックして、「コードエディター」を選択します。
(※または「Ctrl」+「Shift」+「Alt」+「M」)

見てみるとクラシックブロックのタグが消えて、通常のブロックを表すタグのみになっています。

再びビジュアルエディターに戻ってみると、ボックスがブロックとしてきちんと収まっています。

わかったこと

「クラシック」のブロックにブロックエディタ用のコードを無理やり挿入すれば、クラシックは自動で解除されて通常のブロックになる。

ただ、この方法を用いる場合、たまに下のようなエラーが出ることがあります。

その場合はいったん投稿一覧にもどらなければならないので、事前にそれまでの編集内容を保存しておいたほうがよさそうです。

タイトルとURLをコピーしました