[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);
	}

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

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

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

    よろしくお願いします。

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

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

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

    返信

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy