WordPress管理画面からサイトロゴ画像に変更できるようになりました。
サイトロゴをWordPress管理画面から画像に変更する方法
Simplicityのタイトル表示は、デフォルトでテキストになっています。
ただ、サイトを運営している人の中には、ヘッダーをサイトのロゴに変更したい方もいると思うので、カスタマイズ方法を紹介します。
なお、これらのカスタマイズは子テーマを適用して行うとSimplicityをアップデートする時に上書きをする心配はなくなります。
変更前のタイトル
まず、変更前の状態を確認しておきます。
デフォルトではこのようにテキストリンクになっています。
この状態から、ロゴを画像に変更します。
タイトル用の画像を用意
まずはタイトルロゴとなる画像を用意します。
今回は、例のためにSquarespace Logoで以下のように作成しました。
幅200px、高さ136pxの透過PNGです。
画像にlogo.pngと名前をつけて、テーマフォルダのimagesフォルダーにコピーしておきます。（小テーマのimagesフォルダーだとなおよし）
header.phpの編集
header.phpを編集します。
子テーマを使用している場合は、オリジナルのheader-logo.phpを子テーマ内のフォルダ内にコピーして編集するとSimplicityをバージョンアップする時に、誤って上書きするのを防ぐことができます。
まずはエディターの検索機能なのでheade-logor.php内の以下の部分を見つけてください。
<?php $site_title = '<a href="'.home_url('/').'">'.get_bloginfo('name').'</a>' ?>
これを以下のように変更します。
<?php $site_title = '<a href="'.home_url('/').'"><img src="'.get_stylesheet_directory_uri().'/images/logo.png" alt="'.get_bloginfo('name').'" /></a>' ?>
ロゴが全て表示されていません。これは、スタイルでヘッダーの高さを限定しているからです。これを修正する必要があります。
style.cssの編集
style.cssの#h-top部分を以下のように変更します。（子テーマだと、style.cssに追記）
#h-top{
height: 200px;/*画像の高さによって調整する*/
}
※WordPress管理画面「外観→カスタマイズ→ヘッダー画像」からも、ヘッダーの高さを変更できます。
どちらの方法を利用してもOKです。
表示確認
すると、以下のようにロゴが全部表示されました。高さは画像の大きさに併せて調節してください。
透過PNGを使っているのでモバイル画面でも以下のように表示されます。
デフォルトのスタイル状態なら、モバイル用にスタイルシート変更する必要はありません。
