WordPressでソースコードをそのまま表示させる方法をまとめておきます。
ブロックエディター
ブロックエディターの場合は、コードブロック及びインラインコードで表示させることができます。
コードブロック
コードブロックを追加して、表示させたいソースコードをそのまま入力します。
入力したソースコードは、preタグとcodeタグで囲まれます。
|
1 |
<pre class="wp-block-code"><code>ソースコード</code></pre> |
ブロック単位の記述になりますが、登録済みのショートコードを表示させることもできます。
インラインコード
段落ブロックでソースコードを表示させたい時は、ソースコードを選択して、ツールバーの「さらにブロックツールを表示」のメニューから、「<>インラインコード」を選択します。
選択したソースコードは、codeタグで囲まれます。
|
1 |
<code>ソースコード</code> |
但し、この方法は登録済みのショートコードをそのまま表示させることはできません。登録済みのショートコードを表示させたい時は、ショートコード全体を[]で囲んで下さい。
クラシックエディター
クラシックエディターでソースコードを表示させたい時は、プラグインの導入をおすすめします。
ビジュアルエディターでソースコードをそのまま入力すると、「"」が全角の「”」に変換されてしまいますし、テキストエディターでは特殊文字を文字実態参照に置き換えて入力する必要があるからです。
そのままでは、ブロックエディターの様にシンプルにソースコードを表示させることができません。
| 表示 | 文字実態参照 |
|---|---|
| < | > |
| > | < |
| ' | ' |
| " | " |
| & | & |
個人的にはUrvanov Syntax HighlighterやHighlighting Code Blockがおすすめですが、プラグインを追加したくない方は、特殊文字変換ツールを使ってテキストエディターに貼り付ける方法も検討してみて下さい。
最後に
WordPressの記事にHTMLやCSSのソースコードをそのまま表示させたい時は、ブロックエディターのコードブロック及び段落のインラインコードを使ってみて下さい。
ただ、プラグインを使った方が綺麗に表示させることができるので、ソースコードを表示させる機会が多い方や、解説記事を書いている方は、プラグインの導入をおすすめします。
コメント