WordPressのマルチサイトで WP SVG Icons プラグインのインポート機能を使う方法

WordPress

icons

IcoMoon のアイコンフォントをWordPressで簡単に使えるようにするのが WP SVG Icons プラグイン です。

デフォルトでも500個以上のアイコンが使えるので便利なのですが、さらにカスタムのアイコンをインポートする機能があります。

ただし、インポート機能はWordPressのマルチサイトには対応していないようなので、使えるようにする方法を調べてみました。

環境

インストール

WP SVG Icons プラグイン のインストールは通常のプラグインと同じです。

念のため、プラグインの有効化はマルチサイトのサイトネットワークでは行わず、個別サイトで行います。（サイトネットワークでも問題ないかもしれません。）

マルチサイトには未対応

WP SVG Icons プラグイン のサポートフォーラムでの回答を見ると、現時点ではマルチサイトに未対応のようです。

参考：WordPress › Support » Imported Custom Icon Pack Disappearing

allow_url_fopen の設定

インポートでエラーになるケースとして、php.ini で allow_url_fopen が無効になっていることがよくあるようなので、この設定を有効にします。

;allow_url_fopen = Off
allow_url_fopen = On

僕の環境では PHP-FPM を使用しているため、リロードして設定を反映します。

$ kill -SIGUSR2 {すべてのphp-fpmのpidを指定}

または

$ sudo service php-fpm reload

など。

なお、すべての作業が終わったら、設定を Off に戻しておきます。

フォントファイルをインポート（通常の手順）

IcoMoonからzipファイルをダウンロードしておきます。

WP SVG Icons のメニュー Import Custom Icon Pack を開き、zipファイルを選択し、Importボタンをクリックします。

すると、Importボタンの下でローディングアイコンが回ったままになります。

ブラウザのコンソールを開いてみると、以下のようなエラーが発生しています。

Failed to load resource: the server responded with a status of 404 (Not Found) 
http://example.com/site1/wp-content/uploads/wp-svg-icons/custom-pack/style.css

Failed to load resource: the server responded with a status of 404 (Not Found) 
http://example.com/site1/wp-content/uploads/wp-svg-icons/custom-pack/demo.html

Import Custom Icon Pack のページの下にカスタムアイコンパックがインストールされる場所が表示されていて、それは以下のようになっています。

Your Custom Icon Pack will be installed to: /var/www/site/wp-content/uploads/sites/1/wp-svg-icons/custom-pack

404エラーが発生しているパスとは違いますね。これがマルチサイトには未対応ということなのだと思います。

また、上のインストールされているはずのディレクトリーをチェックすると、以下のようになっています。

$ ll /var/www/site/wp-content/uploads/sites/1/wp-svg-icons/custom-pack
合計 0
-rw-r--r-- 1 nginx nginx 0  6月 20 17:38 2014 demo.html
-rw-r--r-- 1 nginx nginx 0  6月 20 17:38 2014 style.css

どうやら、フォントファイルのインストールも失敗しているようです。

フォントファイルを手動でインストール

仕方がないので、フォントファイルを手動でインストールすることにします。

まず、インストールディレクトリーにあるゴミファイルを削除しておきます。

$ rm demo.html style.css

それから、フォントファイルをインストールディレクトリーに置き、その場所に展開します。

$ unzip icomoon.zip
Archive:  icomoon.zip
   creating: fonts/
 extracting: fonts/icomoon.ttf
 extracting: fonts/icomoon.woff
 extracting: fonts/icomoon.eot
 extracting: fonts/icomoon.svg
 extracting: selection.json
 extracting: demo.html
   creating: demo-files/
 extracting: demo-files/demo.js
 extracting: demo-files/demo.css
 extracting: Read Me.txt
 extracting: style.css

※サブディレクトリーに入れないように注意してください。

この状態で Import Custom Icon Pack のページに行き、再度、通常操作と同じ手順でインポートを実行します。

まだローディングアイコンが回っていると思いますが、インストールディレクトリーを見てみると、ファイル名が変更されたりしているので、インストールはうまくいったようです。

$ ll
合計 140
drwxrwxr-x 2 nginx nginx  4096  6月 18 23:21 2014 demo-files
-rw-rw-r-- 1 nginx nginx 19817  6月 18 23:21 2014 demo.html
drwxrwxr-x 2 nginx nginx  4096  6月 18 23:21 2014 fonts
-rw-rw-r-- 1 nginx nginx  2030  6月 18 23:21 2014 style.css
-rw-rw-r-- 1 nginx nginx 23566  6月 18 23:21 2014 wp-svg-custom-pack.json
-rw-r--r-- 1 nginx nginx 80663  6月 20 17:56 2014 wp-svg-custom-pack.zip

ただし、ブラウザのコンソールを見てみると、例のエラーが表示されています。

そこで、プラグインが見に行こうとしている場所にカスタムフォントのフォルダーをコピーします。

$ cd /var/www/site/wp-content/uploads
$ cp -r sites/1/wp-svg-icons ./

この状態で Import Custom Icon Pack のページに行くと、インポートしたアイコンが表示されているはずです。

なお、ブラウザのコンソールには他のエラーが表示されていますが、ここまででひとまず使えるようになります。

あと、お約束ですが、この方法は公式のものではないので、自己責任でお願いします。


WordPress Perfect GuideBook 3.x対応版

WordPress Perfect GuideBook 3.x対応版