外部リンクをもっとわかりやすくしてみた

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:


2 Responses to 外部リンクをもっとわかりやすくしてみた

Avatar

外部リンクがある時アイコンを表示するプラグイン「AutoExternalLink」 | マツリノアト

12月 28th, 2009 at 17:40:22

[...] 参考記事 リンクに、新しいウィンドウで開くためのアイコンを自動で追加(Wpプラグイン) | Numb. WordPress Plugins/JSeries ? AutoExternalLink (外部リンク用アイコン追加) 外部リンクをもっとわかりやすくしてみた | Katawara.* [...]

Avatar

_____ ___ ______

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.

Comment Form

About this blog

ゆるーく、ふわーっと、興味のままに。

自分のかたわらに置いておくメモ代わり。

Photostream