ふと、記事内の外部リンクに外部リンクであることを示すアイコンを付けたいと思いました。
今まで意識したことは無かったのですが、アイコンがあった方がリンクであることがより明確になるメリットがあるのでは？と思ったからです。
この記事では、プラグイン未使用で外部リンクにアイコンを付けるカスタマイズをご紹介します。
こんな感じで表示されます。
例：Googleに嫌われる確実な方法
外部リンクの判定は以下の記事にあるようにPHPでも行うことができますが、この記事ではプラグインやPHPカスタマイズを行わない方法をご紹介します。
SWELLで外部リンクにアイコンを付けるカスタマイズ
プラグインを使う
外部リンクにアイコンを付けるカスタマイズはテーマにその機能が無い場合、プラグインを使う方法が一般的です。
javascriptを使う
プラグインを使わない場合でも、jQueryを使った方法があります。
<script>
jQuery(function(){
jQuery('.entry-content p a[href*="//"]').not('[href*="'+location.hostname+'"]').each(function(){
if(jQuery(this).text() !== ""){
jQuery(this).prepend('<i style="vertical-align:middle;" class="fa fa-external-link fa-fw" aria-hidden="true"></i>');
}
})
});
</script>SWELLはプラグインを追加せずに使えるテーマと言うのが売りですので、SWELLユーザーは、追加のプラグインもjQueryも使いたくは無いでしょう。
上記のコードをvanilla jsに書き換えたコードが以下になります。
document.addEventListener('DOMContentLoaded', function(){
const links = document.querySelectorAll('.entry-content p a[href*="//"]:not([href*="'+location.hostname+'"])');
links.forEach(function(link){
if(link.textContent !== ""){
const icon = document.createElement('i');
icon.style.verticalAlign = "middle";
icon.classList.add("fa", "fa-external-link", "fa-fw");
link.insertBefore(icon, link.firstChild);
}
});
});
上記のコードでは、DOMContentLoadedイベントを使用してDOMの読み込みが完了した後に実行されるようになっています。また、querySelectorAllメソッドを使用して、条件を満たすすべてのリンク要素を取得し、forEachメソッドを使用してそれぞれに対して処理を行っています。
また、リンクのテキストが空でない場合にアイコンを追加するようにし、アイコンの作成にはcreateElementメソッドを使用しています。そして、insertBeforeメソッドを使用してアイコンをリンクの最初の子要素として追加しています。
CSSのみでSWELLでも外部リンクにアイコンを付けるカスタマイズ
wp_nav_menuのリンクにclassを追加する
前準備として、wp_nav_menuのリンクにclassを追加しておきます。
外部リンクにアイコンを追加するCSSを追加
外部リンクの判定は、PHPではなくCSSだけで行います。
考え方としては、すべてのリンクにアイコンを設定し、その後、内部リンクやアイコンを表示したくないリンクについてはアイコンを表示しないようにします。
サイトのURLは適宜変更のこと。
SVGアイコンの色はfill='%231176d4の部分を変更します。%23は#のことです。
a[href^="http"]:after,
a[href^="//"]:after{
margin: 0 3px 0 3px;
display: inline-block;
width: .85rem;
height: .85rem;
content:"";
background-position:0px 1px;
background-repeat:no-repeat;
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%231176d4'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M288 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h50.7L169.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L384 141.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H288zM80 64C35.8 64 0 99.8 0 144V400c0 44.2 35.8 80 80 80H336c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v80c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16h80c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E");
}
a[href^="https://vhcinfo.org"]:after,
#wpadminbar a:after,
.wp-block-image a:after,
.swell-block-button a:after,
a[class*="menu-link"]:after,
a[class*="c-iconList__link"]:after,
a[class*="c-shareBtns__btn"]:after,
/*a[class*="c-blogLink"]:after,*/
a[class*="p-blogCard__title"]:after
{
margin: unset;
display: unset;
width: unset;;
height: unset;
content:unset;
background-position:unset;
background-repeat:unset;;
background-image: unset;
}
注意点
外部リンクアイコンを表示しないための除外設定は、自分が使う範囲で問題があると思ったものしかリンクを足していません。
ご自身の意図とは異なる場所に外部リンクのアイコンが表示されてしまった場合は、適宜セレクタで除外してください。
aタグにclassが付いている場合は、a[class*="class名"]:after、aタグにclass名が無い場合は親セレクタを追加して、親セレクタ a:afterを追加すれば大丈夫です。
CSSで除外したもの
- imgタグのaタグが外部画像の場合
- メニュー内のリンク
- 著者プロフィールとかのアイコン
- SNSシェアボタン
- ブログカード
参考：SWELLに無いのにCocoonにある外部リンクにアイコンを付ける機能
Cocoonには外部リンクにiconフォントのアイコンを付ける設定があります。
また、Cocoonには外部リンクを一律nofollowにする設定もあります。
Cocoonは多機能すぎて公式の記事が見当たらないのですが、スクリーンショットをお見せします。
一方、SWELLは外部リンクをnofollowにする設定もなければ、外部リンクにアイコンを付ける機能もありません。
外部リンクを一律nofollowにする方法は、以下の記事で書きました。
まとめ：SWELLで外部リンクにアイコンを付けるカスタマイズ
SWELLはfontawesomeを読み込まないのが基本で、代わりにSWELLアイコンが用意されています。
しかし、SWELLアイコンには、外部リンク用のアイコンが用意されていないので、fontawesomeを読み込むことを考えますが、1つのアイコンのためにfontawesomeを読み込むのも嫌なのです。
この記事のカスタマイズでは、SVGアイコンで疑似要素で配置し、かつCSSだけで閉じて外部リンクアイコンを表示できるようにしました。
コメント