今回はWordpressのオリジナルテーマを作成されている方向けに
カスタムヘッダーの作成方法をご紹介したいと思います。
Wordpress中級者向けの内容になっていますが、これからWordpressを利用してサイト構築をお考えの方にも参考になる内容になっていますのでご一読ください。

WordPressのカスタムヘッダーとは？

カスタムヘッダーはwordpress3.4以降に導入された機能だったはず・・間違ってたらすんません。
サイトに表示させる画像を1カ所のみ管理画面から好みの画像に変更できるようにする機能ですね。
トップページのメイン画像や、ロゴ画像に使うことが多いようですが別にどこに使っても問題はありません。
例えばサイドバーやフッターに表示している画像の変更にも利用することができます。

WordPressをインストールするとデフォルトで入っているテーマにはカスタムヘッダー機能が実装されているので知らないうちにこの機能を利用していた方も多いのではないでしょうか。
オリジナルテーマを作成する場合はこのカスタムヘッダーの機能は自身で組み込まないと利用することができません。

カスタムヘッダーの実装手順

• functions.phpにコードを追加
• デフォルト画像の用意
• ダッシュボードの「外観」→カスタマイズから画像を変更
• 利用したい箇所のテンプレートにサイト出力するためのコードを挿入（例：header.php）

functions.phpにコードを追加する

まずfunctions.phpに以下のコードを追加します。
画像のサイズ等は自身の環境に合わせて変更してください。
詳細は
WordpressCODEX参照ください。

// カスタムヘッダー
$custom_header = array(
'random-default' => false,
'width' => 960,
'height' => 300,
'flex-height' => true,
'flex-width' => false,
'default-text-color' => '',
'header-text' => false,
'uploads' => true,
'default-image' => get_stylesheet_directory_uri() . '/img/default_img.png',
);
add_theme_support( 'custom-header', $custom_header );

上記のような内容をfunctions.phpに記述してサーバーにアップロードするとカスタムヘッダー機能が利用できるようになります。

カスタムヘッダー画像を出力するコードをheader.phpなどに挿入

カスタムヘッダーで登録した画像を表示したい箇所のテンプレートに下記のコードを挿入

 <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />

上記コードをテンプレートに挿入するとカスタムヘッダーで登録した画像を表示することができます。
header_image()：ヘッダー画像のURLを出力
get_custom_header()：ヘッダー画像の情報を得る（url, width, height, attachment_idなど）
画像のサイズが必要な場合は
get_custom_header()->heightで高さを取得できます。
get_custom_header()->widthで幅を取得できます。

WordPressカスタムヘッダーのまとめ

• 管理画面からロゴ画像やメイン画像を1箇所のみ変更ができる
• 自作のオリジナルテーマで利用する場合はfunctions.phpにコードを追加する必要がある
• 登録した画像は好きな箇所で呼び出せる

以上ではありますがオリジナルテーマを作成している方は一度試してみてはいかがでしょうか。

名古屋駅校では上記のようなWordpressについてのカスタマイズに特化したカリキュラムから
初心者の方向けのWordpress基礎講座（集団）までご用意しております。

WordPressに興味をお持ちの方はお気軽にご連絡ください。
東京・名古屋で開催 WordPress基礎講座 ワードプレスのインストールから使い方が学べる初心者向け入門講座
お問合せ・資料請求
無料体験のお申込み