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

WordPressテーマ「BlogPress (TCD010)」
WordPressテーマ「MAG(TCD036)」

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

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

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

wpnavi

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

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

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

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

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

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

// カスタムヘッダー
add_theme_support( 'custom-header' );

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

wpnavi

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

wpnavi

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

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

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

   <!-- custom header -->
<?php $header_image = get_header_image();
          if ( ! empty( $header_image ) ) : ?>
 <div id="header_img">
  <a href="<?php echo home_url(); ?>"><img src="<?php header_image(); ?>" alt="<?php bloginfo('name'); ?>"  /></a>
 </div>
<?php endif;?>

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

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

wpnavi

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

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

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

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

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

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

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

wpnavi

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

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

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

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

ロゴを非表示にする

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

▼変更前

/* logo */
#logo_area { width:250px; height:140px; position:relative; top:27px; }

▼変更後

/* logo */
#logo_area { display:none; width:250px; height:140px; position:relative; top:27px; }

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

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

/* custom header */
#header_img { margin-top:24px; }

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

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

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

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

▼変更前

#header { width:980px; height:240px; margin:0 auto; z-index:30; position:relative; }

▼変更後

#header { width:980px; height:275px; margin:0 auto; z-index:30; position:relative; }

 

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

wpnavi

WordPressテーマ「LUXE (tcd022)」
WordPressテーマ「Precious (tcd019)」

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

background-2850091_1280

CSSでテーブル使わずに簡単レスポンシブ!下線だけ引いて横並びデザイン

こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。 デザインは、下...

MORE

cup-2884023_1280

名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズTIPS色々書きました。

mayuの活動なんかをまとめただけの俗に言う自己紹介サイトがありまして、 ちょっとお手すきになった...

MORE

food-2940553_1280

ローディング・読み込み中の画像を簡単に作成できるツール

ページを読み込みする時などに使う「ローディング画像」は ジェネレーターで簡単に作成することができま...

MORE

coffee-2446645_1280

ページ遷移時のフェード効果を実装するjQuery

リンクをクリックした時にページが滑らか~にフェードしながら遷移する方法です。 今回新たに作成し...

MORE

home-office-569153_1280

コピペで使える固定ソーシャルボタンBOX

WordPressでスクロール時も固定表示されるソーシャルボタンを 簡単に設置するためのテンプレー...

MORE

laptop-2838921_1280

WordPressでCSSの反映を確認しながら編集する方法

CSS編集方法についての前置き 「管理画面」→「外観」→「テーマ編集」→「スタイルシート」から ...

MORE

background-2846221_1280

MacやiPhoneのスクショはめ込み画像を作る

そうそう、こんな画像ってたまに必要なときがありますよね!笑 これ、わざわざ画像を合わせ...

MORE

cup-2315554_1280

商用サイトで使えるフリー素材サイトまとめ

アイコンや壁紙を設定したりアイキャッチ画像を用意したり・・・ と、WEBサイトを作る時に欠かせない...

MORE

architecture-1868502_1280

CORE(TCD027)でトップページの新着記事一覧にページナビをつける

先日導入したCORE(TCD027)テーマについてのカスタマイズ記事でございます。 トップペー...

MORE

season-1985856_1280

WordPressをカスタマイズする前に子テーマを作っておく

子テーマについての前置き WordPressはほとんどの方が既存のテーマから お好みのものを選ん...

MORE

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

flower