こんにちは！千明です。
今回は、ワードプレスでソースコードを記事に表示させる方法についてです。
初めてカスタマイズ記事を書いたのだけど、ソースコードを記事内に表示させるのにとても苦労しました。特に、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ツールを使用して、処理をします。
慣れたらサクサクっと進みました。
参考になると嬉しいです！
