iPhoneやiPadのホーム画面に追加で使われるアイコンを指定する

「写真や画像から簡単に各種faviconを作成してくれるWebサービス」で簡単にfaviconを作れるWebサービスについて書きました。このWebサービスではPCのfavicon以外にiPhoneやiPadのアイコン画像も作成してくれています。WordPressのヘッダにコードを追加して、iPhoneやiPadのアイコン画像を表示できるようにしました。それについて書きます。

画像を使ってfaviconをアップロードした状態

今作っているサイトのfaviconを「写真や画像から簡単に各種faviconを作成してくれるWebサービス」で作りました。自動生成されたフォルダには、

このようにたくさんの画像HTMLなどが入っています。この中の favicon.ico をサイトのルートディレクトリにアップロードするとPCのブラウザで見たときに

このようにfaviconが表示されます。この時点ではまだ、iPhoneのホーム画面に追加をしても、

こんな感じに、サイトのハードコピーのようになっています。

iPhoneやiPadのアイコン画像の指定方法が書いてあるhtml

フォルダに入っている favicon.html を開いてみると、

このように書いてあります。これをHTMLのヘッダに追加すればiPhoneやiPadのアイコン画像が指定できそうです。

functions.phpでヘッダに記述を追加する

基本的にカスタマイズをするときは子テーマを使っています。子テーマだと直接head部分の修正をしてしまってもいいような気がしますが、functions.phpでヘッダに記述を追加したいと思います。functions.phpでヘッダに表示する方法はどのテーマを使っていても同じなのでテーマ毎に異なるhead部分を探して修正する必要が無いからです。

functions.phpに

function addFavicon(){ で先ほどの favicon.html の中身をechoして、そのfunctionを add_action(‘wp_head’, ‘addFavicon’); と指定すると、headerにechoしたfavicon.html
内容が追加されます。つまりこれでiPhoneとiPad用のアイコンの指定がされます。

ここに記述されている画像全てをfavicon.icoをアップロードした、Webサイトのルートパスにアップロードします。

iPhoneとiPadでホームアイコンを確認してみる

この状態でiPhoneとiPad のホームに追加をしてアイコンを確認してみます。

iPad

iPhone

このようにかわいいアイコンが表示されて、印象が全然違います(^^)/。

Webサービスで各種アイコンが自動的に作成できますので、あとはこのfunction.phpへコードを追加することで簡単にiPhoneやiPadそして(実機がないので確認はできてませんが)アンドロイドなどでのアイコンも指定できます。お試しください!

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

トップへ戻る