【Gutenberg対応】WordPressでHTMLをそのまま文字として表示する方法

福岡のWEBフリーランスFUGAのブログ記事をご覧いただき、誠にありがとうございます。

この記事では、

「WordPressでHTMLをそのまま文字として表示させたいのに、HTMLに変換されて表示されてしまう！」

という方のために、HTMLを文字として表示する方法をご紹介いたします。

WordPressではバージョン5.0より、エディタにGutenbergが搭載されていますので、Gutenbergを使用していることを前提に説明いたします。

Gutenberg以前のエディタでは文字参照を使用

5.0より以前のエディタでは、HTMLを文字として出力する場合には、<p>というタグを&lt;p&gt;といった実体参照に置き換える必要がありました。

たとえば、

<p>テキスト<p>

とページに表示したい場合には、

<p>テキスト&amplt;p>

と記述する必要がありました。

実体参照を用いた記述は見づらいですし、入力もしづらいですね。。

Gutenbergでは「ソースコード」ブロックで解決できる

5.0から導入されたGutenbergでは、前セクションのように実体参照を記述する必要がなく、「ソースコード」ブロックを使用することで、HTMLタグをそのまま文字として表示ができます。

HTMLを文字として表示したいページの編集画面で、「ブロックの追加」をクリックします。

「フォーマット」から「ソースコード」を選択します。

エディタに「ソースコード」ブロックが追加されますので、表示したいHTMLを入力しましょう。

入力が終わったら記事を公開または更新して、ページを確認してみましょう。

<p>テキスト<p>

というHTMLが、HTMLに変換されずに文字として表示されていることがわかりますね。

Webのことでお困りでしたら、ぜひFUGAへご相談くださいませ^^