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

by

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冒頭にあるコンストラクタ部分の元ソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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";
     
}

変更後

1
2
3
4
5
6
7
8
9
10
11
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を別の関数に移します。

元ソース

1
2
3
4
5
6
7
8
9
10
11
12
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";
         
    }

変更後

1
2
3
4
5
6
7
8
9
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()を追加・変更します。

元ソース

1
2
3
$wpAEL = & new AutoExternalLink();
 
add_action('wp_head', array(&$wpAEL, 'echoHeader'));

変更後

1
2
3
4
$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依存の部分だけ書いてます。
他ライブラリとの衝突をしやすいので、あらかじめ対策をしておく方向で。

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

1
jQuery.noConflict();

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

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

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

▼変更後

1
jQuery(document).ready(newWin);

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

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

1
2
3
4
5
6
7
8
var checkArea = '#content p a';
 
function newWin(){
    if(checkArea == ''){
        var anchors = document.getElementsByTagName('a');
    }else{
        var anchors = jQuery(checkArea);
    }

「[WP]AutoExternalLinkプラグインをjQuery版にする」への4件のフィードバック

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

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

    よろしくお願いします。

    返信

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

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

    返信

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

    返信

チョッパー へ返信するコメントをキャンセル

This site uses Akismet to reduce spam. Learn how your comment data is processed.