WordPress で highlight.js を使用してシンタックスハイライトを導入 – 無料テーマ Xeory の改造

バズ部謹製の 「Xeory-無料WordPressテーマ-」ですが、デフォルトではシンタックスハイライトができないので改造してみました。

シンタックスハイライトをするプラグインなども有りますが以下の理由により見送りました。

• マークダウン形式でコードスタイルを指定できない場合がある
• < などがエスケープされ、&lt; と表示されてしまう場合がある
• 試してないけど重そう（笑）

改造は、子テーマで行います。子テーマの作成については、先週書いた記事「WordPress無料テーマ「Xeory」を改造してYoast SEOを使う」を参照して下さい。

highlight.js の入手

CDNを利用する手もありますが、今回は highlight.js よりスクリプトとスタイルシートをダウンロードして使用します。

使用する言語を指定してファイルをダウンロードしますが、あらかじめよく使われる言語にチェックが入っていますので、普通の人はデフォルトのままダウンロードしてしまえば良いでしょう。

スタイルシートも同梱されています。スタイルシートの表示色は、highlight.js demo で確認することができます。

ファイルのアップロード

今回は、子テーマのディレクトリに以下のように設置しました。

• scripts/ というディレクトリを新しく作ります
• scripts/ ディレクトリに解凍した highlight/ ディレクトリをまるごとアップロード
• scripts/ ディレクトリ内にmyscripts.js という空のファイルを作成
• 子テーマディレクトリに空の mystyle.css というスタイルシートを作成
• functions.php は、前回作成したものに必要なコードを追記していきます。

子テーマの中のディレクトリ構成は以下のようになりました。（今回の対象となるファイルのみ表示）

wp-content/
  └ themes/
      └ xeory_base-child/
          ├ scripts/
          │  ├ highlight/
          │  │  ├ styles/
          │  │  │  ├ agate.css
          │  │  │  ├ ~(略)~
          │  │  │  └ default.css
          │  │  │
          │  │  └ highlight.pack.js
          │  │
          │  └ myscripts.js
          │
          ├ functioins.php
          └ mystyle.css

functions.php に javascript とスタイルシートを登録する

スクリプトの実装について

highlight.js は実際のところかなり簡単に実装できて、以下のコードを書き込めば動きます。

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

ダウンロードページにある CDN のコードを利用すれば、そもそもファイルのダウンロードや設置も必要ありません。

というわけでお手軽に header.php に直接書き込むのもありです。

ただ、今回は、他のプラグインとの競合や css や、 javascript を最適化するプラグインなどのことを考えて、functions.php にワードプレスっぽいやり方で登録することにします。

スタイルシートについて

また Xeory は lib/functions/asset.php の中に子テーマ側の style.css を、main-css としてレジストするコードが埋め込まれており、以下の順序でスタイルシートが適用されることとなります。（実際には、スタイルシートディレクトリにある style.css をレジストしているため子テーマ側のディレクトリが指定される。）

1. 親テーマの base.css
2. 子テーマの style.css
3. 親テーマの style.css

このうち、3番めの親テーマの style.css は、先週の記事で子テーマ側の functions.php に書き込んだ wp_enqueue_style 関数によって読み込まれています。

本当は子テーマの style.css を最後に読み込ませて、デフォルトのスタイルを上書きできるようになると管理がしやすくなります。

しかし、将来アップデートがあったときにこの辺の仕組みが変わる可能性があることや、style.css と base.css との依存関係が設定されていることなどを踏まえ、無理に子テーマ側の style.css を利用することは考えず、mystyle.cssというスタイルシートを新しく作って一番最後に読み込ませることにしました。

従って、スタイルシートは以下の順番で読み込まれます。

1. 親テーマの base.css
2. 子テーマの style.css
3. 親テーマの style.css
4. 子テーマの mystyle.css

functions.php のコード

ちょっとお恥ずかしいですが、自分用のメモ書きが入ったままの functions.php をまるっとアップします。各行の説明は後から行います。また、今回は全く関係ないアドセンスのショートコードも入っていますが気にしないでください。

<?php //子テーマで利用する関数を書く

// 親テーマや自作スタイルシートの登録
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );
function enqueue_my_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); // 親テーマのスタイル
    wp_enqueue_style( 'highlight-style', get_stylesheet_directory_uri() . '/scripts/highlight/styles/pojoaque.css'); // highlight.js
    wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/mystyle.css', array('parent-style')); // 自作スタイル
}

// 自作JSなどの登録
add_action( 'wp_enqueue_scripts', 'enqueue_my_scripts');
function enqueue_my_scripts() {
    wp_enqueue_script( 'highlight-js', get_stylesheet_directory_uri() . '/scripts/highlight/highlight.pack.js', array('jquery'), false, true );  // highlight.js
    wp_enqueue_script( 'my-scripts', get_stylesheet_directory_uri() . '/scripts/myscripts.js', array('highlight-js'), false, true );  // 自作スクリプトなど
}

// ヘッダメタ部分を無効化
add_action('after_setup_theme', function() {
    remove_action('wp_head', 'bzb_header_meta', 1);
});

//アドセンス用のショートコード
add_shortcode('ad', 'googlead_shortcode');
function googlead_shortcode() {
$adsensecode = '
<br>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Yomuna-Main -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-hogehogehoge"
     data-ad-slot="2088988483"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br>
';
return $adsensecode;
}

と、まぁ、こんな感じです。

すごい簡単に説明します。

スタイルシートの登録

先週書いた記事でつかってた関数名を enqueue_my_styles に変更しました。この辺は気分です。すいません。

今回追加した2行について説明します。

wp_enqueue_style( 'highlight-style', get_stylesheet_directory_uri() . '/scripts/highlight/styles/pojoaque.css'); // highlight.js

今回の目的である highlight.js のスタイルシートを読んでる部分です。このスタイルシート名を変更することで、お好みのスタイルを選ぶことができます。

wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/mystyle.css', array('parent-style')); // 自作スタイル

Xeory のデフォルトスタイルを上書きするために、最後に読み込ませる今回追加したスタイルシートです。ポイントは、array('parent-style') のところです。親テーマの style.css を、parent-style というハンドル名で読み込んでいるので、parent-style の後に読み込むように依存関係を設定しています。

スクリプトの登録

スクリプトの登録の際にも同じように、jquery との依存関係を設定して読み込ませます。また、in_footer オプションを true にして、ヘッダではなく wp_footer() で読み込ませるようにしています。

wp_enqueue_script( 'highlight-js', get_stylesheet_directory_uri() . '/scripts/highlight/highlight.pack.js', array('jquery'), false, true );  // highlight.js

highlight.js をコールする myscripts.js を作成して登録

myscripts.js を以下の様にして保存します。

// highlight.js
hljs.initHighlightingOnLoad();

また、functions.php へは、highlight-js を依存先に指定して登録します。

wp_enqueue_script( 'my-scripts', get_stylesheet_directory_uri() . '/scripts/myscripts.js', array('highlight-js'), false, true );  // 自作スクリプトなど

将来的に追加で javascript を書き込む場合などは、このファイルに書き足していくとよいでしょう。
他にも依存関係がある場合は、array に追加していけば良いはずです。

スタイルの上書き

ここまでの作業でちゃんと機能するようになっているはずなんですが、Xeory のベースデザインでは、<pre> にスクロールバーを強制的に出す設定になっています。

このスタイルを上書きしてスクロールバーを消したほうが格好良いと思います。

highlight.js が、<code> にスクロールバーを自動で出す設定になっているので、スクロールバーが二重になってしまうためです。

mystyle.css に以下の一行を追加します。

.post-content pre { overflow: auto; }

これで、おそらく綺麗に見えるようになるんじゃないでしょうか。

作業は以上で終了です。

ご利用は自己責任で。

---

おすすめの関連記事

WordPress無料テーマ「Xeory」を改造してYoast SEOを使う
WordPressのバズ部謹製フリーテーマ「Xeory」を改造して、SEOプラグインでメタタグを管理する方法です。子テーマを作成して改造を行います。…

ブログ記事を短時間でガリガリ量産するなら WordPress も はてなブログ もマークダウン記法が最適 － チートシート作ってみました
Wordpress、はてなブログ、MovableType など、ブログに思いついたことを勢いのあるまま文章にして打ち込んでいくとなると、マークダウン記法に勝るも…

さくらのレンタルサーバーでSSL(SNI)を導入しwww有りに正規化したら BackWPup が動かなくなってしまった時の対処法
さくらのレンタルサーバーでSNIベースのSSLを利用しwww有りに正規化すると、BackUPwpがエラーで動かなくなる場合があり、htaccessへ wp-cr…