WordPress外部リンクに「外部リンクのアイコン」を表示させる【Font Awesome】

まず、「外部リンクのアイコン」とは何か？
下記が外部リンクのアイコンである。

Font Awesome を使って「外部リンクのアイコン」をワードプレスに導入する。
なかなか便利そうだな

– Font Awesomeの使い方と表示されないときの対処法 (sungrove.co.jp) から引用 ここから-
Font AwesomeはSNSのアイコンをはじめとした、web上で使用されている様々なアイコンを、アイコンフォントという文字として利用することができるツールです。アイコンフォントは画像データと違いベクター形式で保存されるため、サイズを変更しても粗くなることはありません。また、CSSを設定するだけで色やサイズ、アニメーションを付けるといったことも可能です。
– Font Awesomeの使い方と表示されないときの対処法 (sungrove.co.jp) から引用 ここまで-

Font Awesomeに登録後ログインしてKit’s Codeをコピーする

WordPressの「Add Code to Head」にコピーしたKit’s Codeを貼る。
「Add Code to Head」はWordpressのプラグインをインストールする必要がある。

Arrow Up Right From Square Classic Solid Icon | Font Awesome にある「外部リンクのアイコン」があるのでHTMLのコードをコピーしてWordpressの記事を書く時にカスタムHTMLに貼ると、この記事の上の貼った「外部リンクのアイコンの例」の画像のように外部リンクのアイコンが表示される。

<a href="https://plantuml.com/ja/">シンプルなテキストファイルで UML が書ける、オープンソースのツール (plantuml.com)</a> <i class="fa-solid fa-arrow-up-right-from-square"></i> 

追記 2023年1月7日(土)
あかん。ワードプレスのカスタムHTMLに<i class=”fa-solid fa-arrow-up-right-from-square”></i>を貼るときに不正なHTMLになったりする。この不正なHTMLになるのはWordpressのありがた迷惑な機能のせいかな？
というわけで、iタグのコピペは不正なHTMLになるのと単純に面倒だから別の方法にする。
次に示すように自分で決めた特定の文字列をiタグに置換することにする。
これにより、文字列「ExternalLink」が「外部リンクのアイコン」に置換できる。

Javascriptのコードは下記である。

jQuery(function($) {
    
    //外部リンクのアイコンを追加する
    //文字列「ExternalLink」をiタグに置換する
    $("p").each(function(i, elem) {
        var txt = $(elem).html();
        var buf = '<i class="fa-solid fa-arrow-up-right-from-square"></i> ';
        $(elem).html(
            txt.replace(/ExternalLink/g, buf)
        );
    });
    
});

• 
• Tweet

• WordPress