[WordPress]外部リンクに自動でアイコンをつける「External Links」プラグイン
2017/02/01
こんにちは、okutani(@okutani_t)です。サイトを運営していると、ちょこちょこ外部サイトのリンクを紹介したいときがありますよね。
その際に、外部リンク横にアイコンをつけて「このリンクは外部リンクですよ」とわかるようにしてくれるのが「External Links」プラグインです。
このプラグインはとてもかんたんに設置できるので、本記事の設定でサクッと導入しておくと便利です。
では、さっそくExternal Linksプラグインの導入方法を見ていきましょう。
スポンサーリンク
External Linksの導入
まずはExternal Linksをインストールしましょう。
ダッシュボードから「プラグイン」→「新規追加」を選択します。
右上の検索バーに「External Links」と入力して検索、「いますぐインストール」をクリックします。
インストールが完了したら「プラグインを有効化」をクリック。
これでExternal Linksの導入が完了しました。
External Linksの設定
ではExternal Linksの設定をおこないましょう。ダッシュボードから「設定」→「External Links」で設定画面を開きます。
設定項目を見ていきましょう。
それぞれの項目は下記の通りです。
- Apply Globally
- Apply to Text Widgets
- Treat Subdomains as Local
- Auto Convert Text Urls
- Add No Follow
全ての外部リンクを対象とする。チェックしませんでした
テキストの外部リンクを対象とする。チェックしておきます
複数のサイトを運営している場合に、サブドメインのサイトをローカルとして設定できる。例えば「domain.com」と「store.domain.com」を両方運営していて、後者のサイトのリンクは外部ページではなく内部のページとして扱える。この箇所は任意で設定しましょう
自動でリンクの形をしたテキストにaタグを付けてリンクにする。チェックしませんでした
次の章で細かく説明
nofollowとは？
上記の設定項目の「Add No Follow」について説明していきます。
nofollowはリンクの属性として設定でき、nofollowはかんたんに説明すると「うちのサイトと紹介したサイトは関係ないよ」ということを検索エンジンに知らせるものです。
例えば、
<a href="http://example.com" rel="nofollow">外部サイトです</a>のようにnofollowを設定すると、検索エンジンが自分のサイトを辿ったときに、nofollowのリンク以降は辿らないように設定できます。
リンクを貼ることは、相手のサイトを評価することに繋がります。外部リンク先がスパム等のサイトであった時、検索エンジンの自分のサイトへの評価が落ちてしまいます。
例では、aタグにrelをつけてnofollowを設定しましたが、External Linksプラグインでは該当箇所にチェックをいれるだけで有効化されます。
今回の場合、「Add No Follow」は運営するサイトに合わせてチェックを入れてください。外部リンク先が信用できないサイトが多い場合はチェックを入れておいた方が良いでしょう。
では、残りの設定項目に戻ります。
- Add Icons
- Domains to Exclude
外部リンクの隣にアイコンを表示させます。「Open in New Windows」は外部リンクを開いた時に別窓で開いてくれます。外部サイトを別窓で開くと、自分のサイトに戻ってきやすくなって便利です。チェックしておきましょう。
上記設定を反映させないドメインを設定出来ます。必要に応じて入力しましょう。
全ての設定が終わったら「save Changes」ボタンを忘れずに。
アイコンの設置確認
ちゃんと設定が反映されているか確認してみましょう。
外部サイトであるGoogleのリンクを貼ると、右隣に外部サイトを示すアイコンが表示されました。リンクをクリックすると別窓で開いてくれます。
ちなみに、任意のリンクだけアイコンを表示させたくない場合は、aタグに「class=”no_icon”」を設定することで非表示にできます。参考にしてください。
外部アイコン画像を変更したい場合
外部アイコンの画像の変更方法は、ブログ「ぐうたら主婦が色々勉強中」さんで紹介されていましたので、そちらを参考にしてみてください。
参考【プラグイン】「External Links」で外部リンクのアイコンを付ける＆アイコンの変更方法
下記にある「external.png」を任意の画像に変更してあげればOKだそうです。
/wp-content/plugins/sem-external-links/external.png紺さん(@kon_guutara)ありがとうございました。
まとめ
External Linksプラグインを使うことで、手軽に外部リンクにアイコンを付けることができました。
ちなみに、外部リンクを別窓で開く設定はWordPress側でも設定できるので、毎回手動でおこないたい人はチェックを外すと良いかと思います。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
