こんにちは!千明です。
今回は、ワードプレスでソースコードを記事に表示させる方法についてです。
初めてカスタマイズ記事を書いたのだけど、ソースコードを記事内に表示させるのにとても苦労しました。特に、HTMLの記事だったので、HTMLってそのままじゃ表示できないのですよね。
かなり苦労して調べた結果、Cocoonテーマにある機能と無料ツールを使って、プラグインなしで表示させられたので、やり方をご紹介しますね。
やり方さえわかれば、簡単でしたよ!
ワードプレスでソースコードを記事に表示させる
HTMLがどうしてもうまく表示されず、やっとできたので備忘録的記事です。正解にたどり着くまで何時間もかかっちゃいました。

HTMLがどうしてもうまく表示されず、やっとできたので備忘録的記事です。正解にたどり着くまで何時間もかかっちゃいました。
ワードプレスでソースコードを表示するには、コードをpreタグで囲むことが必要です。また、HTMLコードはこれだけでなく、エスケープすることも必要です。
今回は、CocoonテーマでHTMLを記事内に表示するために上記のことをやりました。
CSSなどなら、エスケープはしなくてもいいので、前半だけで行けるはずです。
ソースコードを表示させるプラグイン
ワードプレスで記事内にソースコードを表示させるには、専用の便利なプラグインがあります。
調べると、一番人気がCrayon Syntax Highlighterですね。
とにかく表示がきれいで、設定も簡単、ということで、使うならこれかな?と思いました。
でも、ソースコードを頻繁に書くわけではないので、そのためにプラグインをインストールするのは避けたいのですよね。
サイトが重くなるので、極力プラグインは使いたくないのです。



Cocoonの機能を使えば、プラグインなしでも表示できましたよ。さすが、Cocoon!
というわけで、Cocoonの機能を使ってHTML表示をした方法になります。
ソースコードを表示する
今回、初めてこのような「囲み枠」の記事を書くことになりました。



ワードプレスの記事内でソースコードを表示する時、そのままブロックエディターに貼ると。。



こうなってしまい、コード表示ができません。まあ、当たり前ですよね。
ソースコードを表示させるには、preタグを使用するのですが、これを手打ちでいちいちやるのはとても面倒だし、間違えそうです。
ワードプレスでは、整形済みテキストという便利な機能があります。これを使うと、自動的に最適にpreタグを入れてくれるのです。
ブロックエディターでは、左上の変換のところに出てきます。


クラシックエディターでは、段落の一番下にあります。



整形済みテキストを使うと、このように自動変換されます。



実際にサイトではこう表示されます。これで、出来上がりですね。



ソースコードらしい表示にする
ソースコードを表示しているサイトにはこのような表示になっていますよね。



この表示にする設定をします。
Cocoon設定>コード へ行きます。



ソースコード設定のハイライト表示にチェックを入れます。



ハイライトのスタイルは山のようにあるので、Vマークを押すといろいろ選べます。
変更をまとめて保存します。



以上の設定をすると、



このように、ソースコードらしく表示されるようになりました。
今のコードは、CSSです。これで一般的にソースコードの表示はできました。
しかし、HTMLはうまくいかないのですよ~。このようになってしまうのです。



HTMLは、上の手順を踏んでも、コードが生きていて「成果物」が表示されてしまうので、コードを無効化する記述~エスケープ~が必要なのです。
HTMLのコードをエスケープする
HTMLをそのまま表示しようとしても、コードが生きているので、成果物になってしまいます。そこで、コードをエスケープする表記に変更することが必要になるのですね。
難しいコードや面倒なことは嫌なので、ツールに頼りましょう。
無料で使えるこちらのツールを使います。HTML Escapeへ
HTML Escapeの使い方
- 左の欄にエスケープしたいHTMLを入力します。
- エスケープを押すと、自動的に右欄にエスケープされたコードが生成されます。



これで生成されたコードを先ほどのように貼り付けると、出来上がります。



これで、目的である、HTMLのコードを表示することができました。
ワードプレスにソースコードを表示する方法のまとめ
ワードプレス記事にソースコードを表示させるには、2つの手順が必要でした。
- ソースコードをpreタグで処理する
これは、ワードプレスの機能「整形済みテキスト」を使用します。 - ソースコードらしく表示する
Cocoon設定からコードの設定をします。
HTMLを表示するには、さらにHTMLEscapeツールを使用して、処理をします。
慣れたらサクサクっと進みました。
参考になると嬉しいです!