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 外部リンクをもっとわかりやすくしてみた
外部リンクがある時アイコンを表示するプラグイン「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.