[WordPress]外部リンクのみにアイコンフォントを使用する方法をハードコーディングじゃない感じで行う

このブログでは外部リンク指定した<a>タグにCSSでアイコンフォントを表示しております。

当時参考になった記事は『アイコンフォントでリンクタイプ別にアイコンつける方法 | Webクリエイターボックス』でした。

HTMLでアイコンフォント(今回は「Font Awesome」)を読み込み、

CSSで属性セレクタを使い、擬似要素で表示ですね。ただ、17行目ではドメインを直接指定しているのでハードコーディングになります。

オリジナルのWordPressテーマ制作であればこれで十分なのですが、使い回したいときは毎度書き換える必要があったり、販売用にWordPressテーマを作成する場合は厄介です。

なのでこれを解決してみます。

wp_add_inline_style()でサクッと

正直解決策は考えればいくつかあります…。が、これが一番適切かなぁと思ったやり方を示してみます。PHP側でWebサイトのドメインを取得し、wp_add_inline_style()を使ってスタイルと一緒に吐き出す方法です。

「.the-content」というクラスで囲っていますが、これは適宜変更してみて下さい。

おまけ(Sass&Compassを使ったほぼ自分用)

今回コーディングしたPHPとは別に、Sass&Compassのコードもメモとして残しておきます。記事本文を出力する以下のようなPHPコードに対して、

Sassはこのようにしております。

FontAwesomeのSassを読み込んでいること前提だとか、バーティカルリズム用の設定変数で変わってきたりだとかするので、こちらも適宜変更でお願いします…(ほぼ自分用という)。

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/wordpress-external-link-icon-font/trackback/