スポンサーリンク

【WordPress】記事内にhtmlソースコードをそのまま表示(ブロック/クラシックエディター対応)

ソースコードイメージWord Press

WordPress(ワードプレス)で、記事の中にhtmlソースコードをそのまま表示する方法をご紹介します。

文章の中の一部分で、テキストとテキストの間にコードを表示する方法です。

ブロックエディターではWordPress標準のテキストエディタでできます。
クラシックエディターでは、プラグイン「Advanced Editor Tools」を使うとできます。

簡単にできますが、少し分かりにくかったので、まとめてみました。

テーマやエディター機能追加プラグインなどによって異なる場合があります。

ブロックエディタ―でhtmlソースコードをそのまま表示

ブロックエディターでは、「コードブロック」を使えば、htmlソースコードをそのまま表示できます。

コードエディター
コードブロック

しかし、ブロック単位での記述となるので、文章中の一部分だけをhtmlソースコード表示することはできません。

ここでは、文章中のコードをそのまま表示する方法を紹介します。

段落ブロックを使う

テキストの中にある<strong>テキスト</strong>というHTMLコードをそのまま表示させます。
以下のように段落ブロックに入力します。

ブロックエディター

以下のようにHTMLコードを選択します。

ブロックエディター

そして、ツールバー右側(下向きの三角)をクリックして「インラインコード」を選択します。

ブロックエディター

すると、以下のようになります。

ブロックエディター

プレビューで確認すると、このようになります。
コードを見ると、<code>と</code>で囲まれています。

※テーマによって背景がグレーにならない場合もあるようです。
私が試したテーマでは、以下のようにSnowmonkeyはグレーになり、CocoonとTwenty Nineteenではグレーになりませんでした。
※当サイトはCocoonを使用していますが、段落ブロックツールバーの「マーク」で背景を付けています。

ブロックエディター

クラシックブロックを使う(Advanced Editor Tools使用)

クラシックブロックを挿入します。

クラシックエディター

クラシックブロックは標準で以下のようになっています。
コード挿入用の項目はありません。

クラシックエディター

エディター機能拡張プラグイン「Advanced Editor Tools」をインストールします。(挿入方法は省略)

Advanced Editor Tools

ツールバーが以下のようになり、項目が増えました。

クラシックエディター

HTMLコードの部分を選択します。

クラシックエディター

ツールバーの「フォーマット」 をクリック

クラシックエディター

開いたメニューから「コード」を選択

クラシックエディター

以下のようになります。

クラシックエディター

プレビューで確認するとこのように表示されます。

テキストエディター

Advanced Editor Toolsを入れて「code」の項目が表示されない場合

プラグインを入れても「code」の項目が表示されない場合は、設定を確認しましょう。

Advanced Editor Toolsの「設定」を開きます。

「ブロックエディターツールバー」
段落ブロックなどのツールバーに反映されます。

「ブロックツールバーで不使用のボタン」にコード「< >」が入っていた場合は、以下のようにドラックしてツールバーに追加します。

Advanced Editor Tools

「クラシックブロックのツールバー」
クラシックブロックのツールバーに反映されます。
クラシックブロックには、「フォーマット」にコード用の項目が入っているので必要ありませんが、以下のようにドラックすると「<>コード」のアイコンを加えることができます。

「< >ソースコード」の方を使うと上手く機能しませんでした。

Advanced Editor Tools

クラシックエディターでhtmlソースコードをそのまま表示

クラシックエディターの場合です。(クラシックブロックではありません)

エディター標準の「code」だけではできない

テキストモードの場合、以下のようにツールバーに「code」ボタンがあります。
(※「ビジュアルモード」では「code」ボタンはありません)

HTMLコードを選択して「code」ボタンを押します。

テキストエディター

すると、このようになります。

テキストエディター

プレビューで確認すると、HTMLコードは表示されず、太字になり、背景色がついています。

テキストエディタ

<strong>テキスト</strong>の部分は、
&lt;strong&gt;テキスト&lt;/strong&gt;と記載すると、HTMLコードがそのまま表示されますが、ちょっと面倒です。

そこで、Advanced Editor Toolsをインストールして、「ビジュアルモード」を使うとブロックエディターの時と同じようにできます。
※「テキストモード」でもやってみましたができませんでした。

タイトルとURLをコピーしました