WordPressにヘッダー画像機能(カスタムヘッダー)がない場合の作り方

カスタマイズサポートにてヘッダー画像の導入方法を尋ねられることが多々あるので
設定手順を公開しておきます(´▽`)
(といっても調べれば出てくるんですがw)

今回は依頼の中でも多いTCD010(Blogpress)テーマを使用して行なってみます。

まずはヘッダーのないまっさらな状態。

wpnavi

ここにヘッダー画像を作っていきます。

WordPressにカスタムヘッダー機能を導入

カスタムヘッダーはWordPress自体の機能で
それを採用するかどうかはテーマ制作者次第なんですね。

テーマオプションやアイキャッチ画像、
カスタム投稿タイプと呼ばれるものなんかもそうです。

それぞれの機能をこのテーマ内で使用しますってことを示すためには
「function.php」にコードを書き足す必要があります。

今回のカスタムヘッダーを反映させるためのコードは以下です。

これを「ダッシュボード」→「外観」→「テーマ編集」→
「テーマのための関数(function.php)」の中に追記しましょう。

wpnavi

すると「外観」の中に「ヘッダー」というメニューが加わります。

wpnavi

これだけだとまだサイトには表示されないので
ヘッダー部分にカスタムヘッダーを呼び出す作業を行います。

ヘッダーを表示させるための設定

「ダッシュボード」→「外観」→「テーマ編集」→「header.php」を開いて、
<body>タグ内に以下のコードを追記します。

どこでもいいから突っ込むというよりは、
順序的に適切な場所があるのでその合間にでも入れてあげてください。
(その方が管理もしやすいです)

今回は「ロゴ」と「グローバルメニュー」の間に入れました。

wpnavi

これでカスタムヘッダーが機能します!

ちなみにヘッダー画像を使用するということはロゴを使用しないということなので
ロゴを表示させるコード部分は削除してしまってもかまいません。
(バックアップは忘れずに!)

今回はのちほどCSSにて非表示にすることにします。

ヘッダー画像のアップロード

ヘッダー画像サイズはBlogPressの場合ですと横幅980pxがぴったりです。
今回は縦幅を200pxに設定しました。

ダッシュボード→「外観」→「ヘッダー」を開きます。
使用したい画像をアップロードするか、メディアファイルから選択してください。

サイトを表示させると・・・

wpnavi

いい感じですね!!!(笑)

いや、ここから表示を調整していきましょう(笑)

CSSでヘッダー画像の表示調整

CSSの編集についてはこちらの記事を参照してください。
WordPressでCSSの反映を確認しながら編集する方法

ロゴを非表示にする

#logo_area{ }内に「display:none;」と追記します。

▼変更前

▼変更後

ヘッダー画像の位置を整える

#logo_area{ }の下あたりに以下を追記します。

ヘッダーの縦幅を修正する

現状ではヘッダー画像がヘッダー内に収まっていませんので
ヘッダーの縦幅を調整してあげる必要があります。

縦幅を調整するとグローバルメニューが下がって綺麗に表示されます。

以下のように#header{ }内の「height:240px」の値を調整します。

▼変更前

▼変更後

 

これでヘッダー画像の導入は完了です!

wpnavi

  • このエントリーをはてなブックマークに追加

こんな記事も書きました!