WordPressでソースコードをきれいに表示するための必須プラグイン「Highlighting Code Block」
「ソースコードを見やすく表示する方法が分からない」「どうやってソースコードをWordPressに表示・編集すればいいのか知りたい」そんな悩みを抱えていませんか？本記事では、そんな疑問を解決するための具体的な方法を紹介します。
ソースコードを見やすく表示できるだけでなく、ブログの見栄えや読みやすさが向上し、ユーザーに分かりやすい記事を作成できるようになるでしょう。
目次
Highlighting Code Blockとは？
「Highlighting Code Block」とはソースコードを見やすく表示するための専用のプラグインです。
このプラグインは、コードの色分けや行番号の表示など、コードを見やすくする機能が豊富に備わっています。
これにより、ユーザーがコードを理解しやすく、「Highlighting Code Block」の最大の特徴は、簡単にコードを綺麗に表示できる点で、初心者からプロまで幅広く活用されています。
特にプログラミングブログや技術系サイトでは、ユーザーの満足度を大きく向上できます。
インストールはこちらから
Highlighting Code Blockのメリット
対応言語が豊富
「Highlighting Code Block」は多くのプログラミング言語に対応しています。HTML、CSS、JavaScript、PHPなど、Web制作に必要な主要な言語だけでなく、PythonやRubyなどの他の言語もサポートされており、どのプログラミング言語を使用していても、適切にコードを表示できるため、汎用性の高いプラグインとして評価されています。
主要対応言語の一覧
- HTML
- CSS
- JavaScript
- PHP
- Python
- Ruby
- SQL
この幅広い対応言語により、自由に活用できる点が「Highlighting Code Block」の魅力です。
コードに色を追加できる
コードに色を追加することは、単に見た目が良くなるだけでなく、実際にユーザーの理解を助ける効果があります。色分けによって、変数や関数、文字列、コメントが視覚的に区別されるため、特にプログラミング初心者にとっては、コードの構造を理解しやすくなります。
たとえば、以下のようなケースでは、色分けが非常に有効です。
- シンタックスエラーを見つけやすくなる：コードの誤りを視覚的に素早く発見できる。
- コードのロジックが明確になる：関数や変数の区別がしやすく、ロジックが見やすい。
色分けのメリットは、コードの読みやすさの向上とエラーの発見スピードを上げることにあり、特に複雑なプログラムを書く際には欠かせない機能です。
Highlighting Code Blockのインストール方法
「Highlighting Code Block」の導入は非常に簡単で、WordPress初心者でも短時間で設定できます。まず、WordPressの管理画面にログインし、次の手順を行います。
1. プラグインの検索
管理画面左側の「プラグイン」セクションに移動し、「新規プラグインを追加」をクリックします。
検索ボックスに「Highlighting Code Block」と入力し、該当するプラグインを探します。
2. インストール
検索結果に表示された「Highlighting Code Block」を確認し、「今すぐインストール」をクリックします。
3. 有効化
インストールが完了したら、「有効化」ボタンを押してプラグインを有効にします。これでプラグインのインストールは完了です。
初心者でも簡単にインストールでき、他の複雑な設定は必要ありません。
Highlighting Code Blockの設定方法
プラグインをインストールした後は、基本的な設定を行う必要があります。設定画面にアクセスするためには、以下の手順を行ってください。
1. 設定画面へのアクセス
管理画面の「設定」タブから「Highlighting Code Block」を選択します。
2. テーマの選択
コード表示のデザインを変更できる「テーマ」が複数用意されています。表示したいデザインに応じて、適切なテーマを選択してください。例えば、ダークモードやライトモードなど、好みに合わせて選択できます。
3. 対応言語の設定
「Highlighting Code Block」は多くのプログラミング言語に対応しているため、表示させたい言語を設定します。デフォルトで主要な言語（HTML、CSS、JavaScriptなど）は有効になっているため、特定の言語だけ表示させたい場合は必要な設定を行ってください。
4. 行番号表示の有効化
コードの読みやすくするために、行番号を表示することが推奨されています。設定画面で「行番号の表示」を有効にすると、コードが複数行に渡る場合でも、読みやすさくなります。
5. コピーボタンの設定
プログラムコードを簡単にコピーできる「コピーボタン」の表示を有効にすることもできます。特に技術ブログを運営している場合、ユーザーがコードを簡単にコピーして使用できるため、この機能は非常に便利です。
これらの設定を完了することで、プラグインが最適な状態で動作し、コードの読みやすさと使いやすさが向上します。
Highlighting Code Blockの使い方
「Highlighting Code Block」を使って、WordPressの記事内にソースコードを表示する方法は非常に簡単です。特に、プログラミングに不慣れなユーザーでも簡単に操作できる仕様が魅力です。手順に沿って設定を行うことで、見やすいソースコードを表示できます。
1. 「Highlighting Code Block」を選択
投稿編集画面で「+」ボタンを押し、「Highlighting Code Block」を検索。
「Highlighting Code Block」を選択してください。
2. ソースコードやプログラミング言語を入力する
「Highlighting Code Block」のブロックが追加されるのでソースコードやプログラミング言語を入力してください。
これでソースコードをきれいに表示させることができます。
編集画面ではコードカラーリングや行数表示、コピーボタンなどが表示されていませんがプレビュー画面で確認すると以下の画像のようにしっかりと表示されています。
まとめ
今回は、WordPressでソースコードを表示するプラグイン「Highlighting Code Block」を紹介しました。
コードを見やすく表示することは、ユーザーの利便性を高め、サイトのアクセス数を向上させます。さらに詳しく学びたい方は、WithCodeの無料カウンセリングをぜひご利用ください。
WithCodeを体験できる初級コース公開中！
初級コース(¥49,800)が完全無料に！
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
↓
