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

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

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

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

  • 表示エリアが見つからなかったら華麗にスルー
  • クラス名を2つ3つ並べて指定しても対応させる
  • 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の記述方法で書けばおkです。(参考リファレンス
noConflict()使ったので、$()ではなくjQuery()になります。
$ is not defined とかいうエラーが出るときに試すと効果的。


var checkArea = '#content p a';

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

1件のコメント

  1. jQuery版の解説ありがとうございました。
    キチンと動作しました。

    AutoExternalLinkはFirefox以外では画像にアイコンが出てしまうのですが
    これを修正する方法はないでしょうか?

    よろしくお願いします。

    Reply
  2. >AutoExternalLinkはFirefox以外では画像にアイコンが出てしまうのですが
    >これを修正する方法はないでしょうか?

    直せなくはないんですが、元の面影ないくらいの修正になるので
    フレームワーク使って書き直す方が早いんじゃ、と・・・
    気が向いたらやろうと思います

    Reply
  3. 気が向いたらお願いします。
    フレームワークはjQueryだったら嬉しいです。

    Reply

Leave a Comment.