WPのプラグインを使わずに、外部リンク末尾に矢印アイコンを付ける

WPのプラグインを使わずに、外部リンク末尾に矢印アイコンを付ける方法を調べました。
よく使われているプラグインはWP External Links (nofollow new tab seo)ですが、
プラグインも使い過ぎるとサイト全体が重くなる原因となりますし、この位の設定なら使わないほうがよいかなと思ったのでした。

今回は設定の方法は外部リンクに矢印アイコンを付けてユーザーに分かりやすくしよう | iscle [イズクル]さま の記事をありがたく参考にさせていただきました。

カスタマイズ方法

【functions.php】

// 外部リンク末尾にアイコンを付ける
add_filter( 'the_content', 'add_external_content', 12 );
function add_external_content( $content ) {
$add_img = 0; // img（画像での外部リンク）にもアイコン付ける場合 1 付けない場合 0
preg_match_all( "/<a[^>]+?href[^>]+?>/i", $content, $link_array );

$my_url = preg_quote( rtrim( get_bloginfo("url"), "/" ) . "/", "/" );

foreach( array_unique( $link_array[0] ) as $link ) {
$replaced = $link;

if( !preg_match( "/href=['|\"]?\s*?${my_url}[^>]+?['|\"]/i", $link ) ) {
$replaced = str_replace( ">", " class=\"external ext_icon\">", $replaced );
$content = str_replace( $link, $replaced, $content );
if( !$add_img ) {
// img の時はアイコン消す（class="external" は残す）
$content = preg_replace(
"/(<a[^>]+?href[^>]+?external) ext_icon([^>]+?>\s*?<\s*?img[^>]+?src[^>]+?>\s*?<\/a>)/is",
"$1$2",
$content
);
}
}
}
return $content;
}

【css】

/*外部リンクにアイコンを付ける*/
a.ext_icon {
background: url(/wp-content/images/linkout.png) center right no-repeat;
padding: 0 19px 0 4px;
}

【img】
14*14px程度の画像アイコンを任意に制作、追加

linkout.png

以上です。

ちなみに自分のブログ内のリンクはtarget=”_blank”を付けず同じタブで移動させ、
外部へリンクさせる場合にtarget=”_blank”を付け、新しいタブで開くのが望ましいとされています。