WordPressでアイコンを利用する際に便利な下処理

著者 Nora

日付 2019年3月21日

カテゴリーカスタマイズ

タグ Material Design Icons,SVG,アイコン,ウェブフォント,グーテンベルグ,テーマカスタマイザー

Webページでアイコンを利用する機会は結構あると思いますが、テーマ「Ace」で取り入れている「Material Design Icons（MDI）」を例に挙げて、使い方をさらっと紹介いたします。

ウェブフォントとしてのMDIはフリーの「SIL OPEN」ライセンスで、SVGは「MIT」ライセンスでとても使いやすいです。

アイコンの種類をFontAwesomeと比較して、用途に応じて使いやすい方を選んで使うようにしましょう。

ページで使用するアイコンのスタイルや数などをある程度決めておくと、どのような方法を用いるべきか判断しやすくなると思いますよ。

因みに上のワードプレスのシンボルもSVGアイコンです。

アイコンの種類は3000以上

アイコンの数はフリーが1500以上のFontAwesomeに負けない程の量で、npmでも簡単にインストール出来ます。

僕から見れば1000を越えている時点でもう選ぶのが大変なんですが、実際には使いやすいアイコンが多い方を選べば良いと思います。

ただ、実際に扱うアイコンの種類がそれほど多くなく、リソースファイルをロードするのを省きたい場合、パスを書いてアイコンを表示すればロードする必要が無くなりますから、１ページ単位で使用するアイコンの数がそれほど多くないのであれば、SVGを使うことをお勧めします。

フォントサイズではなく、縦横の幅などの調節がCSSでし易くもなります。

ウェブフォントはCDNを利用可

ウェブフォントのCSSは

// version 3.5.95
https://cdn.materialdesignicons.com/3.5.95/css/materialdesignicons.min.css

// version VERSION
https://cdn.materialdesignicons.com/VERSION/css/materialdesignicons.min.css

をロードすることで利用できるようになります。

バージョンは最新版をご利用ください。

テーマカスタマイザーなどの選択肢で使用方法

npmなどでインストールしてJSONファイルから、アイコンの選択肢を配列で作成する方法があります。

npm install @mdi/svg

MDIには、SVGファイルと一緒に「meta.json」というファイルがそのパッケージに含まれていますので、ウェブフォントで使用するアイコンのクラスなどのデータを一括で取得することができます。

関連記事：初めてのNode.jsとnpm – インストールと使用方法

JSONファイルがあれば簡単ですが、実際は無くても問題ありません。

CDNのCSSファイルを使用してリストを作成することもできます。

<?php
$mdi_min_css_content = file_get_contents( $mdi_min_css_uri );
$pattern = '/\.(mdi\-[^\:]+)\:before\{content\:[\'"]([^\'"]+)[\'"]\}/i';
preg_match_all( $pattern, $mdi_min_css_content, $matched );

これでアイコンのクラスとユニコードを「$matched」にリストにして取得できます。

PHPで書いていますが、JSで書いても問題ないでしょう。

ウェブフォントのアイコンなどはCSSコードのパターンがありますので、クラスなどのデータは非常に整理しやすいんですよ。

アイコンを表示させる方法

npmでインストールするとSVGファイルなどもダウンロードできるんですが、流石にSVGファイルをリソースとしてロードするとなると、事前に使用するアイコンが定まっている場合であれば、選別しておいて、BODY開始タグ直後にでもSVGを定義しておくことができると思いますが、ワードプレスのようにユーザーに使用するアイコンを委ねるという場合は、パスを利用する方がいいと思います。

ところでワードプレスでアイコンを使用する状況というと、前の項目で紹介したように、PHPでリストを作成してテーマカスタマイザーなどに利用し、使用するアイコンのウェブフォントクラスを使ってHTMLを生成し、CDNなどでCSSをロードしておけばアイコンを表示させることができます。

<span class="mdi mdi-icon-class"></span>

ウェブフォントCSSがロードされていれば、これでアイコンが表示されます。

SVGで表示するには？

SVGを出力するとなると、大抵JavaScriptを使用する形になると思います。

一般的に使用される方法としては、

npm install @mdi/js

などアイコンを使用する際に便利なライブラリなどが用意されていると思いますので、これらを使用すれば比較的簡単に利用できると思います。

ただ、ワードプレスではプラグインも含めるとロードされるスクリプトが多くなってしまうので減らしたい方もいらっしゃるかもしれません。

アイコンの数だけファイルの大きさも比例して増加しますから、軽量化を図るには考慮する必要が出てきます。

ただ、CMSでは都合が良いことに管理画面が用意されていますから、管理画面側にスクリプトをロードする負担を回して、フロントエンドではHTMLのみを出力させることが可能です。

MDIの例だと、前提として「@mdi/svg」と「@mdi/js」のインストールし、WebpackやBabelなどでトランスパイルする環境を使った一例を紹介していきます。

import mdiSvgList from '@mdi/svg/meta.json';
import * as mdiPaths from '@mdi/js';

function replaceLowerWithHyphenIntoUpper( string ) {
	const upperLetter = string.substr( 1, 1 ).toUpperCase();
	return upperLetter;
}

var mdiClasses = [];
var mdiIconData = {};
for ( var index in mdiSvgList ) {

    var mdiData   = mdiSvgList[ index ];
    var nameLower = mdiData['name'];
    var nameUpper = nameLower.replace( /[0-9a-z]/, string => string.toUpperCase() ).replace( /\-[0-9a-z]/g, replaceLowerWithHyphenIntoUpper );

    var iconClass = 'mdi-' + nameLower;
    var indexPath = 'mdi' + nameUpper;
    
    var iconPath = mdiPaths[ indexPath ];

    mdiClasses.push({ class: iconClass, path: iconPath });
    mdiIconData[ iconClass ] = iconPath;

}

上のコードでは「mdiClasses」と「mdiIconData」にデータを格納していますが、整理する方法は自由に使いやすい方法を取れば良いと思います。

このようなコードを含むファイルを管理画面側でロードすることで、容易にクラス名で分類されたアイコンのパスを取得することができますので、ブロックだけでなく、あらゆるオプションでパスを保存可能ですから、CSSファイルをロードすることなくフロントエンドにアイコンを反映させることができます。

あとは、ラッパーやクラスなどを指定して、テーマなどのCSSで使いやすい形に仕上げてみましょう。

同ページ内で使い回す場合はトップで定義

SNSシンボルやバッテンや矢印など使い回す機会の多そうなアイコンは、まとめてBODY開始タグの直後に定義しておきましょう。

そうしておくとSVGのuseタグでアイコンのIDを指定するだけで簡単に使いまわすことができます。

<svg>
  <defs>
    <symbol id="iconX" viewBox="0 0 16 16">
      <path style=" " d="M 2.75 2.042969 L 2.042969 2.75 L 2.398438 3.101563 L 7.292969 8 L 2.042969 13.25 L 2.75 13.957031 L 8 8.707031 L 12.894531 13.605469 L 13.25 13.957031 L 13.957031 13.25 L 13.605469 12.894531 L 8.707031 8 L 13.957031 2.75 L 13.25 2.042969 L 8 7.292969 L 3.101563 2.398438 Z "></path>
    </symbol>
    ...
  </defs>
</svg>

定義方法はこんな感じで、

<svg><use xlink:href="#iconX"></use></svg>

と任意の場所で書くことでアイコンが引用できます。

前のページレイアウトブロックを追加してGutenbergをページビルダーにカスタマイズする方法

次のページGutenbergのカスタムブロック作成でimgを使う際にハマった件