WebLabyrinth site image

WebLabyrinthWebに関する様々なメモや個人的実験を行うサイトです

Navi box open

外部リンクとプラグインとnofollow

WordPressで外部リンクを記事に埋め込むときには、標準的にビジュアルエディタでリンク先を設定し、Add linkを行いますが、「リンクを新ウィンドウまたはタブで開く」にチェックを入れてしまうと、htmlのソースに「_blank」が追加されてしまうのであまりスマートではありません。
しかしながら、チェックを入れないと新しいウインドウ(タブ)で開いてくれないため、プラグインを使用して対応してみました。
また、外部リンクを行うときに、「rel=”nofollow”」も自動的に埋め込んでくれるプラグインを同時に導入してみました。

※現在プラグイン「Auto External Link」は使用していません。

Auto External Link のインストール

AutoExternalLink | WordPress Plugins/JSeries

このプラグインは、リンクのアドレスより内部リンクなのか外部リンクなのかを自動で判断し、新ウインドウでページを開くアイコンを追加してくれるプラグインです。
インストール方法はダウンロードしたプラグインをアップロードし、管理画面から有効化すればOKです。

プラグイン編集から設定

AutoExternalLink.js の中に諸設定を行う項目があるのでそちらを編集して保存します。

openType
1にすると「target=”_blank”」扱いになり、2なら「window.open」になります。
タブブラウザであれば、2に設定すると、タブで開かずに新しいウインドウになってしまいますので、ここでは “1” と設定しています。
これだと当初の目的の意味がなくなってしまうのでは?と言われそうですが、htmlソース上で「target=”_blank”」と記述されず、あくまでJavaScript上で動作しているようなので、この設定で良しとしています。

checkArea
プラグインを適用させる範囲です。記事内の外部リンクに適応させたいので、ここでは checkArea = ‘content’; と設定してみました。記事以外のガジェット等にアイコンが追加されることによる、レイアウトの崩れの発生を防ぐためです。

exclusionStr
Arrayで設定し、ここに記述した文字列が含まれたアドレスは、このプラグインを適用させないようにすることが可能です。
ここでは自分のサイトのアドレスを入力し、new Array(‘http://groove.holy.jp/’,’groove.holy.jp’,’javascript’); としています。

anchorObject
リンクに追加する文字列はここで入力します。
ここでは、デフォルトからあまり変更せずに、anchorObject = ‘<img src=”my-page-url /plugins/AutoExternalLink/external2-gray.gif” width=”12″ height=”11″ alt=”open new window” title=”open new window” />’; としました。

これで、「target=”_blank”」を使用せずに新しいウインドウ(タブ)で外部リンクを開くことが可能になりました。お次は「rel=”nofollow”」です。

External Links のインストール

nofollow – WordPressプラグイン一覧情報

上記サイトを参考にしてみました。
このプラグインも「Auto External Link」と同様に、外部リンクにアイコンを自動で付けることが出来る機能を有していますが、このプラグインで使用するのは当サイトでは「rel=”nofollow”」を付ける機能だけを使用することになります。

これも他のプラグインと同様にファイルをアップロードして有効化でOKです。
次は設定です。

Apply Globally
Apply these settings to all outbound links, including those in sidebars, rather than to those in posts and comments.

チェックを付けるとサイト内全体にプラグインを適用させます。外すと投稿記事内だけに適用されます。
当サイトではチェックを外してみました。

Add Icons
Mark outbound links with an icon.
Note: You can override this behavior by adding a to individual links.

チェックを付けるとリンクにアイコンを追加します。この機能は別のプラグインで行っているので、ここではチェックを入れません。

Add No Follow
Add a rel=nofollow attribute to outbound links.
Note: You can override this behavior by adding a rel=”follow” to individual links.

チェックを付けると外部リンクに「rel=”nofollow”」を追加します。この機能が目的なので、チェックを入れます。

Open in New Windows
Open outbound links in new windows.
Note: Some usability experts discourage this, claiming that this can damage your visitors’ trust towards your site. Others highlight that computer-illiterate users do not always know how to use the back button, and encourage the practice for that reason.

チェックを付けると外部リンクに「target=”_blank”」を追加します。ここはチェックを外します。

以上でプラグインの設定は終了です。この状態で、Add linkをするときに注意ですが、エディタにある「リンクを新ウインドウまたはタブで開く」にチェックは入れないでAdd linkを行います。そうすることによってWordpress上で外部サイトは自動的にリンクテキストの隣に、新ウインドウ(タブ)でリンクを開くアイコンが追加されるようになります。

リンクの挿入

こんな感じに表示されます

外部リンク

リンクテキストを直接押した場合と、隣に表示されるアイコンを押した場合のそれぞれの動作を確認してみてください。また、ソース部分にも「target=”_blank”」が含まれていないことも確認できるかと思います。

この記事を書いた人

ニックネーム: SHIBAZAKI
ブログ: https://weblabyrinth.net

北海道旭川市でweb関係のお仕事をしています。

Trackback URL

https://weblabyrinth.net/%e5%a4%96%e9%83%a8%e3%83%aa%e3%83%b3%e3%82%af%e3%81%a8%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%81%a8nofollow/trackback/

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

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