PHP

【WordPress】サイズごとにサイトアイコンの画像URLを指定する方法

更新日：2023/03/14

WordPresはカスタマイズ機能でサイトアイコンを設定できます。

このとき、縮小した画像ファイルが作成されます。
そのため、小さな画像は何が描かれているのか判別できないことがあります。

この画像がブラウザのタブに表示されると、サイトのイメージを損ねてしまいます。

そこでサイトアイコンのサイズごとに使用する画像を指定できるようにします。
こうすることで、小さいアイコンは単純化したものを、大きいアイコンは見栄えが良いものを表示できます。

今回は、この方法をお伝えします。

WordPressで使用できるサイトアイコンのサイズ

WordPressは次のように、サイトアイコンに関する４つのタグを出力しています。

<link rel="icon" href="https://ドメイン名/wp-content/uploads/cropped-logo-32x32.png" sizes="32x32" />
<link rel="icon" href="https://ドメイン名/wp-content/uploads/cropped-testsite-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://ドメイン名/wp-content/uploads/cropped-testsite-180x180.png" />
<meta name="msapplication-TileImage" content="https://ドメイン名/wp-content/uploads/cropped-testsite-270x270.png" />

これを見ると、次のサイズの画像が使用されているのがわかります。

画像にもよりますが、180ピクセル以上のサイズは見栄え的に問題ないことが多いです。
そこで32ピクセルだけ、画像URLを変更します。

サイトアイコンURLを変更するコード

サイトアイコンのURL変更は、get_site_icon_urlフィルターで行います。

add_filter( 'get_site_icon_url' , function($url, $size){
	$image_url = content_url().'/uploads/';
	switch($size){
		case 32: return  $image_url.'image32.png';
		case 180: return  $url;
		case 192: return  $url;
		case 270: return  $url;
	}
	return $url;
},10,2);

今回は32ピクセルだけなのでswitch文を使用する必要がないのですが、他サイズも変更を視野に置いて少し無駄なコードになっています。

これで32ピクセルのタグのみ、次のように変更されます。

<link rel="icon" href="https://ドメイン名/wp-content/uploads/image32.png" sizes="32x32" />

規定以外のサイトアイコンタグ出力

現在のブラウザはWordPressが規定で出力している４つのタグで十分なようです。

もし、それ以外のサイトアイコンタグを出力するときはsite_icon_meta_tagsフィルターを使用します。

add_filter( 'site_icon_meta_tags' , function($meta_tags){
	$image_url = content_url().'/uploads/';
	$icon_tag = '<link rel="icon" type="image/png" sizes="%s" href="'.$image_url.'/%s" />';
	$apple_touch_icon = '<link rel="apple-touch-icon" sizes="%s" href="'.$image_url.'/%s" />';
	
	$meta_tags[] = sprintf( $icon_tag , '128x128' , 'image128.png');
	$meta_tags[] = sprintf( $icon_tag , '144x144' , 'image144.png');
	
	$meta_tags[] = sprintf( $apple_touch_icon , '57x57' , 'image57.png');
	$meta_tags[] = sprintf( $apple_touch_icon , '60x60' , 'image60.png');
	
	$meta_tags[] = '<link rel="icon" href="'.get_home_url().'/favicon.ico" type="image/vnd.microsoft.icon" />';
	
	return $meta_tags;
});

$meta_tagsは配列で、規定のタグがセットされています。
この配列にタグを追加すると、規定タグと一緒に出力されます。

関連記事

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。