WordPress4.3のサイトアイコン機能が便利すぎる
ちゃんとしたサイトなら必ずといっていいほど設定されているサイトアイコン。favicon(ファビコン)とも言いますが、WordPress4.3の新機能で超簡単に設定できるようになりました。「設定方法が超簡単」かつ「用意する画像が1つでいい」とやらない選択肢がないほど簡単なのでご紹介します。
たった3ステップで設定完了
まず「外観」＞「カスタマイズ」からカスタマイズ画面を表示します。
次に「サイト基本情報」を選択します。
あとは「ファイルを選択」からサイトアイコンのファイルを指定して完了です。
登録が完了すると以下のようになります。
用意するサイトアイコン画像は1つでOK
従来サイトアイコンを設定する場合、ブラウザの種類などに応じてサイズ違いに画像を複数用意する必要がありました。しかし、WordPressの機能を使えば用意するファイルは1つでOK。WordPressが自動的に必要なファイルサイズの画像を用意してくれます。
設定完了後のメディアを見ると、元ファイルと同じ画像ファイルが出来ています。
画像ファイルと同様に、サイトアイコンを表示するソースコードも複数記載する必要がありました。もちろんこれもWordPressが勝手にやってくれます。
実際に出力されたソースコードが以下です。
<link rel="icon" href="https://shufu-no-teppen.com/wp-content/uploads/2015/10/cropped-favicon04-32x32.png" sizes="32x32"> <link rel="icon" href="https://shufu-no-teppen.com/wp-content/uploads/2015/10/cropped-favicon04-192x192.png" sizes="192x192"> <link rel="apple-touch-icon-precomposed" href="https://shufu-no-teppen.com/wp-content/uploads/2015/10/cropped-favicon04-180x180.png">
この3サイズの画像の元になっているのが、WordPressが自動コピーした画像(cropped-XXXXX)です。
設定完了後にIE、Chrome、Firefox、Safari(iOS)、Android標準ブラウザでの動作確認を行いましたが、どれも問題なく表示されていました。
おわりに
いままで複数サイズの画像の用意や、各ブラウザに対応したソースコードの記載が面倒でサイトアイコンの設定はしていませんでした。けど、これならホントに簡単に設定できます。サイトアイコン未設定の方はこの機会に設定してみてはいかがでしょう。