【導入編】WordPressに独自アイコンをWebフォントとして導入する方法

【導入編】WordPressに独自アイコンをWebフォントとして導入する方法

こんにちは、Y(@y_m4a)です。

今回は導入編です。
準備編で用意したフォントデータをWordPressフレームワークのウェブサーバに配置して実際に使えるようにします。

大まかな流れ

  1. 子テーマフォルダ内にダウンロードした/css/icon.cssとfontsフォルダを配置
  2. 配置したfontsフォルダを参照するように/css/icon.cssを編集。
    なお、相対パスの基準は親フォルダなので、2階層上に上って子テーマのfontsフォルダを指定するようにすること。
  3. 子テーマのfunction.phpにicon.cssの場所を指定

いざ導入

以下、細かく見ていきましょう。

親テーマのフォルダ構成を確認

今回は、当ブログで利用している「LionMedia」のテーマに導入していく例を記載します。
前の記事にも書きましたがLionMediaには既にicomoonのフォントが搭載されています。なので、下手にいじると既存のテーマを壊しかねません。
今回は既存の設定を維持しつつicomoonからダウンロードしてきたフォントデータを追加する手順をとります。よって、親テーマではなく子テーマを編集します。
なので、まず親テーマを確認し、それと同じようにダウンロードしてきたファイルを配置するという方針です。

親テーマのフォルダ構成はこちら。

cssフォルダの中にicon.cssというファイルがあり、ここにicomoonのフォントに関する記述がされています。
また実際のフォントデータ(4種類)はfontsフォルダの中に配置されています。

子テーマに配置

style.cssをリネーム

アップロードする前に、icomoonからダウンロードしてきたファイルの中に「style.css」があるかと思いますが、これが親テーマのicon.cssにあたるファイルになるので、「icon.css」にリネームしときます。

icon.cssにfontsフォルダのパスを指定

続いて、リネームしたicon.cssを開いて中を確認してみましょう。

なにやら上の方に、

なる記述が。これ、fontsフォルダ配下にあるフォントデータを指定してるんですね。
このままだと、実は親フォルダの中のfontsフォルダを見に行ってしまうので以下のように書き換えます。

相対パスはあくまで親フォルダを基準にしているため、2階層上って、子テーマのfontsフォルダを指定しています。

アップロード

cssとフォントデータを親フォルダと同じ構成で子テーマのフォルダの中に配置します。
結果、こうなります。

子テーマのスタイルシートを読み込ませる

アップロードしたicon.cssを読み込ませます。
いじるソースはfunction.phpです。
function.phpに以下を書き加えました。

fit_head_child_content()というユーザ定義関数を作成し、その中にcssを読み込ませる記述をします。
ここで使っているのはget_stylesheet_directory_uri()という関数で、これは子テーマのフォルダパスを取得する関数です。
これを利用して、icon.cssを読み込んでいます。
最後にadd_actionでwp_head()に今回定義したfit_head_child_content()関数の内容を付け加えています。

以上で、タグ内に子テーマのicon.cssが読み込まれ、無事ダウンロードしたicomoonのアイコンがフォントとしてWeb使えるようになります。

使ってみよう

実際どうやって使うのか?
例えば、以下のようにタグでクラス名にアイコン名を入れてあげればOKです。

 

アイコン名称はicon.cssの中に記述があります。
また、ダウンロードしたファイルの中にdemo.htmlというファイルがあったかと思いますが、これにイメージとクラス名が一覧で表示されていますので、これを参照して指定してみてください。

以上になります。
LionMediaテーマを例にして導入方法をご説明しました。
同じ考え方でどんなテーマにでも導入可能かと思いますので、参考になれば幸いです。

WordPressカテゴリの最新記事