WordPressカスタムヘッダーの作成方法

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

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

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

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

blog_0920_img01

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

  • 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で幅を取得できます。

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

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

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

カスタムヘッダー実装を無料体験しよう

「カスタムヘッダー」について解説している記事はたくさんありますが、
自分が困っていることにピンポイントで答えてくれている記事はないですよね。

ここにたどりついた人も、そう思ったのではないでしょうか?
この記事を発見した時に想像した「これを読んだらTOPページを全面画像にできるんだな」という希望を叶えるためには、実はまだ不足しています。

流石にこの記事で全てをお伝えしきれなかったので、まずは「無料体験」で実現したいTOPページを教えてください。
どうすれば叶えられるか、余すことなくお伝えいたします。

無料カウンセリングで相談する