外部リンクをもっとわかりやすくしてみた
In: technology| WordPress
7 2月 2008最近、WordPressのメンテをさっぱりしてこなかったので、久しぶりにちょっといじりました。
地味に行間を広げてみたりなど、非常に細かいところばかりなんですけれど、その中のひとつとして、外部リンクの表示の部分があります。
今回、たとえば、こんな風にしてみました。
例1：
Google
例2：
リストの頭にfaviconは前からやっていたのですけれど、今回は後ろに別ページを開くかどうかのアイコンを用意してみました。
両方とも欲しかった欲張りなワタクシとしては、なかなかよい感じです。
用意するもの
頭にfaviconをつけるのは、ここから。
リンクに別ページを開く専用（以下、長いので、別ページ用）のアイコンをつけるのは、ここからいただきました。
基本的な手順
基本的には、リンク先のページに書かれているとおりなので、省略。
faviconのほうは、Javascriptをダウンロードしてきて（faviconize.jsとか名前をつけます）、自分用に修正。
FTPでアップロードしたら、<head>タグの間にこう書いてしまえばOK。wordpressなら、header.phpとか、そういう名前のところに該当箇所があると思われます。
<script type=“text/javascript” src=“faviconize.jsへのパス”></script>
別ページ用のほうは、AutoExternalLinkというプラグインをダウンロードしたら、同梱のJavascriptを自分好みに編集して、FTPでアップロードして、wordpressの設定画面でプラグインを有効にすればOK。
ちなみに、ここでの設定はこんな感じ。
/*
* openType : [1:target="_blank"][2:window.open(this.href)]
* checkArea : 適用するエリアのid(ページ全体なら [checkArea = ''])
* exclusionStr : 除外する文字列(リンクすべてに適用するなら [exclusionStr = new Array()])
* inclusionClassName : 除外文字列を含んでいても<a class="nw">テキスト</a>と書かれていれば適用する。
* anchorObject : 表示するオブジェクト(テキストの場合[var anchorObject = 'テキスト';])
*/
var openType = 1;
var checkArea = 'primary';
var exclusionStr = new Array('ドメインのURL','サーバーのURL','javascript','faviconimg');
var inclusionClassName = 'nw';
var anchorObject = '<img src="http://www.ドメインのURL/wp-content/plugins/AutoExternalLink/external.gif" width="12" height="11" alt="リンクを新しいウインドウで開く" title="リンクを新しいウインドウで開く" />';
openType = 1のほうにしてみたのは、Javascriptだとタブブラウザでもウィンドウごと新しいのを開いて、気持ち的に微妙だったから（自分のローカル設定が悪いのかもだけど）。
どっちも手順に難しいということはありません。……単体で使うのなら。
こっからカスタマイズ
で、両者とも有効にするとですね。
冒頭の例2の外部リンクに不具合が現れます。
別ページ用のアイコンの手前にもう一個faviconが出現してしまいます。
プラグインのほうは、リンクの後ろにもう一個別ページ用のリンクを作るものだし、faviconのほうは、<ul>タグのclassが”favilist”だったらその配下の<li>タグの中のリンクひとつひとつの前にfaviconを追加するというものだし、当たり前といえば当たり前。
というわけで、プラグインかfaviconize.jsを直さないと、という話になるのですが、今回は、faviconize.jsをちょっといじります。
22行目の下にこれを追加。
if (links[j].className == "newWin") {
continue;
}
プラグインのほうでは、外部リンクを”newWin”というクラスで生成するらしいので、そのクラス名が出てきたらスルーする、ということで。
何か微妙な実装の気がするけど、結果は、冒頭で紹介したとおり。
求める機能が2箇所に分かれてしまってるってのが、そもそもよくないって話だと思うんですけどね。
Via：
Comment Form
About this blog
ゆるーく、ふわーっと、興味のままに。
自分のかたわらに置いておくメモ代わり。
Photostream
Categories
- information (3)
- technology (59)
- Ruby / Rails (33)
- RubyMotion (1)
- JavaScript (2)
- Adobe AIR (1)
- Groovy / Grails (1)
- Subversion (3)
- Git (1)
- WordPress (11)
- Linux (3)
- Software (4)
- Mac (3)
- report (1)
- Fanny: It's amazing for me to have a web site, which is beneficial in support of my experience. thanks adm [...]
- Elke: Definitely consider that which you stated. Your favorite reason seemed to be on the internet the s [...]
- ?????????????: ??????????? ?? ??????????????????? ????? ?2019 ?????!?????????????????? ????????????,??????????? [...]
- _____ ___ ______: Everyone loves what you guys are upp too. This kind of clever work and reporting! Keeep up the sup [...]
- RRWXIVJGTARAV: Do you mind if I quote a few of your articles as long as I provide credit and sources back to your w [...]
2 Responses to 外部リンクをもっとわかりやすくしてみた
外部リンクがある時アイコンを表示するプラグイン「AutoExternalLink」 | マツリノアト
12月 28th, 2009 at 17:40:22
[...] 参考記事 リンクに、新しいウィンドウで開くためのアイコンを自動で追加(Wpプラグイン) | Numb. WordPress Plugins/JSeries ? AutoExternalLink (外部リンク用アイコン追加) 外部リンクをもっとわかりやすくしてみた | Katawara.* [...]
_____ ___ ______
1月 26th, 2019 at 11:36:11
Everyone loves what you guys are upp too. This kind
of clever work and reporting! Keeep up the superb works guys I’ve incorporated you
gus to myy personal blogroll.