ファビコン・・? 任天堂・・?
と思った方も、1度は見たことある、こんなアイコン。
また、最近は、ブラウザのアドレスバーのアイコンだけでなく
スマートフォンのホームボタンにも使うことができます。
このアイコンの設定方法について、書いてみます。
アイコンを設定する概要
このアイコンを設定するには、head内にアイコンの設定書きます。
大きめのアイコンは、スマートフォンのホームボタンで活用
小さめのアイコンは、ブラウザのアドレスバーでの活用を想定しています。
ここでは、WordPressでアイコンを管理する方法を紹介します。
WordPress で管理できるように
WordPressを使っている人は、テーマカスタマイザーという便利な機能で、アイコンを登録することができます。
これを表示させるには、functions.phpなどにこんな記述をします。
function my_theme_customizer( $wp_customize ) { $wp_customize->add_section( 'menu_section' , array( 'title' => '画像設定', //セクション名 'priority' => 50, //カスタマイザー項目の表示順 'description' => 'テーマ画像の設定', //セクションの説明 ) ); //png形式のファビコン $wp_customize->add_setting( 'favicon_image' ); $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'favicon_image', array( 'label' => 'favicon', //設定ラベル 'section' => 'menu_section', //セクションID 'settings' => 'favicon_image', //セッティングID 'description' => 'png形式のファビコン', ) ) ); //png形式のホームアイコン $wp_customize->add_setting( 'home_btn_image' ); $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'home_btn_image', array( 'label' => 'ホームアイコン', //設定ラベル 'section' => 'menu_section', //セクションID 'settings' => 'home_btn_image', //セッティングID 'description' => 'png形式のホームアイコン', ) ) ); } add_action( 'customize_register', 'my_theme_customizer' );//カスタマイザーに登録
これで、ヘッダー部分の「カスタマイズ」から、
「画像設定」で、アイコンを追加できるようになります。
WordPressにアイコンの表示方法を追記
表示するための記述を、functions.phpの続きに書きます
//png形式のファビコン function get_the_favicon_image(){ return esc_url( get_theme_mod( 'favicon_image' ) ); } //png形式のホームアイコン function get_the_home_btn_image(){ return esc_url( get_theme_mod( 'home_btn_image' ) ); }
設定したアイコンを表示するための準備は、こんな感じ。
headに追記
これで、アイコンがある場合はアイコンを、
ない場合は、Windows標準形式の.icoを表示するようにしました。
お客様にアイコンを追加していただくには(iPhoneの場合)
最後に、お客様のスマートフォンにもアイコンを登録いただく方法をご紹介。
まずは、ホームページを見ていただき、下の中央にある↑矢印をクリック
ホーム画面に追加をクリック
こんな画面になって、ホームにアイコンを追加できます。
スマートフォンのホーム画面にアイコンがあるだけで
なんかアプリっぽくてテンションあがりますね(笑