WordPressのブロックエディタで説明リスト（dl・dt・dd）を使う2つの方法を解説します。
「カスタムHTML」を使用する方法、プラグインを使用する方法の2通りです。
説明リストとは？
説明リストとは、以下のようにリストに説明文を追加できるリストタグです。
- りんご
- 赤くて甘い果物。
- みかん
- オレンジの甘い果物。
- バナナ
- 黄色くて甘い果物。
見出しやテーブルと違って、簡単な説明を追加したい場合に最適です。
詳しくはこちらをご覧ください。
ブロックエディタに説明リストはない
ブロックエディタには通常のリストブロックはありますが説明リストのブロックはありません。
説明リストは使い勝手が良いので必要です。
どうにか使えないかと調べたところ「カスタムHTML」とプラグインを使用した2通りの方法が見つかりました。
プラグインを使用する方法
こちらの方法はプラグイン「Simple Definition List Blocks」を使用します。説明リストをブロックとして追加、編集が可能になります。
Simple Definition List Blocksのインストール
WordPress管理画面で「プラグイン→新規追加」から「Simple Definition List Blocks」と検索、インストールし「有効化」します。
Simple Definition List Blocksの使い方
プラグインを有効化するとフォーマットの項目に「definition list」が追加されます。
definition listブロックは「+」ボタンから「dt tag」と「dd tag」を追加できます。
「dt tag」→「dd tag」→「dt tag」→「dd tag」と追加してみました。
テキストを記入してみました。とてもシンプルで簡単です。
dt、ddタグはブロックとして追加されるので削除したい場合は「ブロックを削除」から行ってください。
カスタムHTMLから使用する方法
こちらは「カスタムHTML」ブロックを使用する方法です。
カスタムHTMLは任意のHTMLやJavaScriptのコードを記事本文に直接書きたい場合に使用するブロックです。
説明リストのコードを書いた場合はこのようになります。
カスタムHTMLのブロックは「フォーマット→カスタムHTML」から追加できます。
ブロックを追加したら、試しに以下のコードをコピペしてプレビューから確認してみましょう。
<dl>
<dt>りんご</dt>
<dd>赤くて甘い果物。</dd>
<dt>みかん</dt>
<dd>オレンジの甘い果物。</dd>
<dt>バナナ</dt>
<dd>黄色くて甘い果物。</dd>
</dl>プレビューで見た目が微妙だった場合
使用しているWordPressテーマによっては説明リストのデザイン（CSS）がない可能性があります。
その場合は表示が簡素で微妙なものになってしまいます。
私は無料テーマのCocoonをカスタマイズして使っていますが、やはり説明リストのCSSは実装されていなかったので自分でデザインを追加しました。
自分でCSSを追加したい場合は以下リンク先の「説明リストのCSSが備わってない場合」の項目を参考にしてください。
カスタムHTMLから説明リストが使えましたが、毎回コピペするのは手間ですし手打なんて論外です。
そこで「再利用ブロック」に説明リストの雛形を登録し、いつでも簡単に呼び出せるよう設定しましょう。
再利用ブロックの登録方法
再利用ブロックは同じ内容のブロックを何度も利用するためのブロックです。一度登録しておけば、毎回いちいち記述せずに何度でも投稿できるので便利です。
文章などは定型文として、今回のようなHTMLコードはレイアウトの雛形として登録します。
今回登録するHTMLコードはこちらです。
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>コードをコピーして先ほどと同じように「フォーマット→カスタムHTML」から貼り付けます。
これで雛形となるカスタムHTMLのブロックができした。
続けて再利用ブロックに登録します。
ブロックツールバーの詳細設定をクリックして「再利用ブロックに追加」をクリックします。
名前に「説明リスト」と入力して「保存」をクリックします。
これで登録できました。
適当な場所に登録した「説明リスト」ブロックを追加してみましょう。
ブロック一覧の「再利用可能」の項目に登録した「説明リスト」が表示されるのでクリックします。
説明リストのブロックが表示されました。
ブロックツールバーの詳細設定から「通常のブロックへ変換」をクリックします。これで説明リストのカスタムHTMLブロックが復元されたので、好きなように使用して問題ありません。
今回追加したHTMLコードはタグの間に何も入っていないためコンテナ内は何も表示されません。気になる場合はdtに「タイトル」、ddに「説明文」など適当なテキストを記入しておきましょう。
まとめ
カスタムHTMLとプラグイン、説明リストをブロックエディタで使う2通りの方法を紹介しました。
どちらの方法も最初に少し手間は掛かりますが、一度設定してしまえば呼び出すのは簡単です。
どちらの方法がおすすめかは人によって違うのでしょうか、説明リストを頻繁に使う場合はプラグインの方が楽かなと思います。
カスタムHTMLも使い方を覚えるととても応用が効くので、これを機に挑戦してみてはいかがでしょうか。
コメント