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

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

PLAIN TEXT
PHP:
  1. var $path_css;
  2.     var $path_js;
  3.     var $path_js2;
  4.     var $path_img;
  5.    
  6.     function AutoExternalLink() {
  7.        
  8.         $site_url = get_settings('siteurl');
  9.         $plugin_root = "/wp-content/plugins/AutoExternalLink/";
  10.         $this->path_url = $site_url;
  11.         $this->path_css = $site_url . $plugin_root . "AutoExternalLink.css";
  12.         $this->path_js  = $site_url . $plugin_root . "AutoExternalLink.js";
  13.         $this->path_js2  = $site_url . $plugin_root . "prototype.js";
  14.        
  15.     }

変更後

PLAIN TEXT
PHP:
  1. var $path_css;
  2.     var $path_js;
  3.    
  4.     function AutoExternalLink() {
  5.        
  6.         $site_url = get_option('siteurl');
  7.         $plugin_root = PLUGINDIR."/AutoExternalLink/";
  8.         $this->path_css = $site_url ."/". $plugin_root . "AutoExternalLink.css";
  9.         $this->path_js  = "/".$plugin_root . "AutoExternalLink.js";
  10.        
  11.     }

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

元ソース

PLAIN TEXT
PHP:
  1. function echoHeader() {
  2.         echo "t";
  3.         echo "<script type="text/javascript" src="$this->path_js2">";
  4.         echo "</script>n";
  5.         echo "t";
  6.         echo "<script type="text/javascript" src="$this->path_js">";
  7.         echo "</script>n";
  8.         echo "t";
  9.         echo "<link rel="stylesheet" href="$this->path_css" ";
  10.         echo 'type="text/css" media="screen" />' . "n";
  11.        
  12.     }

変更後

PLAIN TEXT
PHP:
  1. function echoHeader() {
  2.    
  3.         wp_enqueue_script( 'AutoExternalLink',$this->path_js, array('jquery'));
  4.        
  5.     }
  6.     function echoCSS(){
  7.         echo "<link rel="stylesheet" href="$this->path_css" ";
  8.         echo 'type="text/css" media="screen" />' . "n";
  9.     }

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

元ソース

PLAIN TEXT
PHP:
  1. $wpAEL = & new AutoExternalLink();
  2.  
  3. add_action('wp_head', array(&$wpAEL, 'echoHeader'));

変更後

PLAIN TEXT
PHP:
  1. $wpAEL = & new AutoExternalLink();
  2.  
  3. add_action('wp_head', array(&$wpAEL, 'echoCSS'));
  4. 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依存の部分だけ書いてます。
他ライブラリとの衝突をしやすいので、あらかじめ対策をしておく方向で。

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

PLAIN TEXT
JavaScript:
  1. jQuery.noConflict();

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

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

PLAIN TEXT
JavaScript:
  1. Event.observe(window,'load', newWin, false);

▼変更後

PLAIN TEXT
JavaScript:
  1. jQuery(document).ready(newWin);

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

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

PLAIN TEXT
JavaScript:
  1. var checkArea = '#content p a';
  2.  
  3. function newWin(){
  4.     if(checkArea == ''){
  5.         var anchors = document.getElementsByTagName('a');
  6.     }else{
  7.         var anchors = jQuery(checkArea);
  8.     }
このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl（バザール）に追加このエントリをChoixに追加このエントリをnewsingに追加

Comments:4

チョッパー 08-07-24 (木) 22:32

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

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

よろしくお願いします。

Tenderfeel 08-07-25 (金) 1:16

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

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

チョッパー 08-07-25 (金) 22:15

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

Tenderfeel 08-07-27 (日) 0:16

多分メジャーなの3種くらい作ると思います（笑

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://tenderfeel.xsrv.jp/wordpress/plugin/276/trackback/
Listed below are links to weblogs that reference
[WP]AutoExternalLinkプラグインをjQuery版にする from WebTecNote

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

Scripts
カテゴリー
Recent Reactions
最近の投稿
最近の修正
  • そしてこのSQLはわれながらよく書いたと思う 2010-11-15
  • CSVの列っていう方がいいのかな…118項目だった 2010-11-15
  • 楽天のCSVの項目が116個もあった衝撃 2010-11-15
  • オフィスで香水臭振りまくのは迷惑だと知れ 2010-11-15
  • ぐあー　フレグランステロやー 2010-11-15
  • More updates...

Powered by Twitter Tools

Tag Cloud
おすすめサーバー・他

メタ情報

Return to page top