【WordPress】4.3リリース！サイトアイコン（ファビコン等）の設定機能が標準に！検証してみたよ！
2015/09/22
昨日（2015/08/19）【WordPress】のバージョン4.3がリリースされました。
「サイトアイコン設定機能」がものすごく気になったので早速試してみました！
スポンサーリンク
サイトアイコンとは
そもそもサイトアイコンが何か分からない？
いわゆる「ファビコン」と、「アップルタッチアイコン」のことです。
ファビコン
ブラウザで表示されるこういうやつ。
導入手順：ファビコンを設定する。←非常に重要。WordPressにも対応。
アップルタッチアイコン
スマホでホームにショートカット作った時に表示される、こういうやつ。
アンドロイドも同じものを使います。アップル違うけど(´・ω・｀)
導入手順：スマホ用のWebクリップアイコンapple-touch-icon.png(ファビコンのようなもの)を設置する
WordPressでサイトアイコンを設定する
今まではサイトアイコンの設定を手動でやる必要がありましたが、今回のアップデートで簡単に設定できるようになりました。
用意するものは、「512×512px以上」のサイトアイコンの画像ファイル。
なんでこんな大きい物が必要なのか分かりませんが、説明にそう書いてありました。
実際には「512×512px」ちょうどの画像を用意するのがベストです。
肝心のサイトアイコンを設定する場所ですが、「管理画面」から「外観」→「カスタマイズ」を選択します。
テーマのカスタマイズ画面が表示されるので、「サイト基本情報」を選択します。
ここで「サイトアイコン」の設定ができます。「ファイルを選択」をクリック。
お馴染みのファイルアップロード画面が表示されるので、「サイトアイコン」にしたい画像をアップロードして「選択」します。
画像の切り抜き
「512×512px」ちょうどの画像サイズでない場合、画像の切り抜き画面が表示されます。
少し小さい正方形の画像を選択した場合でも切り抜き画面が表示されます。
あくまで、正方形に「切り抜き」なので横長の画像に上下に空白つけて正方形にするとかは出来ません。
こういう横長の画像でも、何故か「切り抜かない」のまま登録出来て、反映するとこんなことになりました。
まぁ誰もそんなアホなことしないと思いますが(；・∀・)
「切り抜かない」を選択した場合、最適な画像サイズのアイコンが作成されないので、今ある画像サイズの中で近いサイズのもので設定されてしまいます。なので「画像切り抜き」から最適な画像サイズでアイコンを作成させるようにしましょう。
「512×512px」ちょうどの画像は手順は省略されますが、最適な画像サイズが作成されます。
サイトアイコンの反映
画像を選択・切り抜き後にカスタマイズ画面に戻ると、「サイトアイコン」が表示されていますが、まだ保存されていないので「保存して公開」で選択します。
たったこれだけで、ファビコンもアップルタッチアイコンも設定してくれます。
ちなみに管理画面にも適用されてました。
iPhoneだと透過は黒背景になってしまいます(；・∀・)
反映されるタグ
こういうタグがヘッダーに追加されます。
<link rel="icon" href="http://***/site_icon-32x32.png" sizes="32x32" /> <link rel="icon" href="http://***/site_icon-192x192.png" sizes="192x192" /> <link rel="apple-touch-icon-precomposed" href="http://***/site_icon-180x180.png"> <meta name="msapplication-TileImage" content="http://***/site_icon-270x270.png">
270サイズまでしか使ってなくね？(´・ω・｀)今後の為かな？
「<meta name=”msapplication-TileImage”」で指定してるのは、Windows 8以降で出来るピン留めされたサイトに使われるものみたい。でも、IE11以降サポートされなくなる指定の仕方っぽい。
MicroSoft：ピン留めされたサイトの機能強化
そもそもそんなものが存在してたの知らなかった(；´∀｀)そして色々調べたけどピン留めする方法が分からない…。
Windows 8以降とIE使ってなさすぎて全然分からんｗ
IEユーザーの読者が増えてきたらまた調べよう。
削除する方法
設定したサイトアイコンですが、もちろん削除出来ます。サイトアイコンの設定画面に「削除」ボタンがあるので、削除してから「保存して公開」しましょう。
保存されるデータ
このサイトアイコンを設定しているデータですが、「options」テーブルの「option_name＝site_icon」で保持しています。
「option_value」の値は「posts」のIDです。
ローカルとか開発環境のファビコンは本番と違うのにしたいとかは、ダンプデータ流し込んでから調整するSQLにこいつも加えておくと良いかと思います。
注意事項
当ブログ「はぴすぷ」のテーマは「STINGER5」を使っているのですが、既にファビコンも、アップルタッチアイコンも設定されています。
だからアイコンを差し替えるだけで、変更出来ました。
もし、このサイトアイコン設定機能を使うとなるとアイコンの指定を2回行ってしまうので、どっちが表示されるか分かりません。
なので、既にテーマ内でサイトアイコンの指定がある場合は、該当箇所を削除しておきましょう。大抵は「header.php」にあると思います。
サイトアイコンはテーマに紐付いた設定ではないので、テーマを変更する時は注意しましょう。
終わりに
初心者にはもの凄い簡単に一式をセットしてくれるのでかなりありがたい機能ですね！
ファビコン設定してないサイトが減るかと思うと胸熱です(・∀・)頼むからファビコン設定してくれ！
今のところサイトアイコンは1つしか設定できないので、ファビコンとアップルタッチアイコンを分けたいという場合は、自分で設定する必要があります。
私はそれに加えて、管理画面のファビコンを別にしたいのと、開発環境でもそれぞれ分けたいので、自分で何とかするしかありませんねｗ
あ、WordPressのアップデートする時はなるべくアクセス数のすくない深夜帯とか早朝とかにしましょうね(；・∀・)
数十秒とはいえ、メンテモードになってしまうらしいので。
あとバックアップもしっかり取っておきましょう！それでは。