【WordPressで感覚的にヘッダー画像を変更できる機能を付ける】カスタムヘッダー機能を付けて納品するとお客さんにとても喜ばれます

カスタマイズ情報など このページをあとで読む

Webサイトを作る際に「ヘッダー」って結構凝りますよね。カッコイイ、インパクトあるキレイな画像やロゴなどで目を惹いて、サイトの印象を決めるのに一役買っていますかね。

私のこのブログの場合は、ヘッダーにロゴを入れています。このヘッダーにあるロゴのおかげで、結構サイトの存在を覚えてもらいやすくなっていますよ。「ああ～、あの色がいっぱいあるサイトね」みたいな・・・

そんなヘッダーですが、手軽に管理できる方法がWordPressにはあります。「カスタムヘッダー」機能と呼ばれています。この「カスタムヘッダー」機能を導入して納品すると、お客さんにとても喜ばれます。

ではでは、導入方法をご紹介します～。

ヘッダーを管理する「カスタムヘッダー」機能を追加

それでは、ご使用のテーマファイル内に「functions.php」があるとおもいますので、下記のコードを記述します。

add_theme_support( 'custom-header' );

このコードの追加で基本はOKです。（※既にコードの記述があるテーマも存在していますので、その場合はこの手順は飛ばしてください）

コードを追加すると、WordPressの管理画面の「外観」に「ヘッダー」が現れます。クリックしましょう。

下の画像のように「カスタムヘッダー」画面が開きます。

カスタムヘッダーのパラメーターはこんな感じです

パラメータの設定はデフォルトで以下になっています。（引用元：http://wpdocs.sourceforge.jp/Custom_Headers　コメントは私がわかったものだけ追加してます）

$defaults = array(
	'default-image'          => '', //デフォルト画像
	'random-default'         => false, //ランダム表示
	'width'                  => 0, //幅
	'height'                 => 0, //高さ
	'flex-height'            => false, //フレキシブル対応（高さ）
	'flex-width'             => false, //フレキシブル対応（幅）
	'default-text-color'     => '', //デフォルトのテキストの色
	'header-text'            => true, //ヘッダー画像上にテキストを表示する
	'uploads'                => true, //ファイルアップロードを許可する
	'wp-head-callback'       => '', 
	'admin-head-callback'    => '', 
	'admin-preview-callback' => '', 
);
add_theme_support( 'custom-header', $defaults );

上記のパラメーターをいろいろ設定することでカスタムヘッダーの項目もいろいろできますので、お好みでお試しください。

ところで、この「カスタムヘッダー」機能で特徴的なものは以下の2つだと思います。

１．アップした複数の画像をランダム表示できる

手軽にアップした画像をランダム表示させることができます。数種類の違った画像をアップして、ページが切り替わるたびに画像を変えてあげることで、閲覧者側にも飽きが来なくていいですかね。

２．フレキシブルヘッダーに対応

フレキシブル、とは「柔軟に」っていう意味らしいです。というわけで、パラメーターで「flex-height」「flex-width」の設定を「true」にしている場合は、アップした画像に対して柔軟にトリミング（切り取り）ができるようになります。

これはたぶん、画像で見てもらったほうがわかりやすいですかね。こんな感じです。

【通常のトリミング】

【フレキシブルなトリミング】

トリミングの仕方が柔軟になってると思います。画像も大きく表示されて、トリミングしやすいです。これってけっこう役に立つ機能じゃないでしょうか。

もしアップしたヘッダー画像を削除したくなったら・・・この手順でいけます

ちなみに、ヘッダー画像はアップすればするほどたまっていきます。

【調子乗ってたくさん画像をアップしまくった結果・・・いらないものもあるな・・・】

というわけで、ヘッダー画像として使いたくないファイルは、以下の手順で削除しましょう。WordPressの管理画面から「メディア」「ライブラリ」をクリックして編集します。

ライブラリの各画像ファイルに「ヘッダー画像」と書いてあります。

削除したい場合は、「完全に削除する」で削除しましょう。

ヘッダー画像が「テーマカスタマイザー」でも変更できる

カスタムヘッダー機能が追加されていると、WordPress3.4から使えるようになった新機能「テーマカスタマイザー」からも変更が感覚的にできます。

下の画像のようにWordPressの管理画面から「外観」「テーマ」をクリックして、現在のテーマを「カスタマイズ」します。

下の画面に切り替わります。「ヘッダー画像」の欄が追加されていますね。ここからヘッダーの変更ができます。

しかも、ここの画面はライブプレビューに対応してるので、変更が即座に画面右側にプレビュー化されます。とても便利なので、実際の画面でお試し下さい。

ヘッダー画像が表示されない！という場合は、以下をお確かめください

というわけで、テーマカスタマイザーでもラクラクヘッダー画像が変更できるんですが、ごくたまに、「カスタムヘッダーを使っても、ヘッダー画像が表示すらされない！」といった声を聞くことがあります。

その場合は、以下のコードがテーマファイル内に書かれているかを確認しましょう。（※Codexのサンプルコードを用います）

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

と。これがないと表示されません。

意外と忘れる方も多いようなので、ご注意ください。

まとめ

ヘッダー画像を変えることで、サイトの見栄えも変わって運営のモチベーション維持にもつながりますかね。

先ほども触れましたけども、リピートして閲覧いただいている方からすると、変化を楽しんだりしてくださるかたもいらっしゃるかもしれませんね～。

特に「季節ごとにヘッダーを変えたいな～」なんて要望は往々にしてあります。

その場合、WordPress制作を請け負う側（Web制作業者）的には、あらかじめ管理できる機能をつけた上で納品するのもお客さんのためになるんじゃないか、と思います。私個人的にも、あると便利なとても良い機能です。

というわけで、

  • WordPressでヘッダー画像を感覚的に管理したい
  • カスタムヘッダーの機能について設定・導入方法などを知りたい

といった方に少しでもお役に立てますと幸いです。

著者:bouya Imamura