stinger5のヘッダー画像の大きさを変更する

前回「stinger5のメインカラムの幅を広くし文字のサイズを変更する」で変更したサイト幅に合わせて、ヘッダー画像も大きくしていきたいと思います。

現在はこのような状況で、ひどく不釣り合いな状況になっています。cssで中央よりにしたり拡大したりといった事もできますが、それでも違和感は感じると思いますので、ここはスッキリと横幅1200pxの画像を取り込めるように改造しましょう。

ヘッダー画像生成部分の改変

「functions.php」の40行目から変更します。

$custom_header = array(
		'random-default'     => false,
		'width'              => 980,
		'height'             => 250,
		'flex-height'        => true,
		'flex-width'         => false,
		'default-text-color' => '',
		'header-text'        => false,
		'uploads'            => true,
		'default-image'      => get_template_directory_uri() . '/images/stinger5.png',
);
add_theme_support( 'custom-header', $custom_header );

この中の「width」と「height」をお好みの大きさに変更しましょう。今回は長さを1200pxに変更してみます。

$custom_header = array(
		'random-default'     => false,
		'width'              => 1200,
		'height'             => 250,
		'flex-height'        => true,
		'flex-width'         => false,
		'default-text-color' => '',
		'header-text'        => false,
		'uploads'            => true,
		'default-image'      => get_template_directory_uri() . '/images/stinger5.png',
);
add_theme_support( 'custom-header', $custom_header );

ばっちり綺麗におさまりましたね。画像を設定しなおせばきちんと1200pxで画像を変更して表示してくれます。

カスタムヘッダー関数は他に何ができるのか

長さを変更する以外にも、「add_theme_support( ‘custom-header’, $custom_header );」では色々な事が可能です。各パラメーターを簡単に解説しておきます。

random-default：画像をランダムで表示するようにするか。
width：横画像幅
height：縦画像幅
flex-height：高さ変更に追従するか
flex-width：幅変更に追従するか
default-text-color：デフォルトの文字色
header-text：ヘッダー画像に文字を入力するようにするか
uploads：画像アップロードを許可するかどうか
default-image：デフォルトで表示する画像の設定

といった感じです。「header-text」をオンにして文字を自由に入れられるようにしたりするとオリジナリティが簡単にアップできますね。