WordPressでソースコードをそのまま表示させる方法

WordPressの記事内にソースコードをそのまま表示させる方法

WordPressでソースコードをそのまま表示させる方法をまとめておきます。

目次

ブロックエディター

ブロックエディターの場合は、コードブロック及びインラインコードで表示させることができます。

コードブロック

コードブロックを追加して、表示させたいソースコードをそのまま入力します。

コードブロック

入力したソースコードは、preタグとcodeタグで囲まれます。

ブロック単位の記述になりますが、登録済みのショートコードを表示させることもできます。

インラインコード

段落ブロックでソースコードを表示させたい時は、ソースコードを選択して、ツールバーの「さらにブロックツールを表示」のメニューから、「<>インラインコード」を選択します。

インラインコード

選択したソースコードは、codeタグで囲まれます。

但し、この方法は登録済みのショートコードをそのまま表示させることはできません。登録済みのショートコードを表示させたい時は、ショートコード全体を[]で囲んで下さい。

クラシックエディター

クラシックエディターでソースコードを表示させたい時は、プラグインの導入をおすすめします。

ビジュアルエディターでソースコードをそのまま入力すると、「"」が全角の「”」に変換されてしまいますし、テキストエディターでは特殊文字を文字実態参照に置き換えて入力する必要があるからです。

そのままでは、ブロックエディターの様にシンプルにソースコードを表示させることができません。

表示 文字実態参照
< &gt;
> &lt;
' &apos;
" &quot;
& &amp;

個人的にはUrvanov Syntax HighlighterHighlighting Code Blockがおすすめですが、プラグインを追加したくない方は、特殊文字変換ツールを使ってテキストエディターに貼り付ける方法も検討してみて下さい。

HTML特殊文字変換|Tech-Unlimited

あわせて読みたい
Urvanov Syntax Highlighterの設定と使い方:記事中にソースコードを表示 プラグインUrvanov Syntax Highlighter(旧Crayon Syntax Highlighter)の設定と使い方をまとめておきます。 このプラグインを使うと、記事中にソースコードを表示させ...

最後に

WordPressの記事にHTMLやCSSのソースコードをそのまま表示させたい時は、ブロックエディターのコードブロック及び段落のインラインコードを使ってみて下さい。

ただ、プラグインを使った方が綺麗に表示させることができるので、ソースコードを表示させる機会が多い方や、解説記事を書いている方は、プラグインの導入をおすすめします。

スポンサーリンク
スポンサーリンク

スポンサーリンク

関連コンテンツ

コメント

コメントする

目次