WordPressカスタムヘッダーの作成方法 - Webデザイン・プログラミングオンライン個別指導のAkros

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

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

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

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

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

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

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

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

[html title=”カスタムヘッダーを利用できるようにする”] // カスタムヘッダー
$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 );
[/html] 上記のような内容をfunctions.phpに記述してサーバーにアップロードするとカスタムヘッダー機能が利用できるようになります。

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

カスタムヘッダーで登録した画像を表示したい箇所のテンプレートに下記のコードを挿入
[html title=”カスタムヘッダー画像の表示”] <img src=”<?php header_image(); ?>” height=”<?php echo get_custom_header()->height; ?>” width=”<?php echo get_custom_header()->width; ?>” alt=”” />
[/html]

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