外部リンクにアイコンをつける – WordPress

やること

記事内のリンクが外部リンクだったら、そのリンクのお尻に外部リンクアイコンをつける。

方法

WordPress管理画面>外観>テーマエディタ
から、header.php を編集しました。

<?php wp_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*="//"]').not('[href*="'+location.hostname+'"]').each(function(){
        if(jQuery(this).text() !== ""){
            jQuery(this).append('<i class="fas fa-external-link-square-alt"></i>');
        }
    })
});
</script>
<!-- END -->

こちらは私が実際に入れたコードです。コードの内容・詳細は、参考にした記事で詳しく解説してくださっているので、そちらをご覧ください。

変更箇所

私は、参考にした記事で紹介されているコードの、8行目のこちらの部分を変更しています。

jQuery(this).append('<i class="fas fa-external-link-square-alt"></i>');

prependとappend

リンクの後にアイコンをつけたい場合は「.prepend()」、前につけたい場合は「.append()」を使えばいいらしく、私は後につけたかったので、「.prepend()」を使っています。

別のFont Awesomeアイコンに

参考にした記事で使用していたFont Awesomeのアイコンは「fa-external-link-alt」というアイコンでしたが、私は「external-link-square-alt」というアイコンにしました↓

https://fontawesome.com/icons/external-link-square-alt

カスタムCSS

また、見た目を整えるため、以下のCSSをWordPress テーマのカスタムCSS欄に追加しました。

/* 外部リンクアイコン */
i.fas.fa-external-link-square-alt{
 font-size: .9em;
 margin: 0 .3em;
}

アイコンの大きさを少し小さくし、左右の空間を開けています。

追記(FontAwesomeバージョン変更)

上記の方法だと、私が使ってるWordPressテーマ「MH Magazine」のFont Awesomeのバージョンと相容れず、テーマのカスタマイズで設定したFont Awesomeアイコンが表示されなくなったので、急遽修正。

読み込むFont Awesomeバージョンが違うと、アイコンを呼び出すクラス名も違ってくるため、アイコンが表示されなくなってしまうことがよくある。今回、Font Awesome v4.7.0のクラス名を試しに使用してみると、私のテーマでもアイコンが呼び出せた。

呼び出したFont Awesomeアイコン

https://fontawesome.com/v4.7.0/icon/external-link-square

header.phpに追加した箇所

<!-- 外部リンクにアイコンつける -->
<script>
    jQuery(function(){
        jQuery('.entry-content p a[href*="//"]').not('[href*="'+location.hostname+'"]').each(function(){
            if(jQuery(this).text() !== ""){
                jQuery(this).append('<i class="fa fa-external-link-square" aria-hidden="true"></i>');
            }
        })
    });
 </script>
 <!-- END -->

CSS

クラス名が変わったので、CSSも修正。

/* 外部リンクアイコン */
 i.fa.fa-external-link-square{
 font-size: .9em;
 margin: 0 .3em;
}

さらに追記(CSSだけで実装)

上記はCSSだけでもできると先輩に教えてもらいました。

外部リンクにアイコン付けるだけならCSSのみでもできるかも?
すでに知ってそうではあるね…
でもjQueryでDOM要素をループさせるとレンダリングに時間掛かっちゃう気がして!

知りませんでした (^q^)

CSS修正

header.php に追加したコードを消し、カスタムCSSに追加したコードを修正。

/* 外部リンクアイコン */
.entry-content p a:not([href^="https://kbnt.xyz/"]):after{
 font-family: FontAwesome;
 content: "\f14c";
 font-size: .9em;
 margin: 0 .3em;
}

.entry-content で記事内限定、目次等に付加されぬよう p をつけてます。(自分用メモ)
Font Awesomeのアイコンは上でも呼んでいたコレをUnicodeで呼んできてます。(自分用メモ)

CSS多機能すぎてもう置いてけぼり\(^o^)/

参考記事

ADS