HTMLの/画像
悩む男性

「WordPressでTHMLタグや再利用ブロックを簡単に挿入する方法ってない?

できればAddQuicktagみたいなプラグインがいいんだけど…」

こんなお悩むに答えていきます。

ブロックエディタ(Gutenberg)になってからAddQuicktagが使えなくてHTMLを簡単に入れなくなりましたよね。

でもちょっとした設定で手早くHTMLや再利用ブロックを記事に挿入することができるんです。

その方法をご紹介します。

【この記事で得られるコト】
  • ブロックエディタで使えるAddQuicktagと似たプラグインはあるのか
  • プラグインを使わずHTMLをカンタンに挿入する方法
  • プラグインを使わず再利用ブロックをカンタンに挿入する方法
  • ブロックエディタがカスタマイズできるおすすめプラグイン

結論|ブロックエディタ(Gutenberg)でAddQuicktagと同じプラグインはない

結論、現在(2021年10月)ではブロックエディタ(Gutenberg)でAddQuicktagと同じプラグインはありません。

こればっかりはしょうがない…

AddQuicktagを利用したいならクラシックエディターを使うしかありませんね。

しかしクラシックエディターは2021年12月31日でサポートが終わってしまうので、できればブロックエディターに慣れておいたほうがいいかもしれません。

では、これからAddQuicktagと同じことはできませんが、似たようなことができる方法をご紹介します。

WordPress|ブロックエディタ(Gutenberg)でカンタンにHTMLタグを挿入する方法

悩む男性

「HTMLを手打ちするのが面倒…定型文みたいに登録してサッと挿入する方法ない?」

この悩みはMicrosoftのIMEユーザー辞書ツールを使うことで解決することができます。

AddQuicktagと同じようにはなりませんが、似たような使い方ができるので参考にしてみてください。

Microsoft|IMEユーザー辞書ツールの用途

MicrosoftのIMEユーザー辞書ツールは「登録した単語を省略文字で呼び出すことができる」便利なツールです。

このツールを使ってよく使うHTMLを登録すれば、ショートコードで手軽にHTMLを貼り付けることができます。

では登録方法と使い方を説明します。

Microsoft|IMEユーザー辞書ツールの登録方法

IMEユーザー辞書ツールの登録方法は下記のとおり。

  1. 「あ」の上で右クリック
  2. 「辞書ツール」をクリック
  3. 左上にある「追加」をクリック
  4. 「よみ」に省略文字(ショートコード)を入力
    (例:見出しのHTMLなら「みだし」と入力)
  5. 「単語」にHTMLを入力
  6. 「品詞」は「短縮読み」を選択

下記では画像付きで説明してます。

STEP
「あ」の上で右クリック
IME登録方法1
STEP
「辞書ツール」をクリック
IME登録方法2
STEP
左上にある「追加」をクリック
IME登録方法3
STEP
「よみ」に省略文字(ショートコード)を入力
(例:見出しのHTMLなら「みだし」と入力)
あとで変更できるので仮のよみでも大丈夫です。
登録するときは「ひらがな」がおすすめですが、好きにしてもらっていいです。
STEP
「単語」にHTMLを入力
装飾のHTMLを登録するときは、<span class=”〇〇”>と</span>は別々に登録しておきましょう。
その理由はあとで説明します。
STEP
「品詞」は「短縮読み」を選択
プルダウンで表示されます。
うまく表示できないことがありますが、表示するまでクリックしましょう。
ここまでできたらそのまま閉じて大丈夫です、

これで準備は完了

Microsoft|IMEユーザー辞書ツールの使い方

IMEユーザー辞典ツールの使い方はカンタンです。

  • 「よみ」で登録した文字を打つ
  • 変換キーを押す

これだけで登録したHTMLが出てくるはずです。

同じ「よみ」で登録してるときは、もう一度変換キーを押すと一覧が表示されるのでカンタンに選ぶことができます。

文字装飾したいブロックを[HTMLとして編集]に変更し、好きなところにHTMLを挿入。
最後に</>HTMLで閉じると完成です。

[HTMLとして編集]や[カスタムHTML]にする手間はありますが、これで結構マシになると思います。

WordPress|プラグインなしで簡単に再利用ブロック(定型文)を挿入する方法

プラグインなしで簡単に再利用ブロック(定型文)を挿入するには2つのツールを使います。

  1. IMEユーザー辞書ツール
  2. WordPress再利用ブロック

ではカンタンに説明していきます。

まずIMEと再利用ブロックをどう使うのか

IMEと再利用ブロックの役割は下記のとおり。

  • IMEはHTML・再利用ブロックを瞬時に呼び出すために使用
  • 再利用ブロックは定型文・HTMLタグなどを作成するために使用

通常、WordPressで再利用ブロックを挿入するには…

[ブロック追加]→[すべて表示]→[再利用可能]→[再利用ブロックを選択]ですよね。

でも今から紹介する方法だど…

[よみを入力]→[再利用ブロック選択]で済みます。

では方法をご紹介します。

IMEに「/再利用」を登録する

さきほどのIMEユーザー辞書に登録した方法を参考に、「単語」に「/再利用」を登録します。
(「」は入力しなくていいですよ。 /再利用 だけでOK)

「よみ」は任意でOK
(できれば短いよみにしてください)

「/再利用」はWordPressで使えるショートコードです。

再利用ブロックの登録

再利用ブロックの登録手順は下記のとおり。

  1. 記事投稿画面で希望の定型文・HTMLを入力
    (HTMLを登録するときは先に[カスタムHTML]で入力する)
  2. 上部タスクバーのオプション(縦に3つの点)を開く
  3. [再利用ブロックを追加]をクリック
  4. 任意の名前をつけて完了

これで再利用ブロックの登録は完了です。

次は使い方を紹介します。

再利用ブロックを簡単に呼び出す方法

再利用ブロックを簡単に呼び出す方法は下記のとおり。

  1. IMEに登録した「/再利用」のよみを入力する
  2. 「/再利用」の文字が出たらEntを押す
  3. 再利用ブロック一覧が表示されるので任意のブロックを選ぶ

これで完了です。

これを使えば再利用のほかにも色々なブロックを瞬時に呼び出すことができます。

再利用ブロックの注意点

再利用ブロックは、登録した一つのブロックがすべてリンクしています。

たとえば「<span class=”〇〇”>」という再利用ブロックを2つ使用したとします。

その片方のブロックの内容を 「<span class=”〇〇”>」 →「<div class=”〇〇”>」に変更したとします。

すると、変更していないブロックも 「<div class=”〇〇”>」 になってしまうんです。

要するに再利用を使用したブロックは連動しているってことですね。

これを解決するには下記のとおり。

  • 変更したい再利用ブロックをクリック
  • 画面左下に出てくる「〇〇→〇〇(ブロック名)→〇〇」のブロック名をクリック
  • 画面上のダスクバーの「通常のブロックへ変換(□が重なったマーク)」をクリック

これで他の再利用ブロックとのリンクは切れます。

最後に|ブロックエディタがカスタマイズできるおすすめプラグイン

ここではブロックエディターをカスタマイズしてデザインされたテーブルやリスト、ボックスをカンタンに挿入できるプラグインを紹介します。

今回紹介するのは下記の3つ。

ほかにもブロックエディターをカスタマイズできるプラグインはありますが、色々触ってみた結果、個人的にこの3つが良かったです。

どれも無料(一部有料)で利用することができますし、3つ入れても問題ないです。

説明しても実際に扱ってみないことにはわからないと思うので、あえて内容は説明しませんが、どれも手軽にできるプラグインなので気になる方は試してみてくださいね。

ちなみにすべて公式URLなので怪しいサイトではありませんよ
「ブロックエディター カスタマイズ プラグイン」でググれば色々出てくるので検索してみてください。