[WP]AutoExternalLinkプラグインをjQuery版にする

AutoExternalLinkプラグインはprototypeが使われてます。
前回書いた[WP]AutoExternalLinkプラグイン修正は、prototypeを使ったVicuna用の改造方法でしたが、
今回はリクエストにお答えしてjQuery版に変更する方法を解説します。
ついでにwp_enqueue_script()への対応方法も載せてます。

プラグイン作者はinoccoさん、jsソースはFsikiさんが作られたものです。
この記事では改造部分のみ掲載しており、変更後のソースそのものは配布してません。

jQueryやprototypeなどを使わない以下の変更は、前の記事と同じです。

• 表示エリアが見つからなかったら華麗にスルー
• クラス名を２つ３つ並べて指定しても対応させる
• iG:Syntax Hiliterのソースは除外

PHPファイルの変更

get_settings()が非推奨になったのでget_option()に変更。
スクリプトの呼び出しをwp_enqueue_script()にする。
使わない変数の削除。など

Class冒頭にあるコンストラクタ部分の元ソース

	var $path_css;
	var $path_js;
	var $path_js2;
	var $path_img;
	
	function AutoExternalLink() {
		
		$site_url = get_settings('siteurl');
		$plugin_root = "/wp-content/plugins/AutoExternalLink/";
		$this->path_url = $site_url;
		$this->path_css = $site_url . $plugin_root . "AutoExternalLink.css";
		$this->path_js  = $site_url . $plugin_root . "AutoExternalLink.js";
		$this->path_js2  = $site_url . $plugin_root . "prototype.js";
		
	}

変更後

	var $path_css;
	var $path_js;
	
	function AutoExternalLink() {
		
		$site_url = get_option('siteurl');
		$plugin_root = PLUGINDIR."/AutoExternalLink/";
		$this->path_css = $site_url ."/". $plugin_root . "AutoExternalLink.css";
		$this->path_js  = "/".$plugin_root . "AutoExternalLink.js";
		
	}

これの下にあるechoHeader()も修正します。
jsのechoは全部削除して、wp_enqueue_script()を書きます。
wp_enqueue_script()はadd_action()でのhookが違うので、CSSのechoを別の関数に移します。

元ソース

function echoHeader() {
		echo "t";
		echo "<script type="text/javascript" src="$this->path_js2">";
		echo "</script>n";
		echo "t";
		echo "<script type="text/javascript" src="$this->path_js">";
		echo "</script>n";
		echo "t";
		echo "<link rel="stylesheet" href="$this->path_css" ";
		echo 'type="text/css" media="screen" />' . "n";
		
	}

変更後

	function echoHeader() {
	
		wp_enqueue_script( 'AutoExternalLink',$this->path_js, array('jquery'));
		
	}
	function echoCSS(){
		echo "<link rel="stylesheet" href="$this->path_css" ";
		echo 'type="text/css" media="screen" />' . "n";
	}

最後の方にあるadd_action()を追加・変更します。

元ソース

$wpAEL = & new AutoExternalLink();

add_action('wp_head', array(&$wpAEL, 'echoHeader'));

変更後

$wpAEL = & new AutoExternalLink();

add_action('wp_head', array(&$wpAEL, 'echoCSS'));
add_filter('wp_print_scripts',array(&$wpAEL,'echoHeader'));

※CSSをechoHeaderに入れても動くんだけど、一応分けました。

wp_print_scripts　は wordpressが表示される直前に、JavaScriptをページヘッダに挿入するAction hookです。
wp_enqueue_script()はwp_headだと動かないのでこちらを使います。
prototype版（デフォルト）の場合は、wp_enqueue_script()の最後をarray('prototype')にします。

javascriptファイルの変更

前にも解説してるのでjQuery依存の部分だけ書いてます。
他ライブラリとの衝突をしやすいので、あらかじめ対策をしておく方向で。

各種設定のあたりに以下を追加。

jQuery.noConflict();

これを記述すると$がjQueryという記述で動くようになります。
$はprototypeやmootoolsでも使われるので他ライブラリを併用する場合に有効です。

一番最後の呼び出しを変更します。

Event.observe(window,'load', newWin, false);

▼変更後

jQuery(document).ready(newWin);

hn要素以外のaタグに追加したい

jQueryの記述方法で書けばおｋです。（参考リファレンス）
noConflict()使ったので、$()ではなくjQuery()になります。
$ is not defined とかいうエラーが出るときに試すと効果的。

var checkArea = '#content p a';

function newWin(){
	if(checkArea == ''){
		var anchors = document.getElementsByTagName('a');
	}else{
		var anchors = jQuery(checkArea);
	}