【WordPress】5.x系で固定ページにHTMLをゴリゴリ書くならカスタムHTMLブロックを使え

WordPressのブロックエディタ(Gutenberg)を使って、かつブロックを使わずにHTMLをガツガツ書く方法は2つあります。

  • エディターをコードエディターに切り替えて直接書く(ビジュアルモードではクラシックブロックになります)
  • カスタムHTMLブロックを使う

4系のころの書き方に準じるなら、コードエディターに切り替えて書く方法ですね。
wpautopをremoveしておいて、コードエディターにhtmlをゴリゴリ書いたことがあるかもしれません。

しかし、5系のブロックエディタでは「カスタムHTMLブロック」を使うことをお勧めします。
(しかもwpautopはremoveしないで!)

今回は下記のコードを記入した場合の動作で解説します。

<div>日本語<br>
日本語
</div>


<div>aaaa
aaaa

aaaa
</div>

<span>aaa</span>

<span>aaa</span>

コードエディタを使うとこうなる

入力欄からフォーカスを外した瞬間にbrが消えました。(1行目)
また改行がいくつか消えています。

そして、実際のページのコードにはpが挿入されます。

<div>日本語<br />
日本語</div>
<div>aaaa<br />
aaaa</p>
<p>aaaa</p>
</div>
<p><span>aaa</span></p>
<p><span>aaa</span></p>

pタグの自動挿入を避けるためにwpautopをremoveする方法もありますが、
<br>が消えたままになり、改行したかった場所の改行も消滅します。

<div>日本語
日本語</div>
<div>aaaa
aaaa

aaaa

</div>
<span>aaa</span>

<span>aaa</span>

remove_filter('the_content’,’wpautop’)を使うわけにはいきませんが、pタグ自動挿入がありソースコードの自動整形の力が強すぎてhtmlが書きづらいのです。

 

カスタムHTMLブロックの場合

もともとの入力の通りに入り、コードが自動整形されることはありません。

そして実際のページ上のコードも入力した通りに表示されます。
これはwpautopの有無にかかわらず、入力した通りに出力されます。

<div>日本語<br>
日本語
</div>


<div>aaaa
aaaa

aaaa
</div>

<span>aaa</span>

<span>aaa</span>

クラシックブロックでの記入=コードエディターでの記入

4.x系のエディタ(クラシックエディタ)では、コード入力した内容はほぼそのままビジュアルエディターでも編集が可能でした。

しかし、カスタムHTMLブロックはビジュアルモード(プレビュー)での編集に対応していません。

プレビューモードでは編集できない

 

ビジュアルモードで4.x系のような編集をしたいのであれば、クラシックブロックをつかうことになります。
※コードエディターで記入したHTMLも、ビジュアルエディターではクラシックブロックになります。

ブロックのメニューに「HTMLとして編集」というのがあるので

「HTMLとして編集」のモードでhtmlを記入すれば、brの消滅は起きないように見えるのですが……。

が、実際の表示ページのコード上では、wpautopをremoveしているとbrが消えます

逆に、wpautopが効いているとpタグの自動挿入が起きます

つまりコードエディターを使って書くのと同じです。

結論

remove_filter('the_content’,’wpautop’)を使ってしまうと思わぬタイミングで改行が効かなくなります。基本的にremoveしないようにしましょう。

また、HTMLをゴリゴリ使ってページを構築するのであればビジュアルモードでの編集はあきらめましょう。
「カスタムHTML」ブロックを使えば安全に記述できます。

ただし編集を容易にしたい箇所は、カスタムブロックを上手く使う必要がありそうです。

カスタムブロックを作るならBlock labが使えそうです。