WordPressでソースコードを埋め込む方法はプラグインを使うことが多いです。
ソースコード埋め込みの有名どころプラグイン
- Crayon Syntax Highlighter
- Highlighting Code Block
ところが、利用しているテーマやプラグインによっては相性が悪く、上手く表示されないことがあります。
また、プラグインは数が増えると結構重くなってくるので、表示速度の面でもイマイチ。
当ブログではAFFINGER5を使っているのですが、残念ながら相性が悪い組み合わせの1つのようで、上手く使えませんでした…。


という(僕と同じく)わがままなあなたに向けて送る記事です。
先に結論をお伝えすると、Prismを使います。
AFFINGER5の標準機能を使う場合
groovy
android {
compileSdkVersion 30
compileOptions {
sourceCompatibility JavaVersion.VERSION_11
targetCompatibility JavaVersion.VERSION_11
}
}
Prism.jsを使う場合
android {
compileSdkVersion 30
compileOptions {
sourceCompatibility JavaVersion.VERSION_11
targetCompatibility JavaVersion.VERSION_11
}
}
Prismを使うと上記のような感じにできます。

本記事ではPrismをWordPressで使えるようになるまでの手順を解説します。
図入りで説明してますので、エンジニアで自分が学んだことをWordPressでかっこよくアウトプットしたい!という方は最後までお付き合いください。ぜひ快適なWordPressでのソースコード作成ライフを手に入れてってね。
動作環境
- サーバー: Xserver
- PHP: 7.4.25
- WordPress: Version 5.8.1
- WordPressテーマ: AFFINGER 5 20210201
WordPressにPrismをインストールする手順
インストールに必要な作業は以下の3ステップです。
Prism.jsのインストール手順
- Prismのダウンロード
- Prismをサーバーへアップロード
- WordPressでPrimsの有効化
図入で解説していますので、見ながら一緒に手を動かして貰えば5分ぐらいでできると思います。
1. Prismのダウンロード
step
1Prismの公式ページへアクセス
まずはPrismをダウンロードします。
以下のリンクからPrismのダウンロードページにアクセスします。
step
2Prismの設定
埋め込んだソースコードの見た目や扱う言語など、Prismの設定を行います。
チェックボックスがたくさんあるのでちょっと面食らいますが、1つずつ確認していけば大丈夫です。順に見ていきましょう。
・Compression level:
ダウンロードするファイルの圧縮レベル。自分で変更を加える予定がない場合は、Minified versionにチェック。
・Themes
WordPress上でコードを書いたときに表示されるデザインを選びます。
私は青色が好きなのでCoyを選日ました。
デザインイメージは、Prismトップページで、右側のTHEME: と表示されている箇所を選ぶと、Examplesにイメージが表示されるので、そこで確認することができます。

Prismのトップページにて、”THEME:”と表示されている右側の各ボタンを選択することで、ソースコードを埋め込んだ際にどんな表示になるかを確認することがきる

Prismのテーマ”Default”を選択した場合の見た目
・Language
WordPressで扱う予定の言語を選びます。
選択しすぎるとWordPress記事の表示時に遅くなってしまうため、なるべく必要最低限に絞るのがベスト。
Prismは有効化を一度設定してしまえば、後でPrism設定を選び直し&サーバーへアップロードし直せばすぐに反映することができます。
ですので、まずは現時点で扱おうと考えているものだけ選びましょう。
・Plugins
表示時に使える便利な拡張機能です。
以下あたりはおすすめです。
- Line Highlight: 選択行のハイライト
- Line Numbers: 行番号の表示
- Show Language: 言語の表示
- Copy to Clipboard Button: コピーボタンの表示
step
3Prismのダウンロード
選択が終わったら、画面下のDOWNLOAD JSとDOWNLOAD CSS、両方のボタンを押下します。
1)prism.js, 2)prism.cssという2つのファイルがダウンロードできていればOKです。
補足: Prismの設定はURLで復元できる
選択が終わった後にブラウザのURL欄を見ると、これまで選択したものがURLのパラメータとして設定されていることが分かります。
このURLをメモして覚えておくことで、「今どんな設定だったかな?追加で他の設定も足したい」というときにURLを入力することで、以前設定した状態を復元することができます。
ちなみに私はこちらのリンクの通りに設定しています。
2. サーバーへアップロード
先ほどダウンロードしたPrismのファイルをサーバーへアップロードします。
アップロードには、FTPソフトを利用するか、レンタルサーバーであれば各ベンダーが用意しているブラウザのアップロード機能などを利用します。

step
1Xserver管理ページへログイン
まずはXserver管理ページへログインします。
step
2Xserverファイル管理画面を開く
「ファイル管理」を選択して管理画面を開きます。
step
3アップロード先を表示する
ツリーフォルダをクリックしながら、ブログのドメイン名 > public_html > wp-content > themes > “テーマ”を開きます。
例えば私のブログだと、ドメイン名はdonachikiblog.com、テーマはaffinger5-childなので、以下になります。
donachikiblog.com > public_html > wp-content > themes > affinger5-child
step
4Prismアップロード先のフォルダを作成
prismファイルをアップロードするため、分かりやすくprismフォルダを作成します。
左上の”新規フォルダ”を押下します。
新規フォルダ作成のダイアログが表示されるので、名前を入力してくださいの欄にprismと入力し、作成を押下します。他はデフォルトのままでOKです。
※正確にはフォルダ名はどんな名前でも大丈夫です。ただ同じ名前で作成すると、この後function.phpというファイルを編集する際に同じコードをコピーするだけですむので、心配な方は同じに併せてもらうと良いです。
step
5prism.css, prism.jsをアップロード
先ほどダウンロードしたprism.css, prism.jsを、step4で生成したフォルダにアップロードします。
左側のツリーでprismフォルダを選択し、画面中央上のアップロードを押下します。
アップロード画面が表示されるので、prism.css, prism.jsの2つのファイルをドラッグ&ドロップします。
対象のファイルが正しく選択できていることを確認したら、アップロードボタンを押します。
prismフォルダに、prism.css, prism.jsの2つのファイルが表示されていれば完了です。
3. WordPressでPrismの有効化
最後に、アップロードしたprismをWordPressで使えるように機能の有効化をおこないます。
具体的にはfuntion.phpというファイルを編集します。
step
1テーマエディタ画面の表示
WordPress管理画面にアクセスし、左側メニューバーから外観 > テーマエディタを選択します
step
2編集するテーマの選択
右側の編集するテーマを選択のプルダウンから編集するテーマを選び、選択ボタンを押下します。
テーマによっては親テーマと子テーマがあるので、子テーマを選びます。
私はAFFINGER5を使っていますが、AFFINGER5の場合はWING-AFFINGER5 Childの方を選んでください。
step
3function.phpの表示
テーマのための関数(function.php)を選びます。
※ここはテーマによって表示される文言が違うようですが、funtion.phpと書かれているものは見つかると思います。
step
4function.phpの編集
funtion.phpを編集します。
末尾に以下のコードをコピーして貼り付けます。
// prism.js の読み込み
function add_files_prism_js() {
wp_enqueue_script( 'prism-style', get_stylesheet_directory_uri() . '/prism/prism.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'add_files_prism_js' );
// prism.css の読み込み
function add_files_prism_css() {
wp_enqueue_style( 'prism-script', get_stylesheet_directory_uri() . '/prism/prism.css', '', '' );
}
add_action( 'wp_enqueue_scripts', 'add_files_prism_css' );
以下のようになればOKです。
コードの補足
Prismが配置されている場所を取得するために、テーマディレクトリのURLを取得する必要があります。
get_stylesheet_directory_uri関数は、子テーマが配置されているディレクトリを取得します。
親テーマに直接アップロードした場合は、get_template_directory_uri()を使ってください。
wp_enqueue_scriptとwp_enqueue_styleの3つ目の引数'/prism/prism.js’は、サーバーにアップロードしたprismのパスになります。
今回の説明では子テーマの直下にprismというフォルダを作成し、その下にprism.jsとprism.cssを配置したので、この引数になります。
異なる場所に配置した場合は、状況に合わせて修正が必要です。
step
5function.phpの更新
編集が終わったら、下側にあるファイルを更新を押下します。
ファイルの編集に成功しました。と表示されれば無事に完了です。
Prismを使ったソースコードの埋め込み方
WordPressでPrismを使ってソースコードを埋め込むには、ビジュアルエディタではなくテキストエディタを使います。
テキストエディタで、<pre>タグと<code>タグで囲い、その中にソースコードを書けばOKです。
<pre><code>ここにソースコードを書く</code></pre>
言語名の表示
PrismのPlugin選択時に、Show Languageを選んだ人は、言語名を表示することができます。
<code class=“language-xxx”>とすることで、言語に応じたハイライト表示を行うことができます。
<pre><code class="language-xxx">xxxには言語名を書く</code></pre>
xxxの部分が言語名で、Prismをダウンロードした際に扱う言語としてチェックを選んでいれば対応します。
xxxの部分の書き方はこちらの公式ページを見ながら当てはまるものを書きましょう。
行番号を表示する
PrismのPlugin選択時に、Line Numbersを選んだ人は、コードの横に行番号を表示することが可能です。
<pre class="line-numbers"><code>line-numbersを付けることで行番号が表示される</code></pre>
N行目をハイライト表示
<!-- 2行目をハイライト表示 -->
<pre data-line="2">
<!-- 1-5行目をハイライト表示 -->
<pre data-line="1-5">
Prismをさらに使いやすく
Prismを使えばソースコードがキレイに表示できるものの、毎回<pre><code>…と入力するのが面倒…。
なので、一式をテンプレートとして呼び出せるようにしましょう。
例えば、AddQuickTagプラグインを使ってPrismに必要なタグをあらかじめ設定しておけば、ワンクリックでコードが書けるようになります。

AddQuickTagプラグインを使ってPrismの開始タグと終了タグを登録しておくと...