【WordPress】Cocoonで外部リンクに自動で「_blank」と「アイコン」をつける

ブログ
この記事は約4分で読めます。

とっちゃん@nyanco! です。

今回は、WordPressのテーマ「Cocoon」で、外部リンクに自動で「_blank」と「アイコン」をつける備忘録です。

※「Cocoon」ユーザーに向けた記事ですが、他テーマでも「font awesome5」を読み込めば同じように実装できると思います。

スポンサーリンク

外部リンクに「_blank」と「アイコン」をつける理由

外部リンクに「_blank」をつける理由は、シンプルにサイトからの離脱を防ぐという意味でのSEO対策です。

「アイコン」は「」←こんなやつで、「このリンク先は別サイトになりますよ」の意味を表すものです。ユーザビリティ向上が目的ですね。

(ただ、このアイコンの意味を理解している人はあんまりいないような印象ですが…)

プラグインを使えば簡単に実装できるみたいですが、今回は「functions.php」にコードを追記する方法で実装しました。

プラグインは便利ですが、あまり多用し過ぎるとワードプレス全体が重くなるし、プラグインの更新が止まるなど突然使えなくなるリスクもあるので、使わないで済む場合は使わないという方針でやってます。

やりたいこと

前提:テーマは「Cocoon」を使用(Cocoon以外のテーマでもいけるはず)
・サイト内の外部リンク全てに「target=”_blank”」をつけて別タブで開くようにしたい
・サイト内の外部リンク全てに外部リンクであると分かるようにアイコン(font awesome)をつけたい
・プラグインは不使用

参考にした主な記事

Font Awesome5を利用する方法
サイトで利用されているアイコンフォントをFont Awesome5に変更したり、Font Awesome4に戻したりする方法です。
【Cocoon】Font Awesome 4から5へ変更する前に注意すべきこと
2019年11月14日に無料WordPressテーマ「Cocoon」のバージョンが2.0.0になり、多くのブロックエディター機能が強化されました。そして今回のアップデートでFont Awesome 5が漸く公式から使用できるように用意されま

やり方

「Cocoon」で「Font Awesome5」を使えるようにする

まずはテーマ「Cocoon」の設定で「Font Awesome5」を使えるようにしておきます。

「Cocoon」以外のテーマを使用している場合、テーマによってやり方は異なりますが「Font Awesome5」の読み込みさえできればOKです。

WordPress管理画面左メニュー「Cocoon設定」の「全体」→「サイトアイコンフォント」で「Font Awesome5」を選択します。

「サイトアイコンフォント」がメニューに見当たらない時は、Cocoon本体(親テーマ)のバージョンが低い可能性があるのでWordPress管理画面左メニュー「外観」→「テーマ」からバージョンアップがないか確認しましょう。2020/2/29現在で確認できたバージョンは2.1.1.1でした。

これで「Font Awesome5」が使えるようになりました。

「functions.php」にコードを記述

テーマの「functions.php」に下記サイト様のコードをコピーペーストします。

作業用メモ:WordPressでプラグイン使わず外部リンクにnofollow tareget="_blank" アイコンを付ける - TOKYOからOKINAWAに移住したHOMME
作業用メモ

コメントアウトや数字を変えるだけで色々とカスタムができるという、超素敵コードです。

このようなコードを公開していただきありがとうございます~!!

これで、外部リンクはもう別タブで開くようになっているはずです。

「アイコン」をつけるため、CSSにコードを記述

仕上げに外部リンクであると分かるように、リンクテキストの前にアイコンを表示させるため、CSSにコードを追記します。

a.ext_icon:before{ /* リンクテキストの後ろにアイコン入れたいなら before を after に */
font-family: "Font Awesome 5 Free"; /* font awesomeを指定 */
content: "\f35d"; /* 外部リンクを示すアイコンを指定 */
font-size: 110%; /* アイコンのサイズを指定 */
padding: 0 3px; /* アイコンとリンクテキストの余白を指定 */
display:inline-block; /* アイコンの下線を削除 */
}

▼こんな感じで外部リンクにアイコンが表示されたらOKです!

ちなみに「アイコンの下線を削除」の記述をしないとこんな感じに下線がちょろっとだけ残ります。

アイコンのサイズや余白なんかはお好みで調整してください♪

おわりに

本ブログのように雑記ブログだと、そもそもサイト内を回遊してもらうのは難しいですが、ジャンル特化ブログなんかは設定必須かと思います。

サクッとできるSEO対策の一つとしていかがでしょうか?

本記事がどなたかの参考になれば幸いです。

今回は以上となります。
最後まで読んでいただきましてありがとうございました!
それではまた〜✧٩(ˊωˋ*)و✧

コメント