2015-12-28

WordPressヘッダー最上部にキャッチフレーズ（サイトの説明）を挿入するカスタマイズ

企業サイトとかアフィリエイト用のサイトだと、
サイトのロゴ上のヘッダー最上部にキャッチコピーとか入れたくなる場合ありますよね。
これたまにどうやったら良いの？って聞かれるので、
本日はWordPressにキャッチフレーズを挿入するカスタマイズ方法を。

ワードプレスの基本機能の『キャッチフレーズ』（このサイトの簡単な説明。ってやつ）を、
サイトのヘッダーに表示させてみようと思います。

１）キャッチフレーズを書く

ダッシュボード＞設定＞一般＞キャッチフレーズ

まずは、上記の順でたどって、キャッチフレーズをちゃんと書いておきます。

<?php bloginfo('description'); ?>

WordPressのキャッチフレーズを表示させる専用のタグは、こんなやつです。
これはもうワードプレスが用意してくれてる世界共通のやつなので、そのまま使います。

貼る場所はheader.php（ダッシュボード＞外観＞テーマ編集＞テーマヘッダー）です。
header-xxx.phpというのが用意されてるテーマもあるので、あればそちらも同様に。
＜body ＜?php body_class(); ?＞＞タグの「直後」に貼付けます。
　

<div class="header-text">
<div class="header-text-inner">
<?php bloginfo('description'); ?>
</div>
</div>

そのまま貼ればとりあえず表示されるんですけど、
CSSで見た目をちょっといい感じにするために、ざっくりこ上記のコードで貼ってみます。

.header-text {
width: 100%;
font-size: 85%;
color: #555;
background-color: #CCC;
}

.header-text-inner {
width:960px;
}

この辺はデザインなのでお好みですけど、
背景色を付けて小さめの文字でさりげなくしてみました。

するとこんな感じで、ヘッダー上部に表示されます。簡単ですね。
上のコードだと、Minimal WPのテーマならだいたいそのまま使えると思いますが、
あとは自分のサイトのデザインに合わせてCSSで色とかサイズとか微調整すればOK。

ちなみに企業サイト・ビジネス用のWordPressテーマ「White Studio」なら、
最初からこの仕様になってるので、カスタマイズの必要もありません。
自動的に表示されます。

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

2015-12-28 by minimalwp