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

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone