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

リンクテキストのように見えてimg要素を含むリンクの場合の外部リンクアイコンの付与

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

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

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

外部リンクアイコンが一部表示されない問題

プラグインを使わずに、外部リンクのリンクテキストの前(または後ろ)にアイコン()をつけるスクリプトを作った。

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

この記事で解説している方法より、もっと良い解決策が見つかっています。 こちらの記事をどうぞ↓(2018.7.21追記) 以下の記事は参考までにご覧ください。 記事中のリンクテキストが外部サイトに飛ぶリ ...

続きを見る

しかし、ASP(アフィリエイト・サービス・プロバイダー)の提供する紹介リンクのテキストではうまくいかないことがある。

その例がこの下の囲内のリンクだ。どれも外部リンクなのに、一部、外部リンクであることを示すアイコン()がついてないのがわかると思う。

これはスクリプト自体に問題があるわけではない(はず)。プラグインの「WP External Links」等でも同じことが起こる。

一部のASPのリンクテキストはimg要素を含む

これは、紹介リンクのコードをよく見るとわかるが、テキストのように見えて実はリンクのa要素の内部
にimg要素(画像)が含まれているために起こる。

画像の横にアイコンがつくのは具合が悪いので、img要素を含むリンクにはアイコンをつけないようにしてあるので当然なのだった。

https://www.irasutoya.com

 

せっかく全自動化できたと思ったのに、これじゃ気持ち悪い。

じゃあ、どうするか。

うーん困った。

この一見リンクテキストに見えるリンクのコードに含まれるimg要素と、普通のimg要素を判別する条件があれば処理を分岐できると思うんだけど。思いつかない。
仕方ない。img要素を含む場合は、手作業でクラスをつけたspan要素で囲むことで凌ごう。全自動でやる方法をみつけました。こちらの記事でどうぞ。→全自動で外部リンクのテキストにアイコンがつくカスタマイズ(完全版)
以下は参考までにどうぞ。2018.7.21追記

スクリプトを修正

<span class="external"></span>で囲んだ場合にはアイコンを付けるように修正。
具体的には「,p span.external a」を付け加える。
コードの実装方法は前の記事を参照してください。→外部リンクのテキストに自動的にアイコンがつくようにするコピペOK!(AFFINGER5対応)

WordPress一般用

<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)),p span.external a')
		.not('[href*="'+location.hostname+'"]')
		.prepend('<i class="fas fa-external-link-alt"></i>');
});
</script>

AFFINGER5用

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

AddQuicktagに登録

プラグインのAddQuicktagを入れてるので<span class="external"></span>をボタンのラベルを「external-link」として登録しておく。

 

投稿時にマークアップ

これが必要なのはテキストのアフィリエイトリンクの時の一部だから、そんなに面倒ではないだろう。

リンクコードの手前でAddQuicktagで登録したボタンをクリック。

コードの後ろで再度クリック。

<span class="external"></span>でマークアップすればOK!

これでアイコンが表示された。

このサイトで利用しているASPを紹介(実際にそれぞれのASPにリンクしています)

A8.net
バリューコマース
アクセストレード
バナーブリッジ
もしもアフィリエイト

この記事で説明している方法よりも、良い解決策が見つかっています。
こちら↓

おすすめ記事

1

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

2

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

3

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

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

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