「Crayon Syntax Highlighter」が動かない
wordpressで記事中にコードを掲載するプラグインとして人気の「Crayon Syntax Highlighter」。@MINOも使用させてもらっています。
下記のような形でコードを表示してくれるプラグインです。さまざまな言語に対応しており、とても便利。
// A sample class
class Human {
private int age = 0;
public void birthday() {
age++;
print('Happy Birthday!');
}
}先日サイトを作成していて、記事に「Crayon Syntax Highlighter」を用いたのですが、ToolBar(コード掲載領域の上にある灰色の領域)がうんともすんとも言わなくなりました。
「Crayon Syntax Highlighter」は通常であれば、コード掲載領域にマウスホバーするとToolBarがスライドインしてきます。
コードをコピーしたり、折り返させたり、新しいタブで表示させたりするボタンがあり、ユーザーに利便性を提供するものです。
またコード掲載領域をダブルクリックすると、コードが平文になりコピーも閲覧もしやすくなったりします。
これらの機能が動作しないです。ToolBarのボタンを押しても何も起こらないし、ダブルクリックしてもコードが平文になりません。
コードテキストの選択すらできないのでコードをユーザーにコピーしてもらうこともできないです。
ToolBarが動かない原因の究明
すわ一大事ということで、原因究明を開始しました。結論から言うとjQueryの依存関係が原因だった。
まず前提として、wordpressはjQueryを内包しています。wordpressをインストールすれば、自動的にjQueryも使えるようになっています。
具体的には<?php wp_head(); ?>が実行されるとjQueryライブラリーのリンクが挿入されることになる(wp_headアクションに７フックしているスクリプトも)。
wordpressでは記述した覚えもないのに<head>内にいろいろ記述が入っているかと思いますが、それらは<?php wp_head(); ?>によるものです。
@MINOはテストの為、自分でjQueryのバージョンを指定したくて以下を<head>内に記述しました。
<?php wp_deregister_script('jquery'); ?>wp_deregister_script()はwodpress本体やプラグインが登録しているjavascriptのフックを解除する関数です。
これを実行し、<?php wp_head(); ?>で行われるjQueryライブラリーのリンク挿入を外しました。 それ自体はそれほど問題ないのですが、次に行ったことが迂闊すぎた。
<?php wp_head(); ?>の後にjQueryライブラリーのリンクを記述したのです。しかも</body>の直前です。
ページ解析を高速にするためjsファイルの読み込みを遅延させる方法として、</body>の直前に記述することはダメなことではないですが、「Crayon Syntax Highlighter」には影響が出てしまったようです。
本来はwordpressが用意してくれているはずのjQueryライブラリーが読み込まれていない状態で「Crayon Syntax Highlighter」が実行されてしまうので、jQueryに依存している機能が働かなくなったということです。
動かなくなったらとにかくコードを読む
最初全く理由がわからず途方に暮れていましたが、意を決して「Crayon Syntax Highlighter」のソースコードを読んでみることにしました。PHPファイルもjsファイルもたくさんあり、無職の@MINOにとってはかなり威圧感があった。
しかしソースコードをなんとかかんとか読んでいるうちに、ToolBarまわりの機能はjQueryに依存して実装されていることが分りました。 そのことが判った時に、header.phpをいじくった事を思い出したのです。
「jQueryの読み込みのせいか？」
ビンゴです。
<?php wp_deregister_script('jquery'); ?>を外してみるとあっさり「Crayon Syntax Highlighter」が正常に動いましました。生兵法でカスタマイズをしてはいけないということです。
今回の事でわかった事があります。プラグインの多くはwordpressが用意しているものを前提としていることが多い(wordpressプラグインはwordpressの中で動くので当たり前の話なのだが)。
外部ライブラリーの依存関係というのはなかなかわかりにくいものです。こういった失敗でもしないと気が付かないのは@MINOがバカだからでしょう。
しかし、やはりトラブルに見舞われたら、急がばまわれの精神でソースコードを丹念に読んでいくのは、結果的に速く問題解決につながっているように感じます。
@MINOのように独学プログラマーにとっては他人のソースコードを読むという機会が会社勤めの人より絶対的に少ないので、なおさら読む機会は作りたいと思います。
どこかをいじると思わぬところに影響がでるという好例(悪例?)だと思います。
