【WordPress】SyntaxHighlighter Evolvedが動かないときに確認すべき2つのこと

プログラム関連の記事を書くときに必須と言っていいプラグインである「SyntaxHighlighter Evolved」。当ブログもお世話になっていて、友人周りにもおすすめしています。

ですが、たまに「コードがハイライトされない」という相談を受けることがあります。インストールしたけどコードがきれいに表示されない、という話です。

この手の問題はだいたい以下の3つが原因なのですが

  • ショートコードの入力ミス
  • SyntaxHighlighterのブロックを適用していない
  • プラグインの有効化を忘れている

たまにこの3つ全てに問題がなく、動くはずなのに動かないことがあります。実際に管理画面にもログインさせてもらって確認したけど「たしかにハイライトされない…」となり、当時は結構解決するまでに時間がかかりました。

以下に備忘録として解決方法をまとめておきます。

wp_headタグとwp_footerタグが設置されているか確認しよう

実はハイライトされていない理由は結構単純で、wp_headタグとwp_footerタグが設置されていないからです。

SyntaxHighlighter Evolvedはこの2つのタグがないと動かない仕様になっています。まずはテンプレートファイルを見て、それぞれのタグがあるのかないのかを確認しましょう。

設置されていないタグを設置しよう

設置されていないタグが判明したら、それぞれのタグを設置しましょう。

wp_headタグの設置方法

wp_headタグは<head>タグ内に

<?php wp_head(); ?>

を追加してください。

<head>タグはだいたいheader.phpファイル内にあるはずです。

wp_footerタグの設置方法

wp_footerは</body>の直前に

<?php wp_footer(); ?>

を設置してください。

</body>はだいたいfooter.phpファイル内にあるはずです。

タグの設置が終わったらハイライトされているか確認する

設置が終わったら各ファイルを更新し、今までハイライトされていなかったところを確認してみましょう。この記事のようにソースコードの左側に行番号が表示されていたら成功と思って大丈夫です。

今まで相談を受けた人たちの中で多かったのは、自分でオリジナルテーマを作成したときにwp_footerタグを設置し忘れていたパターンでした。オリジナルテーマでブログを運用されている方は、まずフッターを表示するファイル(だいたいfooter.php)にwp_footerタグが設置されているかどうかを確認してみましょう。

関連記事