WordPressのGeranatePressを使っています。コードの表示を、ClaudeやGitHubのようにmonospaceにして、色付けなどをしたいです。どのように設定すればよいですか？シンプルな自作プラグインで解決できますか？
ちなみに、コードの左に言語の種類、右上にコピーボタンを付けたりもできる？Claudeなどではそうなっているけど、何かパターンがありそうなんだよね。いろんなサイトで共通するデザインなので。
みなさんのブログやウェブサイトでプログラミングコードを見やすく表示したいと思ったことはありませんか？特にプログラミング関連の記事を書いている方なら、コードを GitHub や Claude のような見た目で表示したいと考えるでしょう。この記事では、WordPress の GeneratePress テーマを使って、モノスペースフォントとシンタックスハイライト（色分け）、さらに言語名ラベルやコピーボタンまで備えたコード表示の実現方法を解説します。
なぜコードの表示にこだわるべきなのか
プログラミングコードは普通のテキストとは違います。等幅（モノスペース）フォントで表示し、色分けすることで格段に読みやすくなります。さらに、言語名ラベルがあれば何の言語のコードなのかが一目でわかり、コピーボタンがあればコード全体を簡単にコピーできます。これはノートを取るときに赤ペンで見出しを書くようなもの。情報が整理され、使いやすくなるのです。
プラグインを使った簡単な実装方法
最も簡単でありながら高機能なのは、専用プラグインを使う方法です。以下のプラグインがおすすめです。
1. Code Block Pro
Visual Studio Code 風のデザインが特徴で、以下の機能がすべて揃っています。
- シンタックスハイライト（コードの色分け）
- 言語名ラベル
- コピーボタン
- テーマ切り替え
使い方も簡単です。ブロックエディタで「Code Block Pro」を選び、右側のパネルで言語やコピーボタンの表示、テーマなどを設定するだけ。まるでパソコンの壁紙を変えるような感覚で、コードの見た目を整えられます。
2. Highlighting Code Block
こちらはシンプルながらも、行番号や言語表示、コピーボタンにも対応しています。デザインテーマは少なめですが、基本機能は十分です。
3. Syntax-highlighting Code Block
WordPress のコアのコードブロックを拡張し、行番号やハイライト表示が可能になります。コピーボタンやテーマ切り替えは機能が限定的です。
これらのプラグインの比較は以下の通りです。
| プラグイン名 | シンタックスハイライト | 言語名ラベル | コピーボタン | テーマ切替 |
|---|---|---|---|---|
| Code Block Pro | ○ | ○ | ○ | ○ |
| Highlighting Code Block | ○ | ○ | ○ | △（少） |
| Syntax-highlighting Code Block | ○ | ○ | △ | △ |
導入手順はどのプラグインも共通しています。
- プラグインをインストールして有効化する
- 投稿編集画面で専用ブロックを追加する
- 言語やコピーボタンなどの設定をする
これは料理で例えると、市販のカレールーを使うようなもの。誰でも簡単においしく作れますが、細かいこだわりを反映させるのには限界があります。
自作プラグインで実現する方法
より自由度の高いカスタマイズをしたい場合は、自作プラグインという選択肢もあります。こちらは少し手間がかかりますが、自分好みのデザインを実現できます。
自作プラグインの基本的な流れ
- Prism.js や Highlight.js などのライブラリを読み込む
- コードブロックの HTML 構造を整える（
<pre><code class="language-xxx">...</code></pre>形式） - CSS でモノスペースフォントやデザインを調整する
- JavaScript でコピーボタンや言語名ラベルを追加する
これは料理で例えると、カレーを一から作るようなもの。手間はかかりますが、自分の好みに合わせた味付けができます。
実際の自作プラグインの作り方
具体的な手順は以下の通りです。
- まず
wp-content/plugins/my-code-highlighter/にフォルダを作ります my-code-highlighter.phpというファイルを作成し、基本的なプラグイン情報を記述します
<?php
/*
Plugin Name: My Code Highlighter
Description: Prism.jsでコードに色付け＆コピーボタン
Version: 1.0
Author: あなたの名前
*/
function mch_enqueue_scripts() {
// Prism.jsとCSSを読み込み
wp_enqueue_style('prism-css', 'https://cdn.jsdelivr.net/npm/prismjs/themes/prism-tomorrow.css');
wp_enqueue_script('prism-js', 'https://cdn.jsdelivr.net/npm/prismjs/prism.js', array(), null, true);
// コピーボタン用のJS
wp_enqueue_script('mch-copy', plugins_url('copy.js', __FILE__), array('prism-js'), null, true);
// 独自CSS
wp_enqueue_style('mch-style', plugins_url('style.css', __FILE__));
}
add_action('wp_enqueue_scripts', 'mch_enqueue_scripts');
Code language: HTML, XML (xml)copy.jsでコピーボタンの機能を実装しますstyle.cssで言語ラベルやボタンの位置などのデザインを調整します
実装する際の注意点として、コードブロックの HTML 構造は <pre><code class="language-php">...</code></pre> のようにする必要があります。また、Gutenberg の「コード」ブロックはデフォルトでは class 属性が付かないため、カスタムブロックやショートコードで対応するのが確実です。
GeneratePress テーマの特徴
GeneratePress 自体はシンプルなテーマで、コード表示に関する特別な装飾はほとんどありません。このシンプルさが高速表示の秘密であり、必要な機能はプラグインやカスタム CSS/JS で拡張する前提となっています。
これは家具で例えると、シンプルな白い棚に好きな小物を飾るようなもの。土台がシンプルだからこそ、自分好みにアレンジしやすいのです。
GitHub や Claude 風デザインの共通パターン
多くのプログラミング関連サイトで見られる共通デザインパターンには以下のようなものがあります。
- コードブロックの上部に「言語名ラベル」
- 右上に「コピーボタン」
- モノスペースフォント＋シンタックスハイライト
- 角丸・影・背景色などの装飾
これらは Prism.js や Highlight.js のテーマと独自 CSS を組み合わせることで再現できます。多くのサイトがこれらのライブラリとカスタム CSS で同様の UI を実装しています。
統一感のあるデザインは、ユーザーにとって使いやすさをもたらします。スーパーに行くと、どのお店でも野菜コーナーや肉コーナーがあるように、共通のデザインパターンがあることで使い方に迷うことがありません。
まとめ
WordPress の GeneratePress テーマでコードを見やすく表示する方法をいくつか紹介しました。
- 最も簡単で高機能なのは「Code Block Pro」などのプラグイン利用
- こだわりたい場合は自作プラグインで Prism.js などを使って実現可能
- 言語ラベルやコピーボタンは CSS/JS で追加できる
- GeneratePress はカスタマイズ性が高いが、コード表示はプラグインや自作で拡張するのが一般的
まずはプラグインで試し、細かいカスタマイズが必要なら自作プラグインや CSS/JS で調整するのがおすすめです。