「写真や画像から簡単に各種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 を開いてみると、
<link rel="icon" sizes="16x16 32x32 48x48 64x64" href="favicon.ico"/> <!--[if IE]> <link rel="shortcut icon" href="favicon.ico"/> <![endif]--> <!-- Optional: Android & iPhone--> <link rel="apple-touch-icon-precomposed" href="favicon-152.png"/> <!-- Optional: IE10 Tile.--> <meta name="msapplication-TileColor" content="#FFFFFF"/> <meta name="msapplication-TileImage" content="favicon-144.png"/> <!-- Optional: ipads, androids, iphones, ...--> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="favicon-152.png"/> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon-144.png"/> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="favicon-120.png"/> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon-114.png"/> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon-72.png"/> <link rel="apple-touch-icon-precomposed" href="favicon-57.png"/>
このように書いてあります。これをHTMLのヘッダに追加すればiPhoneやiPadのアイコン画像が指定できそうです。
functions.phpでヘッダに記述を追加する
基本的にカスタマイズをするときは子テーマを使っています。子テーマだと直接head部分の修正をしてしまってもいいような気がしますが、functions.phpでヘッダに記述を追加したいと思います。functions.phpでヘッダに表示する方法はどのテーマを使っていても同じなのでテーマ毎に異なるhead部分を探して修正する必要が無いからです。
functions.phpに
/** 作成したfavicon各種を追加する */
function addFavicon(){
echo '
<link rel="icon" sizes="16x16 32x32 48x48 64x64" href="favicon.ico"/>
<!--[if IE]>
<link rel="shortcut icon" href="favicon.ico"/>
<![endif]-->
<!-- Optional: Android & iPhone-->
<link rel="apple-touch-icon-precomposed" href="favicon-152.png"/>
<!-- Optional: IE10 Tile.-->
<meta name="msapplication-TileColor" content="#FFFFFF"/>
<meta name="msapplication-TileImage" content="favicon-144.png"/>
<!-- Optional: ipads, androids, iphones, ...-->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="favicon-152.png"/>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon-144.png"/>
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="favicon-120.png"/>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon-114.png"/>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon-72.png"/>
<link rel="apple-touch-icon-precomposed" href="favicon-57.png"/>
';
}
/** headに追加する */
add_action('wp_head', 'addFavicon');
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そして(実機がないので確認はできてませんが)アンドロイドなどでのアイコンも指定できます。お試しください！
コメント