当ブログにスマホ用ブックマークアイコンとファビコン（favicon）を設定しました。
※テーマを直接編集した場合、テーマが更新された際にカスタマイズした内容はすべて消えてしまいます。
必ず子テーマを作成して、そちらをカスタマイズして適用してください。
※カスタマイズする際に思わぬ不具合が起こって元に戻せないなど、万一に備えてバックアップをとっておいてください。
必ず子テーマを作成して、そちらをカスタマイズして適用してください。
※カスタマイズする際に思わぬ不具合が起こって元に戻せないなど、万一に備えてバックアップをとっておいてください。
子テーマの作成方法、FTPの設定方法は今回は割愛します。
本番環境ではなくローカルで試したい方は、xammp等phpが表示できるローカル環境を作る方法も検索してみてください。
やってみよう！と思った方、自己責任でお願いします。
プラグインを使う方法もあるようです。
設定の手順
1.画像を作成
adobeのFireWorksで作成しました。
拡張子: png
サイズ: 150×150（ピクセル）
ファビコン用画像名: favicon.png
スマホ用ブックマークアイコン画像名:
apple-touch-icon.png
2.画像をwordpressへアップロード
●wordpressのダッシュボードからアップロード
メディア→新規追加→画像をドラッグ＆ドロップ
●FTPでアップロード
wp-content>uploads>2015>06
(2015>06 の部分はその時点の年月になる）
3.現在適用している子テーマのheader.phpを編集
<head>～</head>の間に以下のタグを追加
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/../../uploads/2015/06/apple-touch-icon.png" />
<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/../../uploads/2015/06/favicon.png" />
/../../uploads/2015/06/apple-touch-icon.png の箇所は画像URLです。必要に応じて変更してください。
これで作業完了です。
・PCのブラウザでページを開いてみて、タブのタイトル横に設定したfaviconが表示されていること
・safariでページをブックマークしてみて、ブックマークアイコンが表示されていること
が確認できれば成功です！
