8月
24
2011

SyntaxHighlighterとHead Cleanerを併用するときの注意点

SyntaxHighlighterの表示例

SyntaxHighlighter(▲画像のように、ソースコードを見やすい形で表示してくれる機能)、便利ですよね。

技術系のブログなんかでは当たり前に利用されています。

WordPressにも、簡単にSyntaxHighlighterが利用できるようになるプラグインが色々あります。
当サイトで利用しているのは、「SyntaxHighlighter Evolved」ですが、「Syntax Highlighter for WordPress」なんかも有名です。

個人的には、「SyntaxHighlighter Evolved」が最も軽くて良い感じがしてます。

さて、その便利なSyntaxHighlighterですが、WordPressの高速化用プラグイン「Head Cleaner」と併用する場合、注意すべき点があります。

注意点

このサイト「ひなログ」では、「Head Cleaner」をインストール後、「SyntaxHighlighter Evolved」をインストールしました。
その後、投稿でコードを挿入し、意気揚々と、「きれいに表示されてるかな?」と思ったところ、
こんな風に表示されました。

ダメなSyntaxHighlighterの表示例

おいおい、プラグイン入れた意味なしですやん。。。

そこで、色々調べた結果、どうやら「Head Cleaner」の設定項目の一つ、「複数のJavaScriptを結合する」が怪しい、ということに行きつきました。

解決法

解決法は簡単。
下記のように、「複数のJavaScriptを結合する」のチェックを外して下さい。

Head Cleanerの設定

これで、SyntaxHighlighterのJava scriptが正常に読み込まれるはずです。
同じ症状でお悩みの方は参考にしてください。

補足

今回の症状は、
「SyntaxHighlighterが正常なレイアウトで動作しない」
というものですが、そもそもSyntaxHighlighterが動作しない、という場合は、

<head>~</head>

の間に、

<?php wp_head(); ?>

 
そして、

<body>~</body>

の間に、

<?php wp_footer(); ?>

の両方があるか確認してください。

もしなければ、それがエラーの可能性かもしれません。

Thank you for your Comment!

Trackback URL

無関係な内容や、内容のないと管理人が判断したものは承認いたしません。