Wordpress

外部リンクにアイコンを表示する超簡単な方法【WordPress】【External Links】

  1. HOME >
  2. Wordpress >

外部リンクにアイコンを表示する超簡単な方法【WordPress】【External Links】

外部リンクのアイコンをつけるプラグイン

外部リンクのアイコンをつける


・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」をインストール

External Links_start

External Linksインストール

WordPressの「プラグイン」から「新規追加」。

検索窓に「External Links」と入力。

検索候補の中から、ちょっと長いですが、「External Links-nofollow,noopener&new window」を見つけて「インストール」
その後「有効化」を忘れずにしておきます。

 

3.インストールができたら設定変更

3.Step1 設定変更ができるウィンドウへ

外部リンク設定

「External Links」は、他のプラグインとは違ってダッシュボードの「インストール済み」からは設定を変更できません。

ダッシュボードの左サイドメニュー欄の中に「外部リンク」という項目ができているので、そこから設定変更していきましょう。

 

3.Step2 「外部リンク」の設定

外部リンク設定1

最初は「外部リンク」タブの内容を変更していきます。

まず、上から「外部リンク設定」のチェックボックスをチェック。

「外部リンクを開く」を「それぞれ別の新しいウィンドウまたはタブ」に変更。
(これでリンクをクリックすると、新しいウィンドウでリンク先を開いてくれるようになります)

その下の「既存の値を上書きします。」のチェックはお好みでOK。

 

外部リンク設定2

「followまたはnofollowを設定」は「follow」に。
「follow」にしておけば、そのページの評価をリンク先に渡すことができます。

もっと詳しく

ここでも、「既存の値を上書きします。」のチェックはお好みでOK。

 

外部リンク設定3_デフォルトのままでOK

rel属性の追加」はデフォルトのままでOK。
「rel属性」はリンク先の関係性を指定します。基本はその後にURL(ファイルの場所)が書かれるので、そのファイルの関係性を指定します。

rel属性 意味
noopener 新しく開いたページからオブジェクトを使って元ページの操作をできなくすることができる値です。
noreferrer 参照先に対して参照元のリンクを渡さないようにできる値です。

 

どちらの設定もセキュリティを高めてくれるものなので、チェックを入れたままにしておきます。

 

外部リンク設定3-1

「タイトルを設定」「CSSクラスを追加」はお好みで。
(自分で好きなCSSを作っているなら、設定しているclassを追加します)

 

外部リンク設定4_迷わず「FontAwesome」  外部リンク設定5_スクロールして目的のアイコンへ

「アイコンの種類を選択」ここはまようことなく、「Font Awesome」
(今回目的としているの外部リンクのアイコンを入れる設定になります)

もっと詳しく

プルダウンから好きなアイコンを選択

 

外部リンク設定6

「アイコンの位置」はお好みの場所へ
(リンクの前に付けるか後ろに付けるかを選べます)

<img>タグは図版を囲うときのタグになるので、
最後の「<img>でアイコンをスキップ」はチェックを入ったままでOK。

以上で、外部リンクの設定は終了です。お疲れ様でした。

3.Step3 「例外」タブでアイコンを表示しないURLを追加する

外部リンク設定8_Web上で確認不要なところにでてるのは例外で変更

外部リンクの設定がおわったら、Web上でレイアウトを確認します。
今回は、自分のアカウントをフォローできるフォロー用アイコンと
シェア用アイコンに外部リンクのアイコンがついてしまっています。

 

外部リンク設定9_例外

そこで、「External Links」の設定の
「例外」タブの中にある「外部リンクから除外するURL」
ここにそれぞれのURLを「,(カンマ)」とその後ろに「改行」をいれて追加していきます。

フォロー用アイコンのURLは他の設定でそれぞれ登録したことがあると思います。
そこからまるまるコピーしてくればOK。

 

外部リンク設定12_シェアーアイコンはURL長いでも最初の方だけでアイコン消えるみたいです

シェア用のアイコンに関しては、
Webページで「検証(I)」を使用して
それぞれのURLを確認します。

<a href="○○○">で始まる部分を探し出します。
この中の○○○が今回必要となるURLになります。

 

外部リンク設定13_最終的に書いたシェアーアイコンのURL

やたら長いのですが、
先頭の値だけを入力してもよいみたいです。
下記に私がいれたURLを記述しておくので
それをまるまるコピーすれば外部リンクアイコンが消えてくれるとおもいます。

//www.facebook.com/,
//b.hatena.ne.jp/,
//line.me/

 

外部リンク設定11_アイコンが取れた

 

3.Step4 内部リンクも好みで変更

内部リンクも別ウィンドウで開くに好みで

私は内部リンクも別ウィンドウで開く設定にしようと思います。
そこで、「内部リンク」タブにいき、「設定を適用」にチェックを入れる。「内部リンクを開く」を「それぞれの新しいウィンドウまたはタブ」に。
後は初期設定のままで、最下部の「変更を保存」ボタンをクリック。

以上になります。

 

4.PC閲覧時のみ内部リンクを別ウィンドウで開く

内部リンク設定変更

3.Step4 内部リンクも好みで変更」で設定した、「内部リンクを開く」を「同じウィンドウ、タブ、フレーム」に変更。
「既存の値を上書きします。」にチェックを入れて、「変更を保存」をクリック。

後は、JavaScriptでPC閲覧を判別できるエリアに、「target」属性に「_blank」を追加するコードを書けばOKです。

もっと詳しく

 

まとめ

お疲れ様でした。

今回は、外部リンクにアイコンをつけるのにCSSを書かなくても済む、プラグインをご紹介させて頂きました。

ココがポイント

問題解決のステップ

  1. 「External Links-nofollow,noopener&new window」をインストール。
  2. 外部リンクの設定をする。
  3. アイコンが必要の無いURLを「例外」に登録。(←ここが一番大変)

以上になります。

このプラグインを使用することで、外部リンクに自動でアイコンがつくので、作業時間の短縮がさらにできるようになりますね。

ご一読いただきありがとうございました。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.