WordPressサイトに外部リンクアイコンを自動表示する方法

Webサイトには、自分のサイト内のページだけでなく、外部の別サイト（ページ）へのリンクも設置します。これが「外部リンク」です。

外部リンクを設置するときは、ユーザーが別のサイトに移動することを示すため、視覚的にわかりやすくしておくと親切です。

そこで今回は、WordPressサイトに外部リンクアイコンを自動表示する方法を解説します。

外部リンクかどうかを自動で判別してくれるので、リンクごとに設定を変更する手間を省けます。CSSのみでできる方法と、プラグインを使う方法を紹介するので、ぜひ参考にしてください。

なぜ外部リンクにアイコンを付けるの？
CSSだけで外部リンクにアイコンを自動表示する方法
- CSSのコード例
プラグインで外部リンクにアイコンを表示する方法
- WP External Linksの特徴
- 設定方法
まとめ

WordPressテーマ「PANDORA」

レイアウト自由自在なブログ・メディアを構築。

デモサイト

ダウンロード

なぜ外部リンクにアイコンを付けるの？

「このリンクをクリックしたら、外部サイトに移動する」ということをユーザーに伝えるためです。

たとえば、次の例。

株式会社デザインプラスの公式サイト

リンクの右側に表示されるアイコンをつけることで、外部の別サイト（TCD運営元の企業サイト）にリンクすることが伝わりやすくなります。

視覚的なサインがあることで、ユーザーはリンク先が別サイトであることを事前に把握でき、混乱や不安を感じにくくなります。

特に、参照元やアフィリエイトリンクなどで「この先は外部ですよ」という印があると親切ですね。

CSSだけで外部リンクにアイコンを自動表示する方法

CSSだけでも、特定の条件を満たすリンクに対して、自動で外部リンク用のアイコンを表示できます。

疑似クラスを使って「外部リンクかどうか」を判別する仕組みです。HTMLを変更せずに済むので、既存の記事や投稿にも反映させやすいのがメリットです。

WordPressテーマによっては多少の調整が必要になる場合もありますが、基本的な考え方はどのサイトにも応用いただけます。

CSSのコード例

たとえば、次のように書くことで「http または https で始まる外部リンクかつ、同一ドメイン以外のリンク」に対してスタイルを適用できます。

a[href^="http"]:not([href*="your-site.com"])::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.25em;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3Cpath d='M5 5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7H5V5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

your-site.com部分は、あなたのサイトのドメインに合わせて適宜変更してください。your-site.comを含まないリンクを外部と見なし、アイコンを表示します。

上記例では、Googleマテリアルアイコンの「Open In new」を表示しています。