Tips

WordPress のウィジェット内項目の先頭にアイコンを表示する方法(Font Awesome 5 を利用)

投稿日:2018年3月30日 更新日:

WordPress ではサイドバーなどに ウィジェットを作成することができます。

ウィジェット内の各項目の先頭にアイコンを表示する方法はいろいろあると思いますが、本ページでは Font Awesome 5 を使った方法をご紹介します。


Font Awesome とは?

Font Awesome は、Webサイト上で簡単にアイコンを表示することができるツールです。

基本的な使い方としては、HTMLの中に「<i class="fas fa-camera-retro"></i>」といったタグを記述するだけで、「」← このようなアイコンを表示することができます。

最新版のバージョンは、5 となっています。

手順

(1) WordPress に Font Awesome 5 を導入する

Font Awesome 5 には、「SVG with JS」と「Web Fonts with CSS」という2つのフレームワークがあり、どちらか一方だけを導入して使用することになります。公式には、「SVG with JS」の使用が推奨されています。

しかし今回の場合、後者である「Web Fonts with CSS」の導入が前提となります。(「SVG with JS」ですと、すんなりとできませんので)

Font Awesome 5 の導入手順については、以下のページを参考にしてください。

WordPress に Font Awesome 5 を導入する方法

2018.03.30

Webサイトに Font Awesome 5 を導入する方法

2018.03.30
なぜ「Web Fonts with CSS」を使うのかというと、今回の手順の中で「CSS の 疑似要素 (Pseudo-elements)」 を使うからです(具体的には ::before を使います)。

How to Use | SVG with JS には、「SVG with JS」で疑似要素を使う方法が書いてあるのですが、推奨されていないようですしちょっと面倒そうでした。

(2) Widget CSS Classes をインストールする

Widget CSS Classes」というWordPress のプラグインをインストールします。

Widget CSS Classes — WordPress Plugins

このプラグインをインストールすると、各ウィジェットに対して任意の CSSクラス名をセットすることができるようになります。

(3) ウィジェットにCSSクラス名をセットする

WordPress の管理ページ [外観] – [ウィジェット] から、目的のウィジェットを表示します。

ウィジェット内に「CSS Classes」という項目が追加されていますので、そこに クラス名を入力して保存します。


今回は、wp-widget-cat という名前にしました。(実際は、その Webサイトに固有の名前を含めるとよいと思います)

(4) 表示したいアイコンを探す

アイコンは、こちら → Icons | Font Awesome から探すことができます。


文字列を入力して検索することもできます。

これと決めたアイコンをクリックします。


このアイコンの場合、 のところで、「SOLID」と「REGULAR」という2つのスタイルを選択することができました。「LIGHT」は Pro版でないと使えないようです。アイコンによって無料(Free版)で使えるスタイルは異なります。

このアイコンを表す Unicode の番号です。

これらの情報は次で使用することになります。

(5) style.css に追記する

style.css に、このCSSクラス内の li要素先頭にアイコンを表示するための記述を追加します。

注意

ここでは、「li要素の先頭にアイコンを表示する」としましたが、お使いのテーマによっては、別の要素になる可能性もあります。
ウィジェット内の各項目がどのような要素(HTMLタグ)になっているか確認してください。

以下はその一例です。

.wp-widget-cat li:before {
  color: #DFB845;
  content: "\f07c";
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0.5em;
  text-decoration: none;
}
主なプロパティ 説明
content アイコンのUnicode番号をセットします。先頭にバックスラッシュが必要です。
font-family Free版をダウンロードして使っている場合は Font Awesome 5 Free、Pro版の場合は Font Awesome 5 Pro を指定します。
通常は、Font Awesome 5 Free になるでしょう。
font-weight 使用するスタイルを数値で指定します。

  • Solid → 900
  • Regular → 400
  • Light → 300
  • Brands → 400

(6) アイコンが表示されるかチェックする

アイコンが表示されるかチェックします。


参考

おわりに

CSSの疑似要素を使うやり方は、基本的には Webフォントを使うことが前提となり、Font Awesome では以前のバージョンの頃は割とよくやる手法でした。

ところが、Font Awesome がバージョン5 になり、「Web Fonts with CSS」フレームワークではなく「SVG with JS」がメインになったため、CSSの疑似要素を使うテクニックが使いにくくなってしまいました。

ただ、「Web Fonts with CSS」は「SVG with JS」に比べてそれ程大きなデメリットもないため、CSSの疑似要素を使いたいのであればあまり躊躇せず「Web Fonts with CSS」を使えばよいと思います。

WordPress用 おすすめレンタルサーバー

-Tips
-

執筆者:fitallright

関連記事

no image

エックスサーバーの「WordPress簡単移行」機能

目次概要メモ簡単移行の処理について試してみたお知らせマニュアルページ 概要 エックスサーバーの「WordPress簡単移行」機能は、他社のサーバーで運営していた WordPress サイトを、エックス …

【WordPress】投稿編集画面で画像(メディア)を追加する際に挿入されるURLを相対URLにする

WordPress の投稿編集画面で、「メディアを追加」ボタンを使って画像(メディア)を追加する際、挿入されるHTMLコードのURL部分は 絶対URL になります。 しかし、これだと不便なので「相対U …

エックスサーバーに Bolt (CMSツール)を設置する

エックスサーバーに Bolt という CMS を設置する手順を紹介します。 Bolt 自体の紹介というよりは、エックスサーバーのような共用レンタルサーバーに、CMS を設置する一つの方法(手順)を紹介 …

エックスサーバーで logrotate を使う

目次1. はじめに2. logrotate とは?3. エックスサーバーで logratote を使う手順1. logrotate 関連のファイルを配置するディレクトリを作る2. logrotate …

.htaccess でのアクセス設定に注意

レンタルサーバーでは、特定のディレクトリに .htaccess ファイルを置き、アクセス制限をかける場合があります。 例えば、以下を記述した .htaccess ファイルを置くと、そのディレクトリ以下 …

ロリポップ!「スタンダードプラン」
さくらのレンタルサーバ「スタンダードプラン」