やること
記事内のリンクが外部リンクだったら、そのリンクのお尻に外部リンクアイコンをつける。
方法
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 -->こちらは私が実際に入れたコードです。コードの内容・詳細は、参考にした記事で詳しく解説してくださっているので、そちらをご覧ください。
変更箇所
私は、参考にした記事で紹介されているコードの、８行目のこちらの部分を変更しています。
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^)／
コメント