2015/01/14 12:11:25

wordpressのプラグイン「Crayon Syntax Highlighter」のToolBarが動作しなくなった時に解決できた方法

目次(クリックするとジャンプします)
  • 1:「Crayon Syntax Highlighter」が動かない
  • 2:ToolBarが動かない原因の究明
  • 3:動かなくなったらとにかくコードを読む

「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アクションに7フックしているスクリプトも)。

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のように独学プログラマーにとっては他人のソースコードを読むという機会が会社勤めの人より絶対的に少ないので、なおさら読む機会は作りたいと思います。

どこかをいじると思わぬところに影響がでるという好例(悪例?)だと思います。