【WordPress】WordPressでコーディング記事を書く！おすすめのプラグイン3選

WordPressでコーディング記事を書く！おすすめのプラグイン3選 WordPress

こんにちは！さこちゃんです。

今回の記事は「WordPressでコーディング記事を書く上でのおすすめのプラグイン」についてです。

ブログでコーディング記事を書く時、こんなお悩みありませんか？

  • プログラムコードを載せたら、フォントがバラバラになって見づらい…
  • 行番号がないから、記事で説明しづらい…
  • スマホだと横にはみ出して読みにくい…

こういった悩み、プログラミング系のブログを始めた方なら、一度は経験があるのではないでしょうか？

そこで今回は、ブログでコードをキレイに、読みやすく表示する方法とプラグインを紹介します！

プラグインのインストール方法

プラグインのインストールは以下の3ステップで簡単にできます。

  • WordPressの管理画面から「プラグイン」→「新規追加」
  • 「Highlighting Code Block」で検索してインストール
  • 有効化すると、ブロックエディタに「コードブロック」が追加されます

さこちゃんはビジュアルエディターで記事を書いており、「/code」というショートカットを使用してコードブロックを表示させています。

記事を書く上で作業効率化になりますので、ぜひ参考にしてみてくださいね。

それではさっそくおすすめプラグインを紹介してきます。

Highlighting Code Block

ブログにコードを書く方法として、WordPressユーザーに一番おすすめなのが「Highlighting Code Block（略してHCB）」です。

Gutenberg（ブロックエディター）との相性が良く、初心者でも直感的に使える点が魅力です。

  • Prism.js を使った美しいシンタックスハイライト
  • 行番号表示（ON/OFF可能）
  • コピーボタン機能（ワンクリックでコピー）
  • ダーク／ライトテーマに対応
  • 特定行のハイライトにも対応（例：highlight="3,5-7"）
  • クラシックエディターにも対応
  • 日本語対応＆設定画面がわかりやすい

最大の魅力は、軽量な Prism.js を使っているため、ページの表示速度も気にならないこと。

ブログを運営する上では超大事なポイントですよね。

さこちゃん
さこちゃん

実はこのブログでも Highlighting Code Block を使用しています。

以下の注意点もあわせて確認しておきましょう。

  • デフォルト設定だとテーマと色味が合わない場合あり → CSS調整可能
  • モバイル表示で横スクロールが必要な場合がある → スマホ表示も要確認

Code Syntax Highlighting Block

Code Syntax Highlighting Block は、非常に多くの言語とテーマに対応した WordPress 用プラグインです。

表示は静的HTMLでレンダリングされるため、軽量で表示速度も速く、SEO的にも有利です。

  • 192言語に対応（Markdown、YAML、C++, Swift など幅広くカバー）
  • 256種類のテーマ（Visual Studio風、Monokai、GitHubなど）
  • Gutenbergブロックで簡単に挿入できる
  • サーバーサイドでコードを HTML に変換 → JSなしでも色がつく
  • コピーボタン機能あり

以下の注意点もあわせて確認しておきましょう。

  • 編集画面ではハイライトが反映されない（プレビューか公開後に確認）
  • テーマが多すぎて迷うことも（好みによる）
さこちゃん
さこちゃん

Gutenbergを使っていて、カスタマイズ性を求める人向けです。

Code Block Pro

Code Block Pro は、細かな設定やカスタマイズができる高機能プラグインです。無料でも十分な機能を使えますが、より高度なカスタマイズは有料版で可能です。

  • 140+ 言語、25+ テーマに対応
  • 行番号、コピーボタン、行ハイライト、テーマ切り替えなどが可能
  • インラインコード表示にも対応
  • HTML 出力と Prism.js / Highlight.js との互換性
  • Gutenbergブロック対応

以下の注意点もあわせて確認しておきましょう。

  • 有料機能を使いたい場合は、Proライセンスが必要
  • 高機能な分、他のプラグインやテーマと干渉する可能性もある（事前検証推奨）
さこちゃん
さこちゃん

ハイライト機能が充実しており、また読者がダーク/ライトを選べたりなどの表示切り替えが可能です。

他の方法：もっと軽量・カスタマイズしたい人向け

プラグインに頼らず、自分でコード表示の仕組みを構築したい人におすすめなのが、Prism.js や Highlight.js の導入です。

なによりJS読み込みの負荷が小さく高速&軽量なのが魅力。

テーマや配色を自身のブログに自由に最適化することも可能です。

  • 非常に軽量な構文ハイライトライブラリ（Prism.jsは2KBほど）
  • 多くのテーマ・言語に対応
  • カスタマイズ性が高く、自分好みに仕上げられる
  • Webサイト全体に統一したコード表示スタイルを適用可能

導入の流れも確認しておきましょう〜

  • Prism.js公式サイト で必要な言語・プラグインを選んでビルド
  • CDNまたは自分のサーバーにJS/CSSを読み込む
  • HTML内で <pre><code class="language-python"> ... </code></pre> のように記述

おわりに

WordPressでコーディング記事を書く上でのおすすめのプラグイン3選を紹介しました。

さこちゃん的には、「Highlighting Code Block」が初心者の方にも使いやすくておすすめです。

ぜひ参考にしてみてくださいね。