WordPressのエディターをブロックエディタ―に変更すると困るのが、「装飾」です。従来のクラシックエディターで使えた装飾機能が使えなくなるというパターンが多い。
しかし、実は「ちょっとしたひと手間」で表示させられるものが結構あることに気が付きました。
そこでこのコンテンツでは、編集メニューの「ブロック」には表示されない装飾をブロックエディタ―上で使う方法についてシェアします。なお、検証したWordPressテーマは「DIVER」です。
Contents
テーマ独自の装飾を使って得られる2つのメリット
理由は単純で、ブロックエディタ―標準の装飾は見づらい／使いずらいものがあるから。そしてそもそも提供されていない装飾があるからです。それに対してテーマの装飾は、素人には作れないようなデザイン性が高いものが多数存在します。しかも、使い回しが可能です。
従来エディターで使ってきた装飾をブロックエディタ―でも使い回せれば、作業時間やカスタマイズ等の時短につながり、ストレスも軽減されます。だからこれは重要な問題となる訳です。
従来の装飾をブロックエディタ―でも使う方法
「クラシック版の段落」上では、従来エディターで使えた装飾が使えます（全てではありませんが）。なのでどうしても使いたいものは、クラシック版の段落上で使えばOKです。
但し、普通にやると結構な手間が掛かります。「普通の」手順は下記の通りです。
- 「クラシック版の段落」を選択
- 「HTMLとして編集」状態にし、コードをペースト※
- 「ブロックへ変換」を選択（表示されない場合は「ビジュアル編集」を選択）
- 編集を行う
【※注記】：あらかじめ、使いたい装飾のhtmlコードを手元に置いておく必要がある
問題点
上記「普通の」手順で発生する問題点は下記の通りです。
- 毎回コードを入力（貼り付け）する必要がある
- 画面の切り替えが多く、時間も掛かるしミスもしやすい
- 再利用ブロックとして使えるものまで毎回入力しなければならない
コードの貼り付けは装飾ボタンのクリックと「同じひと手間」として割り切ったとしても、他の工程は可能なら削除したいところです。やってみると結構ミスやエラーが多くて大変でした。
解決策
色々試した結果辿り着いたのが、「コードエディター上にテンプレート化したhtmlコードを貼り付ける」こと。これにより、大幅な時短に成功しました。具体的な手順を解説していきます。
テンプレート化への簡単2ステップ
テンプレートの作成は2ステップで完了します。作業自体はコピー&ペーストがほとんどですので、初心者でも大丈夫。ご安心下さい。
STEP1：事前準備
まずは事前準備から。下記3つの手順で必要なコードを抽出します。
- プラグイン「クラシックエディター」をインストールし、「有効化」する。
- 新規投稿で、使いたい装飾を選択→ページ上に表示させる
- テキストエディターを開き、コードをコピー→テキストエディタ等に貼り付けておく
STEP2：テンプレートの作成
事前準備が終わったら、後々使いやすい「テンプレート」を作ります。手順は下記の通りです。
- クラシックエディターを「無効」にする。
- ブロックエディタ―で「クラシック版の段落」を選択
- 「HTMLとして編集」状態にし、事前準備で集めたコードを１つずつペースト
- 「ブロックへ変換」を選択（表示されない場合は「ビジュアル編集」を選択）
- 表示を確認。問題なければ「コードエディター」に切り替え、コードを確認する
- コードの先頭行に「wp:tadv/classic-paragraph」の記載がある場合は全てコピー※1
- コードの先頭行が上記以外の場合は、再利用ブロックへの変換を試みる※2
- コピーしたコードをテキストエディタ等に保存 （後々使いやすいように編集する）
※1：コードの先頭が「wp:tadv/classic-paragraph」の場合
先頭が 「wp:tadv/classic-paragraph」で始まるコードは、このコンテンツ執筆時点では再利用ブロックへの変換は出来ませんでした。よって該当範囲全てをコピーしてテンプレートを作成しましょう。「該当範囲」については、下記を参考にして下さい。
※2：コードの先頭が「wp:tadv/classic-paragraph」以外の場合
先頭が 「wp:tadv/classic-paragraph」以外なら、まずは再利用ブロックへの変換を試してみましょう。再利用ブロックとして使えれば、ビジュアルエディター上で呼び出すだけ（貼り付け作業も不要）なのでより速く・正確に作業が行えます。
STEP3：テンプレートを使い回す
テンプレートが完成したら、あとは使うだけ。使用方法は下記の通りです。
- 「コードエディター」に切り替える
- 使いたい場所にコードを貼り付ける
- ビジュアルエディターに戻り、編集する
テンプレート化のメリット
冒頭お伝えした「普通の」手順との最大の違いが、より簡単で速く、正確に作業出来ることです。具体的には下記3項目のメリットがあります。
- 貼り付けるだけなのでとても簡単 。ほぼ失敗しない。
- いちいちブロックを選択したり、htmlに変換する必要が無い
- 再利用ブロックに登録出来たものは、ビジュアルエディター上で編集可能（呼び出すだけ！）
実例
最後に、少し実例を挙げてみます。
①ビジュアルエディター上で使えるテンプレート
DIVERの「マーカー」及び「動くマーカー」は、再利用ブロックとして使えます。私が登録している再利用ブロック（テンプレート）は下記の通りです。
マーカーのテスト
テンプレート化したコードは下記の通り。このコードを上記手順で貼り付けてブロック化し、「再利用ブロックに追加」して使い回しています。
<!-- wp:paragraph -->
<p><span class="sc_marker"><span style="color:#f00" class="tadv-color">マーカーのテスト。</span></p>
<!-- /wp:paragraph -->一度登録してしまえば、こんな使い方も出来ます。太字やテキスト色の変更など、クリックだけの簡単操作で強調効果を生み出せるので便利です。
②クラシック版の段落に貼り付けて使うテンプレート
下記はDIVERの「デザインリスト」です。テンプレートは下記の通りです。
- テキスト1
- テキスト2
- テキスト3
テンプレート化したコードは下記の通り。このコードをテンプレートとして保存しておき、使いたい場所に貼り付けて使っています。リスト部分のテキストを変更するだけなので、これでも十分時短になります。
<!-- wp:tadv/classic-paragraph -->
<div class="sc_designlist li fa_check red">
<ul>
<li>テキスト1</li>
<li>テキスト2</li>
<li>テキスト3</li>
</ul>
</div>
<!-- /wp:tadv/classic-paragraph -->他にももっと便利な方法があるかもしれません。良いネタが見つかれば、このコンテンツを更新するか別のコンテンツをアップしてシェアしようと思います。
