ファビコン・・？　任天堂・・？

と思った方も、１度は見たことある、こんなアイコン。

 

また、最近は、ブラウザのアドレスバーのアイコンだけでなく

スマートフォンのホームボタンにも使うことができます。

 

このアイコンの設定方法について、書いてみます。

 

アイコンを設定する概要

このアイコンを設定するには、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の場合）

最後に、お客様のスマートフォンにもアイコンを登録いただく方法をご紹介。

まずは、ホームページを見ていただき、下の中央にある↑矢印をクリック

 

ホーム画面に追加をクリック

 

こんな画面になって、ホームにアイコンを追加できます。

 

スマートフォンのホーム画面にアイコンがあるだけで

なんかアプリっぽくてテンションあがりますね（笑