とっちゃん@nyanco! です。
今回は、WordPressのテーマ「Cocoon」で、外部リンクに自動で「_blank」と「アイコン」をつける備忘録です。
※「Cocoon」ユーザーに向けた記事ですが、他テーマでも「font awesome5」を読み込めば同じように実装できると思います。
外部リンクに「_blank」と「アイコン」をつける理由
外部リンクに「_blank」をつける理由は、シンプルにサイトからの離脱を防ぐという意味でのSEO対策です。
「アイコン」は「」←こんなやつで、「このリンク先は別サイトになりますよ」の意味を表すものです。ユーザビリティ向上が目的ですね。
（ただ、このアイコンの意味を理解している人はあんまりいないような印象ですが…）
プラグインを使えば簡単に実装できるみたいですが、今回は「functions.php」にコードを追記する方法で実装しました。
プラグインは便利ですが、あまり多用し過ぎるとワードプレス全体が重くなるし、プラグインの更新が止まるなど突然使えなくなるリスクもあるので、使わないで済む場合は使わないという方針でやってます。
やりたいこと
・前提：テーマは「Cocoon」を使用（Cocoon以外のテーマでもいけるはず）
・サイト内の外部リンク全てに「target=”_blank”」をつけて別タブで開くようにしたい
・サイト内の外部リンク全てに外部リンクであると分かるようにアイコン（font awesome）をつけたい
・プラグインは不使用
参考にした主な記事
やり方
「Cocoon」で「Font Awesome5」を使えるようにする
まずはテーマ「Cocoon」の設定で「Font Awesome5」を使えるようにしておきます。
「Cocoon」以外のテーマを使用している場合、テーマによってやり方は異なりますが「Font Awesome5」の読み込みさえできればOKです。
WordPress管理画面左メニュー「Cocoon設定」の「全体」→「サイトアイコンフォント」で「Font Awesome5」を選択します。
これで「Font Awesome5」が使えるようになりました。
「functions.php」にコードを記述
テーマの「functions.php」に下記サイト様のコードをコピーペーストします。
コメントアウトや数字を変えるだけで色々とカスタムができるという、超素敵コードです。
このようなコードを公開していただきありがとうございます～！！
これで、外部リンクはもう別タブで開くようになっているはずです。
「アイコン」をつけるため、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対策の一つとしていかがでしょうか？
本記事がどなたかの参考になれば幸いです。
今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧
コメント