ソースコードをハイライトしてくれるWordPressプラグインSyntaxHighlighter Evolvedは非常に便利なのですが、テーマファイルの作り方によっては上手くソースコードをハイライトしてくれない時がありますので、注意が必要です。
過去にわたし自身がハマった時の解決策も含め、様々なサイトで紹介されているSyntaxHighlighter Evolvedが動かない場合の原因とその解決法をまとめてみました。
(1)<?php wp_head(); ?>の記述の欠落
テーマファイル header.php の<head> 内に
1 |
<?php wp_head(); ?> |
の記述があることが前提となります。
これが無いとSyntaxHighlighter Evolvedが動きません。
<?php wp_head(); ?>を設置する場所については</head>までの間であればどこでも動くのですが、色々と他のJavascript ファイルを引っ張っている場合は、それらのファイルよりも前に記述してあげた方が良さそうです。
(2)<?php wp_footer(); ?>の記述の欠落
テーマファイルのfooter.php に
1 |
<?php wp_footer(); ?> |
の記述があることも前提となります。
(1)同様、これも記述が無いとSyntaxHighlighter Evolvedが動きません。
<?php wp_footer(); ?>を設置する場所についてはfooter.phpの</body>の直前が良いそうです。
(3)ショートコードの記述ミス
SyntaxHighlighter Evolvedで利用できる [php][html][css]などのショートコードの記述が間違っている、または[/php][/html][/css]などでコードが閉じられていないという原因が考えられます。(4)<?php the_content(); ?>のカスタマイズによる影響
例えば以下のように
1 |
<?php echo mb_substr(strip_tags($post-> post_content),0,200) ; ?> |
投稿記事に200文字で表示制限をかけているような場合に、SyntaxHighlighter Evolvedが上手く動いてくれないようです。
ここは、
1 |
<?php the_content(); ?> |
で正しく記述し直せば問題ないようです。
参考サイト
SyntaxHighlighter Evolvedが動かない⇒無事動作まで!
(5)functions.php 内のコードとの干渉
最近追記したfunctions.php内のコードを1つ1つ外してみて、干渉していないかどうか確認してみましょう。(6)他のプラグインファイルとの干渉
プラグインを数多く入れていると、その分だけ干渉する可能性が高くなるかもしれませんので、WordPress 管理画面でプラグインを1 つ1 つ外してみて、干渉していないかどうか確認してみましょう。某かの影響が出るプラグインとしては
Script Compressor
があるようです。
参考サイト
[WP覚書]SyntaxHighlighter Evolvedが動かないときにチェックする項目
(7)「Amazon」バナーのソースコードとの干渉
Amazonバナーのソースコードに含まれる<iframe>と干渉して、上手くハイライトされないケースがあるようです。また、Google Chromeで上手く表示されないとの事例もあります。
一度<iframe>のコードを外してみてSyntaxHighlighter Evolvedが正常に動くかどうか確認してみましょう。
(8)「バリューコマース」のアフィリエイトコードとの干渉
アフィリエイト絡みでもう1 つ。バリューコマースのアフィリエイトコード
1 |
<valuecommerce ptnOid="*******" url="http://www.hoeghoge.com/" /> |
ですが、これはバリューコマースのサイト認証が終われば外していいのですが、
<?php wp_head(); ?>よりも前にアフィリエイトコードの記述があるとうまくハイライトされません。原因は不明です。
不要な場合はコードを除去するか、どうしても残しておきたい場合は、
<?php wp_head(); ?>よりも後にアフィリエイトコードを記述します。
色々調べた結果、現在考えられそうな原因は概ねこんな感じでしょうか。
たまにテーマファイルをいじくると動かなくなったりするので、大きくサイトをイメチェンした場合などはSyntaxHighlighter Evolvedが正常に動くかどうかを確認された方が良いかもしれませんね。
コメント