AddQuickTagをブロックエディタで使いたい方へ、再利用ブロックで代用する方法

wordpress編

こんにちは

クラシックエディタを使ってた人ならみんな知ってる、便利なプラグイン
AddQuickTagですが、ブロックエディタでは使えません。

け~さん
け~さん

記事の装飾がクリック一発でできるとても便利なプラグイン
で、重宝してました。

ブロックエディタにも記事装飾機能は有りますが、少し物足りません。

上図のように、段落ブロックのツールバーや、サイドのツールバーにもある程度
用意されています。

ツールバーの装飾用のアイコンは、使っているテーマによっても違います。
ここではcocoonの場合で説明しています。

でも、クラシックエディタでAddQuickTagを使っていた人なら、cssを書いて
htmlを登録して作った独自の装飾を使いたいと思ってる人も多いはず。

今回は、そんなAddQuickTagファンのために、ブロックエディタでの
代用方法を紹介します。

スポンサーリンク

クラシックブロックを使う

どうしてもAddQuickTagを使いたいなら、この方法が簡単です。

ブロックエディタのブロックから、「クラシック」か「クラシック版の段落」を選ぶだけ。

クラシックのツールバーが表示されたら「QuickTag」を選択する。

以上で簡単にAddQuickTagが使えます。

け~さん
け~さん

でも、おじさんのようにゆくゆくはブロックエディタしか使わない
ようにしたい。余計なプラグインは削除したい。という方は
次の方法を試してください。

実際に、「classic editor」や「AddQuickTag」、「Advanced editor tool」
などは削除する予定です。

再利用ブロックで代用する

なんとかAddQuickTagで登録した装飾機能を使いたいために、いろいろ調べたん
ですが、この方法が一番簡単ではないかと思います。

先ほどのブロックツールバーにボタンを追加したり。プルダウンメニューに
機能を追加する方法はありますが、難易度が高すぎて、おじさんの手に
負えませんでした。挑戦したい方はこちらから。

再利用ブロックを作成

まずは、AddQuickTagに登録してある使いたい装飾のhtmlをコピーしておきます。

次に、ブロックエディタで「カスタムhtml」ブロックを選び、先ほどのhtml
をペーストする。

ここでは、htmlコードに<span class="under3">○○</span>を使っています。
○○の部分は適当な語句でOKです。

次に、このhtmlコードを再利用ブロックに追加します。

上図のように、htmlブロックのツールバー右端の3連ドットをクリックして
プルダウンメニューの中から「再利用ブロックに追加」をクリックすると、
再利用ブロックに名前を付ける画面が出ます。

覚えやすい名前を付けて、保存をクリックすると

再利用可能ブロックの中に新しく追加されています。

再利用ブロックを使う

先ほど作った再利用ブロックを選択します。

ブロックを選択したら、ツールバーの「通常ブロックへ変換」をクリックします。

注意

ここで、必ず「通常ブロックへ変換」した後に記事を書いて下さい。
再利用ブロックのまま編集すると、他で使っている同じブロックの
記事内容もすべて変更されてしまいます。

例えば次のように編集すれば完了です。

プレビューすると、

きちんとオレンジの下線が引けました。

ちなみに今回オレンジの下線に使ったcssは以下です。

.under3 {
border-bottom: dashed 2px orange;
}

まとめ

今回は、ブロックエディタの再利用ブロックを使って、AddQuickTag
の代用をする方法について紹介しました。

再利用ブロックを追加するまでは結構手間な作業ですが、追加してしまえば
使うのはわりと簡単です。

はるこ
はるこ

でもやっぱりAddQuickTagの方が楽だわ。

まぁそう言わずに試してみて下さい。

その内便利なプラグインが出ることを期待しましょう。

それでは

コメント

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