【WordPress】simplicity2でアイコン(webfont)が表示されない不具合を対処 😊

f:id:kiyoshi_net:20181008122109p:plain

はてなブログとは別に、wordpressのサイトも勉強用にやっている。

北海道地震の停電にも耐えきったことで有名になったはてなのレンタルサーバ上で、WordPressをインストール。テーマはフリーで公開されているSimplicity2を使わせてもらっています。

さくらのスタンダードプランをアップデートしてから、ブログ内のアイコン（パンくずリストとかSNSボタン）が一部表示されない不具合が起きていた。

ずっと放置していたのだが、今回重い腰をあげて対処したのでメモ。

事象

f:id:kiyoshi_net:20181008114207p:plain

PCではgoogle chrome, firefox などで、ブログ内のアイコン（パンくずリストとかSNSボタン）が表示されない。

ウェブフォントといって、wordpress内にそのアイコンがあるわけではなく、都度、どこかのサイトに実体を参照しに行っているようだ・・。知らなかった。

ただし、iPhoneのsafariだと正常に表示される。firefox focusでは表示されない。firefox focusは外部サイト連携とかバシバシ切ってそうだから納得行くが。

ということはｐｃブラウザのセキュリティ機能の一貫（仕様）として見れていない、とい可能性もある。

対処方法

一応、simplicity製作者様のサイトに記載があった。

wp-simplicity.com

しかし、紹介している方法がどれも初心者にはピンとこなかった。きっと、WordpPressやApacheちゃんと勉強した人なら、「ふむふむ」でわかるのでしょうけど、筆者みたいな素人にはちんぷんかんぷん。

このブログ記事では思いっきりわかりやすく、解説します。

超わかりやすい方法

用意するもの

teraterm
- 「Tera Term」定番のターミナルエミュレーター - 窓の杜

設定ファイルを編集するためにwebサーバにCLIで接続できるteratermを使用します。個人的にそのほうが直感的で編集しやすいからですが、FFFTPやWinSCPでファイルを編集して置き直す、でも同じ結果になると思うので、そちらでもOKです。

まずはサイトをバックアップしておく(optional)

オプションなのでやってもやらなくてもOK。今回はいじるファイルが１つだけなので、ミスってもそこだけ直せばいいけど、設定ファイルをいじる前はバックアップする習慣をつけておいたほうがいいと思います。

ここではwww配下にblog_Aというディレクトリがあり、そのディレクトリごとtarファイルとしてバックアップする例です。tarにする理由としては、ディレクトリ構造より単一ファイルにしたほうが移動させやすく、扱いやすくなるからです。Linux/Unix環境ではtarコマンドは間違いなく入っているでしょうから、引っ越しした場合とかでも利用できるメリットがあります。

$ cd /home/USERID/www/
$ ls -F
blog_A/
$ tar cf blog_A_20181008_bk.tar ./blog_A
$ ls -lFh
drwxr-xr-x  3 USERID  users   512B Aug 12 23:43 blog_A/
-rw-r--r--  1 USERID  users    94M Oct  8 10:39 blog_A_20181008.bk.tar

これでOK。バックアップファイル(tarファイル）から戻すときは

$ tar xf ./blog_A_20181008_bk.tar

同一階層上の「blog_A」ディレクトリが上書きされます。

設定箇所は2箇所

/WPインストールフォルダ/wp-content/themes/simplicity2/webfonts/fonts
/WPインストールフォルダ/wp-content/themes/simplicity2/webfonts/icomoon/fonts

上記フォルダ直下に、.htaccessファイルを新規作成し置きます。

.htaccessの中身は下記の通り。

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|otf|eot|woff)$">
    Header set Access-Control-Allow-Origin "http://blog_A.net"
  </FilesMatch>
</IfModule>

上記でhttp://blog_A.net としている部分は自分のブログ名と置き換えてください。

実際のコマンド操作は下記の通り。

% cd blog_A/blog/wp-content/themes/simplicity2/webfonts/fonts/
% ls -a
.                               fontawesome-webfont.svg
..                              fontawesome-webfont.ttf
fontawesome-webfont.woff        FontAwesome.otf
fontawesome-webfont.woff2       fontawesome-webfont.eot
%
% vi .htaccess
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|otf|eot|woff)$">
    Header set Access-Control-Allow-Origin "http://blog_A.net"
  </FilesMatch>
</IfModule>
:wq

% cat .htaccess
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|otf|eot|woff)$">
    Header set Access-Control-Allow-Origin "http://blog_A.net"
  </FilesMatch>
</IfModule>
%
% cd ../icomoon/fonts/
% ls -al
.               icomoon.svg     icomoon.woff
..              icomoon.eot     icomoon.ttf
% vi .htaccess

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|otf|eot|woff)$">
    Header set Access-Control-Allow-Origin "http://blog_A.net"
  </FilesMatch>
</IfModule>
:wq

% cat .htaccess
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|otf|eot|woff)$">
    Header set Access-Control-Allow-Origin "http://blog_A.net"
  </FilesMatch>
</IfModule>
%

.htaccessの注意

今回は、webfont関連の階層に.htaccessをおきましたが、ブログのメインディレクトリ直下に.htaccessを変な内容で書いてしまったりすると、ブログが表示されなくなったりトラブルのもとになるので、自分がどこのディレクトリ上のファイルをいじっているのか、意識しながら編集することが重要です。