ゼロから始めるWordPress自作テーマ #12「ブログのアイコンをつくろう」
WordPress
「ゼロから始めるWordPress自作テーマ」では、既成のテーマを使わずにゼロからWordPressサイトを構築する方法を、私のブログサイト「OUNI studio」の構築例をもとに紹介します。
WordPressの既成テーマは簡単にインストールできますが、実際にサイトを構築する際には、既成のテーマをカスタマイズするよりも、自分でテーマを作成した方が簡単な場合が多いです。自分でWordPressテーマを作れるようになれば、サイトを自由にデザインできるようになります。
第１２回は「ブログのアイコンをつくろう」です。
今回は、ブログのアイコンをつくります。ブログのアイコンは、SafariやGoogleChromeなどのブラウザや、iOSやAndroidなどのOSごとに適切なデータを用意する必要があります。簡単にアイコンデータを出力する方法と、WordPressでの指定方法を紹介します。
完成形
今回の完成形は以下のとおりです。サイトのアイコンが表示できるようになります。
今回のコード一式は以下から取得できます。
アイコン画像を作成する
アイコン画像を 260×260 pixel のサイズで作成します。
作成方法は何でもOKです。わたしは、Canvaと呼ばれるサイトで作成しました。
作成した画像は以下になります。
アイコン画像から各フォーマットのデータを作成します。
アイコン画像のフォーマットは、ブラウザの種類やOS（Android , iOS）で異なります。それぞれに適した画像データを用意するのは面倒です。
そうした各フォーマットの画像を簡単に作成してくれるウェブサービスがあります。
上記のサイトで、先ほど作成した260×260の画像を指定してアイコンデータを生成します。サイトの手順通り進めていけば簡単にデータを生成できます。
生成が完了したら、以下のような表示になります。「Favicon package」ボタンを押してダウンロードします。
アイコンデータを設定する
先ほどのZipファイルを解凍します。
そして、themeフォルダにfaviconフォルダを生成して、その中にデータ一式をコピーします。
これでデータは完了です。あとは、header.php でfaviconを設定するだけです。
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri(); ?>/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_template_directory_uri(); ?>/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri(); ?>/favicon/favicon-16x16.png">
<link rel="manifest" href="<?php echo get_template_directory_uri(); ?>/favicon/site.webmanifest">
<meta name="msapplication-config" content="<?php echo get_template_directory_uri(); ?>/favicon/browserconfig.xml">
<link rel="mask-icon" href="<?php echo get_template_directory_uri(); ?>/favicon/safari-pinned-tab.svg" color="#000000">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">また、ダウンロードしたfaviconデータの一部を、サイトに合わせて書き換える必要があります。
site.webmanifest というファイルをVSCodeなどで開いて、src の場所を書き換えます。
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/wptest/wp-content/themes/テーマ名/favicon/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/wptest/wp-content/themes/テーマ名/favicon/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}bdowserconfig.xml も同様に src を書き換えます。
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/wptest/wp-content/themes/テーマ名/favicon/mstile-150x150.png"/>
<TileColor>#ffffff</TileColor>
</tile>
</msapplication>
</browserconfig>Faviconの設定を確認する
faviconデータを作成した以下のサイトで、Faviconが正しく各環境で表示されるかを確認できます。
チェックしたい自分のWordPressサイトのURLを指定すると、チェック結果が表示されます。
正しく設定できていると以下のような結果になるはずです。
まとめ
今回はブログのアイコンデータを作成しました。iPhone のホーム画面に作成したアイコンが並ぶと、ちょっとうれしい気分になります。
次回は、ニューモフィズム風にブログデザインを変更します。