WordPressサイトを納品、本番UPしたタイミングで、Webアイコンフォントの「Font-Awesome」がリンク切れの状態で表示されなくなり、調べた件について覚書です。
解決した原因から言うと、うっかりミスだったのですが、「wp-content」フォルダを守るために設定をした、.htaccessの書き方でした。
WordPressでホームページ作成をする場合には、セキュリティー対策として、.htaccessで有効範囲を制限するようにしています。
セキュリティのための、.htaccessは複数設置しますが、その中で、「wp-content」フォルダを守るために、「wp-content」内にアップできるファイルの種類を、画像やcss、jsに限定するように、.htaccessで設定することがあります。
※「wp-content」フォルダで悪さをされる例は、uploadsフォルダにメールスクリプトをアップロードされ、自分のサーバが踏み台にされ、大量のスパムメールを送りつける、という被害にあることもあるようです。
設定方法は、
「wp-content」内に、下記のソースを書いた.htaccessファイルを作成UPするだけですが・・・
Order deny,allow
Deny from all
<Files ~ “.(xml|css|jpe?g|png|gif|js)$”>
Allow from all
</Files>
Webアイコンのフォントファイルは、「.eot、.svg、.ttf、.woff」ですので、
上記のように、xml、css、jpeg、png、gif、jsに制限したため、Font-Awesome（Webアイコンフォント）がリンク切れの状態で表示されなかったのです。
UPできる画像を制限しているだけから、関係ないと思っていたのですが、下記にように拡張子を追加すると解決したので、呼び出しの時にも関係するようです。
Order deny,allow
Deny from all
<Files ~ “.(xml|css|jpe?g|png|gif|js|svg|eot|ttf|woff)$”>
Allow from all
</Files>
Webアイコンフォント使用時の.htaccessの書き方は、ご注意ください。
