Gutenbergのショートコードブロック内でリストやタグを使う方法

Gutenbergショートコードブロック内でリストを使う方法

龍之介

こんにちは、WordPressでガリガリGutenbergを使って記事を書いている龍之介です。
Gutenbergを使ってみてるんだけど、まだ使い慣れなくて使い方がわからない……。ショートコードの中でリスト等のタグを使うにはどうしたら良いの?

方法は2つあります。タグを直書きする方法と、ショートコードで挟む方法です。

  • ショートコードの中でタグを書く方法
  • ショートコードでリストブロックを挟む方法

以下、詳しくご紹介していきます。

補足
Gutenbergエディターは今後アップデートされて、この記事で説明している方法が使えなくなっているかもしれません。
その際はコメントで教えていただければ大変嬉しいです。

Gutenbergのショートコードブロック内でリストを使う方法は2つ

Gutenberg以前のエディター(以下クラシックエディター)では、ショートコードの中でリストを使うことは簡単でした。

しかし、現状のGutenbergでは一工夫必要になっています。

方法A ショートコードブロックの中にHTMLタグを書く

① まずは使いたいショートコードを再利用可能ブロックから選択するか、新たに用意します。

使いたいショートコードを用意。

② ショートコードブロック内で、リストを使いたい箇所にHTMLタグを書きます。

使いたいタグを書きます。ここでは「リスト」タグの「<ul>と<li>」を書いています。

このように、ショートコードブロックの中にHTMLタグを書くことでリストを表現することができました。

↓上記のショートコードです。ボックスの中でリストが使えていることが分かります。

大事なポイント
  • 追加したいリストの中身1
  • 追加したいリストの中身2

もちろんリスト以外のタグも使えますので、お試しください。

次はもっと簡単なやり方です。

B) ショートコードブロックでリストブロックを囲む

① まずは先ほどと同じように、ショートコードブロックを用意します。

使いたいショートコードを用意。

② ショートコードの閉じタグを、別のショートコードブロックに分けます。

③ 分けた2つのショートコードブロックの間にリストブロックを追加します。

以上で完了です。↓一つ目の方法と同じく表示されていることが分かります。

大事なポイント
  • 追加したいリストの中身1
  • 追加したいリストの中身2

一見、手順が多いよいうに見えますが、後の方法Bの方がHTMLタグを書く必要がないので簡単で楽ですね。

ただし、「リストブロック」はあるので良いですが、専用のブロックが用意されていないタグは、今回の方法Aか、もしくは方法Bで「カスタムHTMLブロック」を挟んで実現しましょう。

「カスタムHTML」ブロックを使えば比較的なんでもできちゃいますね。

↓ボックスの中にdlタグの中身が表示されていますね。

大事なポイント
dlタグを使う例
ここに説明
ここにタイトル
ここに説明

おまけ:リストブロックを素早く使う方法

リストブロックを使いたいときに、プラスボタンからリストブロックを選んだり、「/」を押して出てきた中からリストブロックを選ぶと思います。

もう少し素早くリストブロックを呼び出す方法をご紹介します。

「* 」(アスタリスク+半角スペース)で書き始めると自動でリストブロックに変化します。

「1. 」(数字の1 + ドット + 半角スペース)で書き始めると、自動で番号リストブロックに変化します。

半角で打つ必要がありますが、慣れればこちらの方が早くリストブロックを使うことができますね。

WordPressオススメ書籍

Gutenbergに関しての書籍は残念ながらまだ出ていませんが、これらの書籍でWordPressの基礎を学ぶことは可能です。

AmazonベストセラーのWordPress教本です。

初心者向けの超入門本

まとめ

いかがでしたか?

今回は、慣れていないと「あれ?どうやって使うんだ?」となりやすそうな、ショートコード内でのリストの使い方をご紹介しました。

まだ利用者が少なそうなGutenbergでなかなか検索しても情報が出てこないですよね。この記事が困っている方の一助となれば幸いです。

大事なポイント
  • ショートコードボックスの中にはHTMLタグが書ける
  • ショートコードボックスで囲めば中でリストが使える
  • リストブロックは「* 」か「1. 」で書き始めると素早く使える

それでは良き WordPress Gutenberg ライフを!

コメントを残す

メールアドレスが公開されることはありません。