coding WordPress アフィリエイト ブログ

外部リンクのテキストに
自動的にアイコンがつくようにする
コピペOK!(AFFINGER5対応)

投稿日:2018年7月17日 更新日:

この記事で解説している方法より、もっと良い解決策が見つかっています。
こちらの記事をどうぞ↓(2018.7.21追記)


以下の記事は参考までにご覧ください。


記事中のリンクテキストが外部サイトに飛ぶリンクの場合、サイト内リンクと区別しやすくするためにつけるアレです。

リンクをクリックしたら外部サイトが開いて慌てることがあるのでわかりやすくしておいた方が親切かと。

WordPressならプラグインもあるけれども、できるだけプラグインを使いたくないんで。

意外とネット上に情報が少なかったので公開しておきます。

コピペすればOK

コードと実装方法

次のコード(テーマにAFFINGER5を使用している方は別のコードになりますのでこちらをご覧ください)をhead要素内に入れとけば終了です。</head>直前だと間違い無いと思います。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
jQuery(function() {
	jQuery('.entry-content p a[href^=http]:not(:has(img))')
		.not('[href*="'+location.hostname+'"]')
		.prepend('<i class="fas fa-external-link-alt"></i>');
});
</script>

WordPress なら、[外観]-[テーマの編集]で「header.php」を開いて、

</head>直前に貼り付けて、「ファイルを更新」すればOKと思います。

 

やっていること

Font Awesome を利用するための準備

アイコンには画像ではなく「Font Awesome」のアイコンフォントを利用しています。

Font Awesomeの本家サイトはこちらFont Awesome のサイト
Font Awesomeについてはこちらのサイトがくわしいです。→楽して便利!Webアイコンフォント『Font Awesome』の使い方と活用 Tips

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

1行目のlink要素でFont Awesomeを利用するために必要なスタイルシートを読み込んでいます(Use Font Awesome's Free CDN)。したがって既にサイトで Font Awesome を利用している場合には必要ありません。ただし、バージョンが異なるとうまくいきませんので確認してください。

jQueryの読み込み

要素を判定して自動でアイコンを配置するのにjQueryを利用しています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

この2行目でjQueryのライブラリを読み込んでいます。既にサイトにjQueryを導入済みならこれは必要ありません。なお、この例ではバージョンが「1.11.3」となっていますが、利用可能な任意のバージョンで大丈夫だと思います。

jQueryのスクリプト

3行目から9行目がjQueryのスクリプトです。

<script>
jQuery(function() {
	jQuery('.entry-content p a[href^=http]:not(:has(img))')
		.not('[href*="'+location.hostname+'"]')
		.prepend('<i class="fas fa-external-link-alt"></i>');
});
</script>

5行目からが処理の内容です。

	jQuery('.entry-content p a[href^=http]:not(:has(img))')

a[href^=http]で、href属性が「http」で始まるa要素(つまりリンク先URLが「http」で始まるa要素)を取得し、画像がリンクになっている場合を「:not(:has(img))」で除外します。また、先頭の「.entry-content p 」で、投稿記事の中のp要素に限定しておきます。

↑この方法だと、一見外部リンクのリンクテキストなのにアイコンがつかない場合が出てきます。一つは、リンク先が「//」で始まるURLになっている場合があってそれだとアイコンがつかないことになります。もう一つはアフィリエイトのリンクテキストの一部に、一見リンクテキストなのに、見えないimg要素(画像)を含んでいる場合があって、それにもアイコンがつかないことになります。この問題を回避する方法を見つけましたのでこちらの記事をご覧ください→全自動で外部リンクのテキストにアイコンがつくカスタマイズ(完全版)

自分の場合、アイコンをつけたいのは記事の文章中のリンクテキストで、それ以外の部分、アフィリエイトのリンクテキストとか、見出しとかにはアイコンをつけたくないので、「.entry-content p 」で限定しておけば思惑通りになります。

		.not('[href*="'+location.hostname+'"]')

で、href属性を自分のサイトのドメインを含んでいないものに限定することで内部リンクにhttpで始まるURLを用いている場合を除外します。

		.prepend('<i class="fas fa-external-link-alt"></i>');

で、指定した要素内の最初に<i class="fas fa-external-link-alt"></i>を挿入します。

<i class="fas fa-external-link-alt"></i>は、Font Awesome のフォントを表示させるためのコードです。

Font Awesome のサイトで使いたいアイコンを探して、コードをコピーすれば好きなフォントを使うことができます。(Pro版は年額$60ですがPro版でなければ無料で使えます)

 

AFFINGER5の場合

人気の有料WordPressテーマの一つ「WING(AFFINGER5)」の場合、jQueryおよび、Font Awesome は既にテーマに組み込まれているので、jQueryのスクリプトだけコピーすればOKです。

ただし、Font Awesome のバージョンが異なるので上記の例とは違うコードになります。

<script>
jQuery(function() {
	jQuery('.entry-content p a[href^=http]:not(:has(img))')
		.not('[href*="'+location.hostname+'"]')
		.prepend('<i style="vertical-align:middle;" class="fa fa-external-link fa-fw" aria-hidden="true"></i>');
});
</script>

デフォルトだと、字間が詰まった感じになるのでclassの属性値に「fa-fw」を追加しています。こうすると、アイコンに横幅がつきます。また、ちょっとベースラインが揃ってない感じがするのでstyle属性で「"vertical-align:middle;"」を追加しています。

[AFFINGER5 管理]の[その他]-「headに出力するコード」に貼り付けて保存します。

アイコンをテキストの後ろにしたい場合は、「.prepend」を「.append」にします。

ここで紹介した方法よりも優れていると思う完全版スクリプトはこちらの記事で。

おすすめ記事

1

「ビックカメラSuicaカード」は、SuicaおよびApple Payを利用している者にとって、是非とも持っておきたいカードであることはよく知られていると思います。 でも、その「ビックカメラSuica ...

2

長い間定説と思われていたことが、実は違っていましたということが往往にしてあるものだが、昨今の糖質制限ブームにまつわる事柄もその代表的なものだろう。

3

Apple Watchのおかげで心房細動が発見されて入院手術することになったことを以前の投稿でお伝えしたが、その手術も無事終了した。 病室のベッドの上でiPadに向かうことができるようになったので、こ ...

-coding, WordPress, アフィリエイト, ブログ

Copyright© 自炊自賛 , 2018 All Rights Reserved.