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を最初に覚える時に出てくる基本型です。
これをロゴ画像からテキストに変更してみます。

<簡単な方法その1>

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

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

<簡単な方法その2>

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

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

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

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

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

*HTML/CSSの変更を伴うテーマ編集に関しては、無料サポート外となります。
不具合が生じてもサポートできませんので、自己責任で編集作業を行ってください。
必ず必ず必ずバックアップを取って作業することをオススメします!

by
おすすめWordPressテーマ10選