2014-11-16

WordPressテンプレートのサイトタイトル（ロゴ画像）をテキストに変更する方法

Minimal WPのテーマはサイトタイトルをロゴ画像で表示するようになっています。
管理画面からロゴ画像をアップロードするだけなので簡単に変更出来るのですが、
画像じゃなくて、普通のテキスト表示に変更したい！という場合のやり方を解説します。

WordPressテンプレートのサイトタイトルのロゴ画像をテキストに変更する方法

ヘッダー（ダッシュボード＞外観＞テーマエディター（テーマの編集）＞header.php）を開いて下記の部分を探します。

＜!-- ロゴ --＞＜h1 class="logo"＞＜a href="＜?php bloginfo('home'); ?＞" title="＜?php bloginfo('name'); ?＞"＞＜img src="＜?php echo (get_option('logo_url')) ? get_option('logo_url') : get_bloginfo('template_url') .'/images/logo.gif' ?＞" alt="＜?php bloginfo('name'); ?＞"/＞＜/a＞＜/h1＞＜!-- / ロゴ --＞

テーマによりますけど、だいたいこんなようなことが書いてあります。
ややこしいWordPress用のコードが出てくるのですが、
これを単純に要約すると、

＜a href=”リンク先URL”＞＜img src=”ロゴ画像”＞＜/a＞

という、めちゃくちゃ単純なHTMLを最初に覚える時に出てくる基本型です。
これをロゴ画像からテキストに変更してみます。

＜簡単な方法その１＞

＜h1 class="logo"＞＜a href="リンク先URL"＞サイトタイトル＜/a＞＜/h1＞

HTMLを直接編集するなら、単純に上記のような感じでタイトルテキストを書いちゃえばOKです。
めちゃくちゃ簡単です。

＜簡単な方法その２＞

＜h1 class="logo"＞＜a href="＜?php bloginfo('home'); ?＞"＞＜?php bloginfo(‘name’); ?＞＜/a＞＜/h1＞

WordPressの基本タグをちゃんと使うなら上記のような感じです。
これだと、管理画面で設定しているタイトルが表示されます。

＊ご利用のテーマによってはheader.phpに加え、header-top.phpなど、
複数のヘッダーファイルが用意されている場合はがあります。
その場合は、両方のファイルを同様にカスタマイズしてください。

あとはスタイルシートで.logoの所に文字の大きさとかお好みで装飾すればOKです。
余裕があれば、Webフォントなんかにするとかっこいいのが作れますよ。
以上です！

＊「＜」と「＞」は半角の「<」と「>」に置き換えてくださいね。