ブロックテーマでサイトアイコンを設定する方法
ワードプレスのブロックテーマは、投稿や固定ページだけでなく、ヘッダー・フッター・サイドバーおよび投稿一覧といった領域もブロックでカスタマイズができる大きなメリットがありますが、ふと『ブロックテーマでサイトアイコンって、どこで設定するの？』と思いますよね。
ちなみにサイトアイコンとは、ブラウザのタブのところに表示されるアイコンのことです。
例えばデフォルトのテーマTwenty Twenty-three（以下TT3）を例にとってみても、テーマカスタマイザーはなくなっているうえ、サイトエディター内ではテンプレートおよびテンプレートパーツの編集はできてもサイトアイコンの設定欄は見当たりません。
そこで本記事では、ワードプレスのブロックテーマでサイトアイコンを設定する方法について紹介します。
サイトロゴブロックでサイトアイコンも自動設定される
デフォルト状態では次の通り、ワードプレスのｗマークがサイトアイコンとして表示されています。
これを独自のアイコンに置き替えるには、サイトロゴを設定します。設定したサイトロゴ画像は、自動的にサイトアイコンにも適用されるからです。
テーマTT3のヘッダーには、サイトのタイトルが表示されているので、これををロゴ画像に変更してみます。
方法としては、テンプレートパーツのヘッダーを編集して、サイトのタイトルブロックをサイトロゴブロックに置き替え、ロゴ画像を設定するだけです。
手順としては以下の通りとなります。
①サイトエディターを開く（ダッシュボードの外観＞エディター）
②テンプレートパーツ一覧を開く（左上Wマークをクリック⇒テンプレートパーツタブ）
③一覧の中からheaderをクリック
④サイトのタイトルブロックをロゴ画像ブロックに置き替える
⑤ロゴ画像を設定する
以上でサイトのタイトルがサイトロゴ画像に変わるとともに、同じ画像がサイトアイコンにも自動的に設定されます。
しかし、今回のように横長の画像をサイトロゴに使用した場合は、正方形であるサイトアイコンではうまく表示されません。
サイトロゴとサイトアイコンを別の画像を設定する方法
サイトロゴには横長画像、サイトアイコンには正方形の画像、というように別々の画像を設定したい場合の方法を紹介します。
実はサイトロゴブロックには、ロゴ画像をサイトアイコンへの設定をOFFにする機能が備わっています。OFFにしたうえで、サイトアイコンの設定をするのです。
再びサイトエディターのheaderテンプレートパーツの編集画面に戻って、先ほど設定したサイトロゴブロックの設定サイドバーで次のように操作します。
①サイトアイコンとして使用する をOFFとする
②”サイトアイコン設定”をクリック
すると次のようにテーマカスタマイザーが開いて、サイトアイコンの設定画面となります。ここでロゴ画像とは別の正方形の画像をアイコンに設定します。
以上で、サイトアイコンが設定できました。
テーマカスタマイザーを復活させる方法
ブロックテーマにはテーマカスタマイザーが表示されなくなっていますが、実は廃止されたわけではないのが、先ほどのサイトアイコンの設定画面で見てもわかります。
テーマカスタマイザーを最初から表示することができれば、サイトロゴブロックをいちいち設定せずとも、サイトアイコンが設定できるようになります。次はテーマTT3にテーマカスタマイザーを表示させた場合です。
テーマカスタイザーのカスタマイズ項目としては多くはありませんが、追加CSSの記述覧が使えるのは、CSSで手軽にカスタイズしたい場合には便利でしょう。
ブロックテーマでテーマカスタマイザーを表示させる方法として次の２つの方法を紹介しておきます。
functions.phpで設定する方法
functions.phpに次のコードを記述すればOKです。
add_action( 'customize_register', '__return_true' );プラグインで設定する方法
例えば、株式会社ベクトルが提供するプラグインVK All in One Expansion Unit（通称ExUnit）をインストール・有効化するだけです。
プラグインExUnitは、ベクトル社が提供する人気テーマLightningの必須プラグインですが、TT3など他のテーマでも使用することができます。
また、ベクトル社は最近ブロックテーマX-T9にも注力しており、そこでもExUnitは必須プラグインとなっています。X-T9もExUnitもワードプレス公式サイトから入手できるので、安心して使うことができるでしょう。
まとめ
以上まとめると、次の通りです。
- サイトロゴブロックでロゴ画像を設定すると、デフォルトでは自動的にロゴ画像がサイトアイコンにも適用される。
- サイトロゴと別の画像をサイトアイコンとするためには、サイトロゴブロックの設定でサイトアイコンへの適用をOFFにしたうえで、アイコン設定画面（テーマカスタマイザー）で設定する。
- テーマカスタマイザーを最初から表示して使えれば、サイトロゴブロックを使用せずに直接サイトアイコンを設定できる。
- テーマカスタマイザーはfunctions.phpへの記述や、プラグインVK All in One Expansionn Unitを使うなどすればブロックテーマでも表示させることができる。
