WordPress(ワードプレス)で、記事の中にhtmlソースコードをそのまま表示する方法をご紹介します。
文章の中の一部分で、テキストとテキストの間にコードを表示する方法です。
ブロックエディターではWordPress標準のテキストエディタでできます。
クラシックエディターでは、プラグイン「Advanced Editor Tools」を使うとできます。
簡単にできますが、少し分かりにくかったので、まとめてみました。
テーマやエディター機能追加プラグインなどによって異なる場合があります。
![](https://tsutchii.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
ブロックエディタ―でhtmlソースコードをそのまま表示
ブロックエディターでは、「コードブロック」を使えば、htmlソースコードをそのまま表示できます。
![コードエディター](https://tsutchii.com/wp-content/uploads/2021/05/code-editor.jpg)
しかし、ブロック単位での記述となるので、文章中の一部分だけをhtmlソースコード表示することはできません。
ここでは、文章中のコードをそのまま表示する方法を紹介します。
段落ブロックを使う
テキストの中にある<strong>テキスト</strong>
というHTMLコードをそのまま表示させます。
以下のように段落ブロックに入力します。
![ブロックエディター](https://tsutchii.com/wp-content/uploads/2021/05/block01.jpg)
以下のようにHTMLコードを選択します。
![ブロックエディター](https://tsutchii.com/wp-content/uploads/2021/05/block02.jpg)
そして、ツールバー右側(下向きの三角)をクリックして「インラインコード」を選択します。
![ブロックエディター](https://tsutchii.com/wp-content/uploads/2021/05/block03a.jpg)
すると、以下のようになります。
![ブロックエディター](https://tsutchii.com/wp-content/uploads/2021/05/block04a1.jpg)
プレビューで確認すると、このようになります。
コードを見ると、<code>と</code>
で囲まれています。
※テーマによって背景がグレーにならない場合もあるようです。
私が試したテーマでは、以下のようにSnowmonkeyはグレーになり、CocoonとTwenty Nineteenではグレーになりませんでした。
※当サイトはCocoonを使用していますが、段落ブロックツールバーの「マーク」で背景を付けています。
![ブロックエディター](https://tsutchii.com/wp-content/uploads/2021/05/block05.jpg)
クラシックブロックを使う(Advanced Editor Tools使用)
クラシックブロックを挿入します。
![クラシックエディター](https://tsutchii.com/wp-content/uploads/2021/05/classic02.jpg)
クラシックブロックは標準で以下のようになっています。
コード挿入用の項目はありません。
![クラシックエディター](https://tsutchii.com/wp-content/uploads/2021/05/classic03.jpg)
エディター機能拡張プラグイン「Advanced Editor Tools」をインストールします。(挿入方法は省略)
![Advanced Editor Tools](https://tsutchii.com/wp-content/uploads/2021/05/ade-editor.jpg)
ツールバーが以下のようになり、項目が増えました。
![クラシックエディター](https://tsutchii.com/wp-content/uploads/2021/05/classic04.jpg)
HTMLコードの部分を選択します。
![クラシックエディター](https://tsutchii.com/wp-content/uploads/2021/05/classic05.jpg)
ツールバーの「フォーマット」 をクリック
![クラシックエディター](https://tsutchii.com/wp-content/uploads/2021/05/classic06.jpg)
開いたメニューから「コード」を選択
![クラシックエディター](https://tsutchii.com/wp-content/uploads/2021/05/classic07.jpg)
以下のようになります。
![クラシックエディター](https://tsutchii.com/wp-content/uploads/2021/05/classic08.jpg)
プレビューで確認するとこのように表示されます。
![テキストエディター](https://tsutchii.com/wp-content/uploads/2021/05/text04.jpg)
Advanced Editor Toolsを入れて「code」の項目が表示されない場合
プラグインを入れても「code」の項目が表示されない場合は、設定を確認しましょう。
Advanced Editor Toolsの「設定」を開きます。
「ブロックエディターツールバー」
段落ブロックなどのツールバーに反映されます。
「ブロックツールバーで不使用のボタン」にコード「< >」が入っていた場合は、以下のようにドラックしてツールバーに追加します。
![Advanced Editor Tools](https://tsutchii.com/wp-content/uploads/2021/05/Advanced-Editor-Tools01.jpg)
「クラシックブロックのツールバー」
クラシックブロックのツールバーに反映されます。
クラシックブロックには、「フォーマット」にコード用の項目が入っているので必要ありませんが、以下のようにドラックすると「<>コード」のアイコンを加えることができます。
「< >ソースコード」の方を使うと上手く機能しませんでした。
![Advanced Editor Tools](https://tsutchii.com/wp-content/uploads/2021/05/Advanced-Editor-Tools02.jpg)
クラシックエディターでhtmlソースコードをそのまま表示
クラシックエディターの場合です。(クラシックブロックではありません)
エディター標準の「code」だけではできない
テキストモードの場合、以下のようにツールバーに「code」ボタンがあります。
(※「ビジュアルモード」では「code」ボタンはありません)
HTMLコードを選択して「code」ボタンを押します。
![テキストエディター](https://tsutchii.com/wp-content/uploads/2021/05/text02a.jpg)
すると、このようになります。
![テキストエディター](https://tsutchii.com/wp-content/uploads/2021/05/text03.jpg)
プレビューで確認すると、HTMLコードは表示されず、太字になり、背景色がついています。
![テキストエディタ](https://tsutchii.com/wp-content/uploads/2021/05/text11.jpg)
<strong>テキスト</strong>
の部分は、<strong>テキスト</strong>
と記載すると、HTMLコードがそのまま表示されますが、ちょっと面倒です。
そこで、Advanced Editor Toolsをインストールして、「ビジュアルモード」を使うとブロックエディターの時と同じようにできます。
※「テキストモード」でもやってみましたができませんでした。