WordPress（ワードプレス）のソースコードを表示させるプラグイン「Highlighting Code Block」を紹介！

ワードプレスのサイトでソースコードを表示させるための方法を知っておくと、読者に向けてソースコードを紹介するようなコンテンツを作ることができます。

ワードプレスに直接ソースコードを打ち込んでも、色も変わらず行数も表示されないのでかなり見にくくなってしまうのが難点です。

そこで、記事内のソースコードを見やすくするためのプラグインに「Highlighting Code Block」があります。

プラグインはいろいろと種類がありますが、「Highlighting Code Block」は使いやすいのでおすすめです。

今回は、ワードプレスでソースコードを表示させる方法やおすすめのプラグイン「Highlighting Code Block」について紹介しますので是非参考にしてみてください。

ワードプレスでソースコードを貼り付けるとどうなる？

ワードプレスのビジュアルエディターでソースコードを直接記述してみても、うまく表示されません。

一部表示されて他は消えてしまったり、バグっているかのように表示されてしまうことも。

これは、ワードプレスがソースコードを機能させてしまっているからです。

しかし、ソースコードを機能させず文字列として表示させたい場合もありますよね。

コードとして機能しないように、さらにキレイなデザインで表示させることができれば、コードをコピーしてそのまま使いたいユーザーにとってはかなりありがたいです。

本来の目的ではなく、「コードとしてそのまま表示」させるためには、特別な方法が必要になります。

ソースコードを表示するプラグイン「Highlighting Code Block」とは？

ワードプレスでソースコードを表示させる方法はいくつかありますが、おすすめなのは「Highlighting Code Block」というプラグインを使うことです。

「Highlighting Code Block」の特徴を説明します。

他にもプラグインはありますが、「Highlighting Code Block」は現在でも更新されていてとても使いやすいプラグインなので是非試してみることをおすすめします。

「Highlighting Code Block」の使い方

「Highlighting Code Block」の使い方についての流れを説明します。

これで、ソースコードを表示させることができるようになります。

「Highlighting Code Block」の設定方法

「Highlighting Code Block」は、ただ入力するだけでなく設定を変えることもできます。

まず、ワードプレスのメニューから設定⇒HCB設定を選択しましょう。

※HCBは「Highlighting Code Block」の略です。

設定ページが開いたら、設定できる項目をチェックします。

これらの設定が可能です。

項目名	概要
言語の表示	サイト表示側のコードに言語の種類が表示させるか選択できます
行数の表示設定	サイト表示側のコードの左端に行数が表示させるか選択できます
コピーボタン	コードブロックにコピーボタンを表示するか選択できます
フォントスムージング	チェックするとコードブロックに「 -webkit-font-smoothing: antialiased; 」と「 -moz-osx-font-smoothing: grayscale; 」が追加されます。
コードカラーリング（フロント側）	ライトモード・ダークモードの切り替えが出来ます
コードカラーリング（エディター側）	ライトモード・ダークモードの切り替えが出来ます
フォントサイズ(PC)	PCで閲覧した時のフォントサイズを設定できます
フォントサイズ(SP)	スマホで閲覧した時のフォントサイズを設定できます
コードの “font-family”	ソースコードのフォントを設定できます
使用する言語セット	コードに使うプログラミング言語を編集できます。 「クラスキー:”言語名”」 の形式で、”,”（カンマ）区切りで記述しましょう。「クラスキー」は、prism.jsで使用されるクラス名（「lang-◯◯」の「◯◯」に該当する部分)です。デフォルトでサポートされていない言語を使用する場合、「独自prism.js」設定と併用してください。
独自カラーリングファイル	自分で用意した用意したコードカラーリング用のCSSファイルを指定すると読み込んでくれます
独自prism.js	自分専用の言語セットに対応したprism.jsファイルを使用できます

設定を変更したら、「設定を保存」ボタンを押して変更内容を保存します。

たくさんの設定項目がありますが、よく使うのは「コードカラーリング」と「フォントサイズ」ではないでしょうか。

自分の使いやすいように設定してカスタマイズしてみてくださいね。

ワードプレスでソースコードを表示させる方法

「Highlighting Code Block」のプラグインを入れれば簡単にソースコードを表示させることができますが、他にも方法はいろいろあります。

どんな方法があるのかについて見ていきましょう。

それぞれについて説明していきますね。

1.コードブロックを追加する

ワードプレスのブロックエディターでは、コードブロックが組み込まれているので、コードのフォーマットを崩さず、さらにコードを有効にせずにそのまま表示させることができます。

ブロックの検索バーに「コード」とキーワードを入れると「Code」が表示されるのでアイコンをクリックしましょう。

フィールドに「コードを入力」と表示されるので、自分の表示させたいコードを入力します。

そのままではコードを表示されていませんが、公開をしてプレビューすればコードが表示されるようになっています

コードブロックは、カスタムHTMLとどのように使い分けたらいいのか分からない人もいますが、カスタムHTMLはフロントエンドでレンダリングするHTMLを追加するためのもので、コードを表示させるものではありません。

2.エンコーダを使用する

エンコーダは、そこまで頻繁にコードを表示することがない場合にお勧めの方法です。

特殊文字やタブを含むコードの整合性を維持するもので色々なコードをワードプレスに貼り付けられるように変換してくれます。

エンコーダのウェブサイトにアクセスし、ボックスにコードを貼り付けましょう。

すると、ワードプレスにそのままコピペできるバージョンが出力されるので、貼り付けて使用できます。

3.ショートコードを使う

ショートコードを使用すると、複雑なコードを保存してけば何度でも使える、毎回長いコードを入力しなくてもよくなるなどのメリットがあります。

また、コードのハイライトのボックススタイルを設定したりもできます。

また、ショートコードは誰でも利用できるので、他の投稿者であってもボタンをクリックするだけでOKです。

ショートコードの作成には、ワードプレステーマファイルの編集やPHPコードの操作、プラグインの作成経験が必要になります。
初心者には難易度が高いです。

他にも、タグを使ったりすることもできます。

WordPress（ワードプレス）のソースコードを表示させるプラグイン「Highlighting Code Block」を紹介！まとめ

ワードプレスのソースコードを表示させるプラグインについても紹介しました。

ワードプレスでソースコードを表示させるには、便利なプラグイン「Highlighting Code Block」を使ってみましょう。

コードを実行させず、そのまま置いておくためには直接入力はおすすめしません。

プラグインを使えば簡単に操作できるようになるので、是非チェックしてみてくださいね。