WordPressのgutenbergでHTMLタグを追加する方法

更新日: 2019/11/14 投稿日: 2019/05/24

WordPressのgutenbergエディターはHTMLタグを使いたくても非常に使いづらい(´・ω・`)
見出しタグ以下をsectionタグで囲いたくても、どうしたらいいのか最初全然わかりませんでした。

sectionタグ等のHTMLタグの挿入方法と、個人的に便利だなと思う使い方をメモしておきます(`・ω・´)ゞ

HTMLタグを追加する方法

1.プラスマークのアイコン「ブロックの追加」をクリックして、アイコン「カスタムHTML」をクリックします。

「よく使うもの」のところになければ、「ブロックの検索」で「カスタムHTML」と入力するか、スクロールさせて「フォーマット」の項目をクリックすると表示されます。

2.「カスタムHTML」ブロックが追加されたら、使用したいHTMLタグを入力します。

HTMLタグの入力方法はたったこれだけです。
終了タグも同じ方法で、追加したい場所で 「カスタムHTML」ブロック を追加して入力します。

よく使うHTMLタグを「再利用ブロックに追加」して効率アップ!

何回も何回も同じHTMLタグを「カスタムHTML」ブロックを追加して、入力して…ってめんどくさいですよね?(´・ω・`)

ですので、よく使うHTMLタグは「再利用ブロック」に追加して、使い回ししましょう!

1. 「カスタムHTML」ブロック にHTMLタグを入力したら、下の画像のように点が縦に3つ並んだオプションボタンをクリックして、「再利用ブロックに追加」をクリックします。

2.追加する再利用ブロックに適当な名前をつけて、「保存」をクリックします。
「section開始タグ」といった感じで、タグ名と開始タグなのか終了タグなのかがわかる名前にしてます。

3.ブロックを追加する際に、登録した再利用ブロックが表示されてクリックするだけで任意のHTMLタグが追加されます( ̄ー ̄)bグッ!
しかも、登録した再利用ブロックは他の記事でも使えますので、入力の手間が省けて効率がよくなりますよ。

WordPress5.3にアップデートするとエラーが表示される

(2019年11月14日 追記)

WordPress5.3にアップデートすると、この方法で追加したsectionタグは以下の画像のような「このブロックには、想定されていないか無効なコンテンツが含まれています。」とエラーが表示されます。

HTMLの開始タグ、または終了タグが不足していたりすると表示されますが、無視しても特に問題はなさそうです。

おとなしくコードエディター使ったほうがいいかもしれませんね…(´・ω・`)