「テキストエディタで独自のHTMLを記入して、装飾を行いたい」

しかし、記述内容によっては、下記のようにpタグやbrタグが自動挿入されて、意図したレイアウトを実現できないことがあります。

テキストエディタに記入したHTML

<a href="#">
<img src="https://example.com/wp-content/uploads/image.jpg"/>
</a>

実際に出力されるHTML

<p><a href="#"><br />
<img src="https://example.com/wp-content/uploads/image.jpg" /><br />
</a></p>

当記事では、この事象の原因とHTMLタグの自動出力を停止できるプラグイン「Toggle wpautop」の使い方についてご紹介します。

なぜpタグやbrタグが自動挿入されるのか

WordPressの自動整形機能(wpautop関数)が原因です。

クラシックエディタでは、段落の追加や改行に対して自動でHTMLタグを挿入します。記事を書く時には、この機能のおかげで、テキストをpタグで囲んだり、brタグで改行する必要がなくなるんですね。

しかし、HTMLで任意のコンテンツを挿入する場合は、意図しないタグが挿入されるため、この機能が弊害となる可能性があります。

そこで、ページ毎に自動整形機能を停止できる「Toggle wpautop」の出番です。

「Toggle wpautop」概要

管理画面からページ単位で自動整形機能(wpautop関数)を停止できるシンプルな機能のプラグインです。また、投稿や固定ページだけでなく、カスタム投稿も対応しています。

プラグインのインストール

管理画面から「Toggle wpautop」を検索してインストールするか、下のボタンからもダウンロード可能です。
プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。

Toggle wpautop

Toggle wpautop

「Toggle wpautop」の使い方

基本的には各オプションにチェックを入れるだけで、自動整形を停止できます。設定 > 投稿設定を開き、自動整形を停止したい投稿タイプにチェックを入れます。

Toggle wpautop 設定画面

先程チェックを入れた投稿タイプの編集画面を開き、画面右上の「Disable wpauotp」にチェックを入れます。これで自動整形機能を停止できました。

編集画面のDisable wpautopオプション

チェックを外した記事では、自動整形機能が有効化された状態になります。

投稿設定の「Auto Enable」にチェックを入れると、新規投稿時に「Disable wpauotp」オプションが有効化された状態になります。

まとめ

「Toggle wpautop」を使って、pタグやbrタグの自動挿入を停止する方法について解説しました。しかし、テキストエディタとビジュアルエディタ切替時に一部の記述が消失する事象は防げないため、ご注意ください。

整形自体を完全無効化した状態でHTMLを記述したい方は、ブロックエディタ(Gutenberg)の「カスタムHTML」ブロックを利用する方法もございますので、ぜひお試しください。