テーマ更新

obliqueテーマを最新版(2.0.11)にアップデートしたところ、アイコンに使っている「Fontawesome」が4.7から5.0へ変更されていて、これまでの指定ではアイコンが表示されなくなってしまった。直後にバージョン2.0.12がリリースされたので、さらに更新してみたが、結果は変わらず。そもそもFontawesome 5.0ではこれまで使っていたアイコンが使えなくなっているし、どうやらフォント指定そのものが上手くいっていないのか、アイコンが表示されない。修正されるのを待つのも一つの手だが、子テーマ側で対応することも可能なので、ここでは子テーマでの対応方法について説明。

子テーマでフォント指定する方法はいくつかあるが、このサイトでは以下の指定方法を使っている。

@font-face {
        font-family: 'Fontawesome';
        src: url('./fonts/fontawesome-webfont.eot');
        src: url('./fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
                 url('./fonts/fontawesome-webfont.woff2') format('woff2'),
                 url('./fonts/fontawesome-webfont.woff') format('woff'),
                 url('./fonts/fontawesome-webfont.ttf') format('truetype'),
                 url('./fonts/fontawesome-webfont.svg') format('svg');
        font-weight: 400;
        font-style: normal;
}

フォント自体は子テーマの「oblique-child/fonts」フォルダにダウンロードコピーしておく必要がある。Fontawesome公式サイトから過去バージョンをダウンロードする。対象ファイルは以下の通り。

-rw-r--r-- 1 apache 134808  4月 16 11:47 2018 FontAwesome.otf
-rw-r--r-- 1 apache 165742  4月 16 11:47 2018 fontawesome-webfont.eot
-rw-r--r-- 1 apache 444379  4月 16 11:47 2018 fontawesome-webfont.svg
-rw-r--r-- 1 apache 165548  4月 16 11:47 2018 fontawesome-webfont.ttf
-rw-r--r-- 1 apache  98024  4月 16 11:47 2018 fontawesome-webfont.woff
-rw-r--r-- 1 apache  77160  4月 16 11:47 2018 fontawesome-webfont.woff2

これで以前の指定のまま、各種アイコンが表示されるようになる。テーマの「追加CSS」では以下のように指定することが出来る。

.widget_meta li::before {
	font-family: Fontawesome;
	font-size: 15px;
	margin-right: 5px;
	content: "\f204";
}
.widget_meta li:hover::before {
	font-family: Fontawesome;
	font-size: 15px;
	margin-right: 5px;
	content: "\f205";
}

この設定はサイドメニューのメタ情報エリア、リスト要素前のアイコン指定。