ワードプレスのサイトでソースコードを表示させるための方法を知っておくと、読者に向けてソースコードを紹介するようなコンテンツを作ることができます。
ワードプレスに直接ソースコードを打ち込んでも、色も変わらず行数も表示されないのでかなり見にくくなってしまうのが難点です。
そこで、記事内のソースコードを見やすくするためのプラグインに「Highlighting Code Block」があります。
プラグインはいろいろと種類がありますが、「Highlighting Code Block」は使いやすいのでおすすめです。
今回は、ワードプレスでソースコードを表示させる方法やおすすめのプラグイン「Highlighting Code Block」について紹介しますので是非参考にしてみてください。
ワードプレスでソースコードを貼り付けるとどうなる?
![](https://web-hero-japan.com/blog/wp-content/uploads/2024/01/code-1785541_640.jpg)
ワードプレスのビジュアルエディターでソースコードを直接記述してみても、うまく表示されません。
一部表示されて他は消えてしまったり、バグっているかのように表示されてしまうことも。
これは、ワードプレスがソースコードを機能させてしまっているからです。
しかし、ソースコードを機能させず文字列として表示させたい場合もありますよね。
コードとして機能しないように、さらにキレイなデザインで表示させることができれば、コードをコピーしてそのまま使いたいユーザーにとってはかなりありがたいです。
本来の目的ではなく、「コードとしてそのまま表示」させるためには、特別な方法が必要になります。
ソースコードを表示するプラグイン「Highlighting Code Block」とは?
![](https://web-hero-japan.com/blog/wp-content/uploads/2024/01/codeblock-1024x339.jpg)
ワードプレスでソースコードを表示させる方法はいくつかありますが、おすすめなのは「Highlighting Code Block」というプラグインを使うことです。
「Highlighting Code Block」の特徴を説明します。
- ブロックエディターとクラシックエディターの両方に対応している
- コードに色がついて見やすい
- 行数を表示できる
- コピーボタンの表示も可能
- 言語名表示も可能
- コードブロックのスタイルを2タイプから選べる
- フォントサイズを選べる
他にもプラグインはありますが、「Highlighting Code Block」は現在でも更新されていてとても使いやすいプラグインなので是非試してみることをおすすめします。
「Highlighting Code Block」の使い方
![使い方](https://web-hero-japan.com/blog/wp-content/uploads/2023/03/25982649_s.jpg)
「Highlighting Code Block」の使い方についての流れを説明します。
まずは、「Highlighting Code Block」のプラグインをプラグインの「新規追加」からインストールします。
プラグインをインストールしたら、有効化して使えるようにしましょう。
プラグインを有効化したら、記事作成画面に移動します。
ソースコードを表示させたいブロックで「テキスト」内の「Highlighting Code Block」を選択します。
「Highlighting Code Block」のブロックが追加されたら、そこにソースコードやプログラミング言語を入力しましょう。
すると、ファイル名や行数が表示され、ソースコードがカラーリングされます。
これで、ソースコードを表示させることができるようになります。
「Highlighting Code Block」の設定方法
![設定](https://web-hero-japan.com/blog/wp-content/uploads/2023/03/4089343_s.jpg)
「Highlighting Code Block」は、ただ入力するだけでなく設定を変えることもできます。
まず、ワードプレスのメニューから設定⇒HCB設定を選択しましょう。
設定ページが開いたら、設定できる項目をチェックします。
- 言語の表示
- 行数の表示設定
- コピーボタン
- フォントスムージング
- コードカラー
- コードカラーリング
- フォントサイズ
- コードのfront-family
- 使用する言語セット
- 使用する言語セット
- 独自カラーリングファイル
- 独自prism.js
これらの設定が可能です。
項目名 | 概要 |
---|---|
言語の表示 | サイト表示側のコードに言語の種類が表示させるか選択できます |
行数の表示設定 | サイト表示側のコードの左端に行数が表示させるか選択できます |
コピーボタン | コードブロックにコピーボタンを表示するか選択できます |
フォントスムージング | チェックするとコードブロックに「 -webkit-font-smoothing: antialiased; 」と「 -moz-osx-font-smoothing: grayscale; 」が追加されます。 |
コードカラーリング(フロント側) | ライトモード・ダークモードの切り替えが出来ます |
コードカラーリング(エディター側) | ライトモード・ダークモードの切り替えが出来ます |
フォントサイズ(PC) | PCで閲覧した時のフォントサイズを設定できます |
フォントサイズ(SP) | スマホで閲覧した時のフォントサイズを設定できます |
コードの “font-family” | ソースコードのフォントを設定できます |
使用する言語セット | コードに使うプログラミング言語を編集できます。 「クラスキー:”言語名”」 の形式で、”,”(カンマ)区切りで記述しましょう。「クラスキー」は、prism.jsで使用されるクラス名(「lang-◯◯」の「◯◯」に該当する部分)です。デフォルトでサポートされていない言語を使用する場合、「独自prism.js」設定と併用してください。 |
独自カラーリングファイル | 自分で用意した用意したコードカラーリング用のCSSファイルを指定すると読み込んでくれます |
独自prism.js | 自分専用の言語セットに対応したprism.jsファイルを使用できます |
設定を変更したら、「設定を保存」ボタンを押して変更内容を保存します。
たくさんの設定項目がありますが、よく使うのは「コードカラーリング」と「フォントサイズ」ではないでしょうか。
自分の使いやすいように設定してカスタマイズしてみてくださいね。
ワードプレスでソースコードを表示させる方法
![](https://web-hero-japan.com/blog/wp-content/uploads/2024/01/programming-2695198_640.jpg)
「Highlighting Code Block」のプラグインを入れれば簡単にソースコードを表示させることができますが、他にも方法はいろいろあります。
どんな方法があるのかについて見ていきましょう。
- コードブロックを追加する
- エンコーダを使用する
- ショートコードを使用する
それぞれについて説明していきますね。
1.コードブロックを追加する
ワードプレスのブロックエディターでは、コードブロックが組み込まれているので、コードのフォーマットを崩さず、さらにコードを有効にせずにそのまま表示させることができます。
ブロックの検索バーに「コード」とキーワードを入れると「Code」が表示されるのでアイコンをクリックしましょう。
フィールドに「コードを入力」と表示されるので、自分の表示させたいコードを入力します。
そのままではコードを表示されていませんが、公開をしてプレビューすればコードが表示されるようになっています
2.エンコーダを使用する
エンコーダは、そこまで頻繁にコードを表示することがない場合にお勧めの方法です。
特殊文字やタブを含むコードの整合性を維持するもので色々なコードをワードプレスに貼り付けられるように変換してくれます。
- W3Docs HTMLエンコーダ
- Opinionated Geek HTMLエンコーダ
- Web2Generators HTMLエンコーダ/デコーダ
エンコーダのウェブサイトにアクセスし、ボックスにコードを貼り付けましょう。
すると、ワードプレスにそのままコピペできるバージョンが出力されるので、貼り付けて使用できます。
3.ショートコードを使う
ショートコードを使用すると、複雑なコードを保存してけば何度でも使える、毎回長いコードを入力しなくてもよくなるなどのメリットがあります。
また、コードのハイライトのボックススタイルを設定したりもできます。
また、ショートコードは誰でも利用できるので、他の投稿者であってもボタンをクリックするだけでOKです。
他にも、タグを使ったりすることもできます。
WordPress(ワードプレス)のソースコードを表示させるプラグイン「Highlighting Code Block」を紹介!まとめ
![まとめ](https://web-hero-japan.com/blog/wp-content/uploads/2023/05/25468871_s.jpg)
ワードプレスのソースコードを表示させるプラグインについても紹介しました。
- ワードプレスでソースコードを表示させたいなら、そのまま入力してはだめ!
- 「Highlighting Code Block」というプラグインを使うのが便利
- その他にもソースコードを表示させる方法はあるけど、結構面倒
- 結局コードを一から打つのはかなり不便
ワードプレスでソースコードを表示させるには、便利なプラグイン「Highlighting Code Block」を使ってみましょう。
コードを実行させず、そのまま置いておくためには直接入力はおすすめしません。
プラグインを使えば簡単に操作できるようになるので、是非チェックしてみてくださいね。
![](https://web-hero-japan.com/blog/wp-content/uploads/2022/10/webhero_logo_new.png)
ホームページを今より活用して集客に繋げたい方、
WEBマーケティングを展開してきたい方はWebHEROにお任せください!
ホームページを活用して、もっと売上アップしたい…!
そう考えているあなたは、こんなお悩みをお持ちではないでしょうか?
そのお悩み、WebHEROにお任せください!
WEBマーケティングにおける重要なポジションを担っている「ホームぺージ」を
優秀なWEBマーケターの視点をいれて制作をさせていただきます!
まずは無料相談!
いつでもお気軽にご相談ください!