WordPressの記事内にソースコードを表示する手順【プラグインなし】

こんにちは！KEN（@KEN_kenblog）です！

「記事内でソースコードを紹介したいのですが、コードを書き込むと文字列ではなくアイコンに化けてしまいます。どうすれば文字列だけ表示させることができるのでしょうか？」

そんな疑問にお答えします。

本記事の内容

本記事の内容↓

WordPressの記事内にソースコードを表示させる手順【プラグインなし】

本記事のように、コードを公開し技術的な説明を記事内で行いたいときに文字列としてコードを紹介したい時ってありませんか？

しかし、コードによっては記事内に直接書き込むとアイコンが表示されることもあります。

試しに吹き出しのソースコードを書いてみましたが、普通に書くとこんな感じでアイコンが表示されてしまいます。

テスト。テスト。テスト。

しかし、元からWordPressに備わっている機能「成形済みテキスト」を使えば…

[voice icon="https://www.diamond-start.com/wp-content/uploads/2020/06/2f894e9b49d09382ea8beee4d352f415.jpg" name="KEN" type="l"]テスト。テスト。テスト[/voice]

こんな感じで文字列だけを表示させることができます(。-`ω-)

本記事の方法をマスターすればどんなコードでも文字列で表示させることができます。

しかもプラグイン無しで実装可能なので、プラグインの影響でサイトスピードが落ちることもありません。

手順も超簡単です。

素人でも3分で実装できてしまいますよ。

手順は下記の通り。

では、解説していきます。

ソースコードを記事内に表示する手順

こちらでは、ソースコードを記事内に表示する手順を解説していきます。

コードをコピーする

表示させたいコードを右クリックからコピーします。

成形済みテキストを使う

ソースコードを記事内に貼るためには、WordPressに搭載されている機能、「成形済みテキスト」を使用します。

場所が分かりずらいのですが、記事作成時のエディター内「段落」をクリック。

見出し一覧の下に「成形済みテキスト」があるのでクリック。

すると下記のようなコード用の枠が出来上がります。

コードを貼りつけ、[ ]で挟む

枠内にコードを貼り付けます。

次にコードを[ ]で挟み込みます。

見本を用意しました。

下記画像をご覧ください↓

このように記述しましょう。

成功すると、

[voice icon="https://www.diamond-start.com/wp-content/uploads/2020/06/2f894e9b49d09382ea8beee4d352f415.jpg" name="KEN" type="l"]ここにセリフを書く。[/voice]

これでOK。

失敗すると枠内にアイコンが表示され、こうなります↓

ここにセリフを書く。

超絶簡単ですね。

以上で説明はおしまいです。

まったねー(´・ω・｀)