ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

ブロックテーマでサイトアイコンを設定する方法

ワードプレスのブロックテーマは、投稿や固定ページだけでなく、ヘッダー・フッター・サイドバーおよび投稿一覧といった領域もブロックでカスタマイズができる大きなメリットがありますが、ふと『ブロックテーマでサイトアイコンって、どこで設定するの?』と思いますよね。

ちなみにサイトアイコンとは、ブラウザのタブのところに表示されるアイコンのことです。

例えばデフォルトのテーマTwenty Twenty-three(以下TT3)を例にとってみても、テーマカスタマイザーはなくなっているうえ、サイトエディター内ではテンプレートおよびテンプレートパーツの編集はできてもサイトアイコンの設定欄は見当たりません。

そこで本記事では、ワードプレスのブロックテーマでサイトアイコンを設定する方法について紹介します。

サイトロゴブロックでサイトアイコンも自動設定される

デフォルト状態では次の通り、ワードプレスのwマークがサイトアイコンとして表示されています。

デフォルトのサイトアイコンはWマーク

これを独自のアイコンに置き替えるには、サイトロゴを設定します。設定したサイトロゴ画像は、自動的にサイトアイコンにも適用されるからです。

テーマTT3のヘッダーには、サイトのタイトルが表示されているので、これををロゴ画像に変更してみます。

方法としては、テンプレートパーツのヘッダーを編集して、サイトのタイトルブロックをサイトロゴブロックに置き替え、ロゴ画像を設定するだけです。

手順としては以下の通りとなります。
①サイトエディターを開く(ダッシュボードの外観>エディター
②テンプレートパーツ一覧を開く(左上Wマークをクリック⇒テンプレートパーツタブ)
③一覧の中からheaderをクリック
④サイト
タイトルブロックをロゴ画像ブロックに置き替える
⑤ロゴ画像を設定する

サイトエディターでテンプレートパーツを開く
headerをクリック
サイトのタイトルをサイトロゴに置き替え
サイトロゴ画像を設定

以上でサイトのタイトルがサイトロゴ画像に変わるとともに、同じ画像がサイトアイコンにも自動的に設定されます。

しかし、今回のように横長の画像をサイトロゴに使用した場合は、正方形であるサイトアイコンではうまく表示されません。

横長のロゴをサイトアイコンにするとうまく表示されない

サイトロゴとサイトアイコンを別の画像を設定する方法

サイトロゴには横長画像、サイトアイコンには正方形の画像、というように別々の画像を設定したい場合の方法を紹介します。

実はサイトロゴブロックには、ロゴ画像をサイトアイコンへの設定をOFFにする機能が備わっています。OFFにしたうえで、サイトアイコンの設定をするのです。

再びサイトエディターのheaderテンプレートパーツの編集画面に戻って、先ほど設定したサイトロゴブロックの設定サイドバーで次のように操作します。

①サイトアイコンとして使用する をOFFとする
②”サイトアイコン設定”をクリック

サイトロゴブロックのサイトアイコン設定を操作する

すると次のようにテーマカスタマイザーが開いて、サイトアイコンの設定画面となります。ここでロゴ画像とは別の正方形の画像をアイコンに設定します。

テーマカスタマイザーによるサイトアイコンの設定

以上で、サイトアイコンが設定できました。

設定したサイトアイコン画像

テーマカスタマイザーを復活させる方法

ブロックテーマにはテーマカスタマイザーが表示されなくなっていますが、実は廃止されたわけではないのが、先ほどのサイトアイコンの設定画面で見てもわかります。

テーマカスタマイザーを最初から表示することができれば、サイトロゴブロックをいちいち設定せずとも、サイトアイコンが設定できるようになります。次はテーマTT3にテーマカスタマイザーを表示させた場合です。

TT3にテーマカスタマイザーを追加

テーマカスタイザーのカスタマイズ項目としては多くはありませんが、追加CSSの記述覧が使えるのは、CSSで手軽にカスタイズしたい場合には便利でしょう。

ブロックテーマでテーマカスタマイザーを表示させる方法として次の2つの方法を紹介しておきます。

functions.phpで設定する方法

functions.phpに次のコードを記述すればOKです。

add_action( 'customize_register', '__return_true' );

プラグインで設定する方法

例えば、株式会社ベクトルが提供するプラグインVK All in One Expansion Unit(通称ExUnit)をインストール・有効化するだけです。

プラグインVK All in One Expansion Unit

プラグインExUnitは、ベクトル社が提供する人気テーマLightningの必須プラグインですが、TT3など他のテーマでも使用することができます。

また、ベクトル社は最近ブロックテーマX-T9にも注力しており、そこでもExUnitは必須プラグインとなっています。X-T9もExUnitもワードプレス公式サイトから入手できるので、安心して使うことができるでしょう

まとめ

以上まとめると、次の通りです。

  • サイトロゴブロックでロゴ画像を設定すると、デフォルトでは自動的にロゴ画像がサイトアイコンにも適用される。
  • サイトロゴと別の画像をサイトアイコンとするためには、サイトロゴブロックの設定でサイトアイコンへの適用をOFFにしたうえで、アイコン設定画面(テーマカスタマイザー)で設定する。
  • テーマカスタマイザーを最初から表示して使えれば、サイトロゴブロックを使用せずに直接サイトアイコンを設定できる。
  • テーマカスタマイザーはfunctions.phpへの記述や、プラグインVK All in One Expansionn Unitを使うなどすればブロックテーマでも表示させることができる。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる