ワードプレス記事中にHTMLのソースコードを表示!プラグイン無しで。

こんにちは!千明です。

今回は、ワードプレスでソースコードを記事に表示させる方法についてです。

初めてカスタマイズ記事を書いたのだけど、ソースコードを記事内に表示させるのにとても苦労しました。特に、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の使い方

  1. 左の欄にエスケープしたいHTMLを入力します。
  2. エスケープを押すと、自動的に右欄にエスケープされたコードが生成されます。
HTMLのコードをエスケープする

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

ワードプレスにソースコードを表示する

これで、目的である、HTMLのコードを表示することができました。

ワードプレスにソースコードを表示する方法のまとめ

ワードプレス記事にソースコードを表示させるには、2つの手順が必要でした。

  1. ソースコードをpreタグで処理する
     これは、ワードプレスの機能「整形済みテキスト」を使用します。
  2. ソースコードらしく表示する
     Cocoon設定からコードの設定をします。

HTMLを表示するには、さらにHTMLEscapeツールを使用して、処理をします。

慣れたらサクサクっと進みました。

参考になると嬉しいです!

タイトルとURLをコピーしました