外部リンクのアイコンをつける
・WordPressで外部リンクに専用のアイコンをつけたい。
・いろいろ調べたけど、CSSスタイルでアイコンをつける方法しか見つからない。
・CSSを書いたけど、シェアボタンにもアイコンが表示されてしまう。
今回は、以上の悩みを解決できる記事を作成しています。
ココがポイント
結論：
リンク設定専用のプラグイン「External Links-nofollow,noopener&new window」があります。
このプラグインは非常に便利で、
- 外部リンク、内部リンクへのアイコン付与ができる
- アイコンを付与したくないリンクの設定ができる（アイコンを個別に非表示にできる）
この二つの設定ができます。
設定さえできれば、後はリンクを張っていくだけ。
自動で外部リンクのアイコンがついていくので、それぞれのリンクを編集してアイコンをつけていく必要なしです。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
WordPressで記事を書いていると
単語の説明や、他のホームページへのリンクに「リンクの挿入」を使用されている方も多いと思います。
その作業の中で、外部へのリンクにアイコンを表示して、
区別できるようにしたいと考えていろいろ検索をされた方がほとんどではないでしょうか？
やっと見つけた。
そう思って、記事を確認してみると･･･
・CSSを書いてアイコンをつける方法だった。ちょっとむずかしい 。
・CSSは書くことができた。でもシェアにもが表示されてしまう。
・それぞれのリンクにclass属性を手で打ち込んでいく必要があるの？
こういった問題がでてきてしまったのではないでしょうか？
普通に書くだけでも一つの記事のなかにリンクはたくさんあります。
一つ一つのリンクを編集していると時間がすぐに過ぎてしまいます。
そこで今回、ご紹介するのが
「External Links-nofollow,noopener&new window」という
WordPressのプラグインです。
このプラグインでは、
- 外部リンクへのアイコンを自由に選べる。
- 内部リンクの設定もできる。
- 例外のURLを入力することで、シェアやフォローボタンに外部リンクのアイコンが出ないようになる。
- セキュリティー対策もとることができる
以上のカスタマイズができます。
それでは、このプラグインについて説明していこうと思います。
目次
1.「External Links-nofollow,noopener&new window」とは
「External Links-nofollow,noopener&new window」（今後「External Links」と略します）とは、
URLリンクへの細かな設定ができるWordPressのプラグインです。
このプラグインには「外部リンク」「内部リンク」「除外リンク」「例外」「管理者機能」をそれぞれ設定できるタブがあります。
今回、ご紹介するのは「外部リンク」「内部リンク」「例外」の3つになります。
2.「External Links-nofollow,noopener&new window」をインストール
WordPressの「プラグイン」から「新規追加」。
検索窓に「External Links」と入力。
検索候補の中から、ちょっと長いですが、「External Links-nofollow,noopener&new window」を見つけて「インストール」
その後「有効化」を忘れずにしておきます。
3.インストールができたら設定変更
3.Step1 設定変更ができるウィンドウへ
「External Links」は、他のプラグインとは違ってダッシュボードの「インストール済み」からは設定を変更できません。
ダッシュボードの左サイドメニュー欄の中に「外部リンク」という項目ができているので、そこから設定変更していきましょう。
3.Step2 「外部リンク」の設定
最初は「外部リンク」タブの内容を変更していきます。
まず、上から「外部リンク設定」のチェックボックスをチェック。
「外部リンクを開く」を「それぞれ別の新しいウィンドウまたはタブ」に変更。
（これでリンクをクリックすると、新しいウィンドウでリンク先を開いてくれるようになります）
その下の「既存の値を上書きします。」のチェックはお好みでOK。
「followまたはnofollowを設定」は「follow」に。
「follow」にしておけば、そのページの評価をリンク先に渡すことができます。
もっと詳しく
ここでも、「既存の値を上書きします。」のチェックはお好みでOK。
「rel属性の追加」はデフォルトのままでOK。
「rel属性」はリンク先の関係性を指定します。基本はその後にURL（ファイルの場所）が書かれるので、そのファイルの関係性を指定します。
| rel属性 | 意味 |
| noopener | 新しく開いたページからオブジェクトを使って元ページの操作をできなくすることができる値です。 |
| noreferrer | 参照先に対して参照元のリンクを渡さないようにできる値です。 |
どちらの設定もセキュリティを高めてくれるものなので、チェックを入れたままにしておきます。
はてな
「noopener」についてはこちらから：
「noreferrer」についてはこちらから：
「タイトルを設定」「CSSクラスを追加」はお好みで。
（自分で好きなCSSを作っているなら、設定しているclassを追加します）
「アイコンの種類を選択」ここはまようことなく、「Font Awesome」
（今回目的としているの外部リンクのアイコンを入れる設定になります）
もっと詳しく
「Font Awesome」とはWebで使用することのできるアイコン型のフォントです。
文字コードを貼り付けるだけで、アイコンになるので、みなさまも使ってみてはいかがでしょうか？
プルダウンから好きなアイコンを選択
「アイコンの位置」はお好みの場所へ
（リンクの前に付けるか後ろに付けるかを選べます）
<img>タグは図版を囲うときのタグになるので、
最後の「<img>でアイコンをスキップ」はチェックを入ったままでOK。
以上で、外部リンクの設定は終了です。お疲れ様でした。
3.Step3 「例外」タブでアイコンを表示しないURLを追加する
外部リンクの設定がおわったら、Web上でレイアウトを確認します。
今回は、自分のアカウントをフォローできるフォロー用アイコンと
シェア用アイコンに外部リンクのアイコンがついてしまっています。
そこで、「External Links」の設定の
「例外」タブの中にある「外部リンクから除外するURL」
ここにそれぞれのURLを「,（カンマ）」とその後ろに「改行」をいれて追加していきます。
フォロー用アイコンのURLは他の設定でそれぞれ登録したことがあると思います。
そこからまるまるコピーしてくればOK。
シェア用のアイコンに関しては、
Webページで「検証（I）」を使用して
それぞれのURLを確認します。
参考
<a href="○○○">で始まる部分を探し出します。
この中の○○○が今回必要となるURLになります。
やたら長いのですが、
先頭の値だけを入力してもよいみたいです。
下記に私がいれたURLを記述しておくので
それをまるまるコピーすれば外部リンクアイコンが消えてくれるとおもいます。
//www.facebook.com/, //b.hatena.ne.jp/, //line.me/
3.Step4 内部リンクも好みで変更
私は内部リンクも別ウィンドウで開く設定にしようと思います。
そこで、「内部リンク」タブにいき、「設定を適用」にチェックを入れる。「内部リンクを開く」を「それぞれの新しいウィンドウまたはタブ」に。
後は初期設定のままで、最下部の「変更を保存」ボタンをクリック。
以上になります。
4.PC閲覧時のみ内部リンクを別ウィンドウで開く
「3.Step4 内部リンクも好みで変更」で設定した、「内部リンクを開く」を「同じウィンドウ、タブ、フレーム」に変更。
「既存の値を上書きします。」にチェックを入れて、「変更を保存」をクリック。
後は、JavaScriptでPC閲覧を判別できるエリアに、「target」属性に「_blank」を追加するコードを書けばOKです。
もっと詳しく
まとめ
お疲れ様でした。
今回は、外部リンクにアイコンをつけるのにCSSを書かなくても済む、プラグインをご紹介させて頂きました。
ココがポイント
問題解決のステップ
- 「External Links-nofollow,noopener&new window」をインストール。
- 外部リンクの設定をする。
- アイコンが必要の無いURLを「例外」に登録。（←ここが一番大変）
以上になります。
このプラグインを使用することで、外部リンクに自動でアイコンがつくので、作業時間の短縮がさらにできるようになりますね。
ご一読いただきありがとうございました。
