「あさま」のあからさま(カスタマイズ「ヘッダー画像」)

前回の「 #サイト基本情報 」に続き、 #あさま テーマにおける #Wordpress の #カスタマイズ 「 #ヘッダー画像 」の設定について紹介いたします。あさまテーマのソースについては、「あさま」開発サイトダウンロードページにて取得できます。

WordPressのカスタマイズ画面

あさまテーマ(実際には「 #あさまっこ 」テーマ)を有効化します。カスタマイズ画面にて「ヘッダー画像」の項目を開くとすでに初期設定された画像が現れます。

カスタマイズ「ヘッダー画像」項目画面

これは #PHP ソース’asama/include/stuff/RegistrationClass.php’にて、次のように’default-image’項目でテーマ内の画像を参照するように設定されているためです。

add_theme_support(
	'custom-header',
	array(
	'default-image'=>get_stylesheet_directory_uri().'/assets/svg/theme_header.svg',
	'random-default'=>false,
	'width'=>640,
	'height'=>320,
	'flex-height'=>true,
	'flex-width'=>true,
	'default-text-color'=>'',
	'header-text'=>true,
	'uploads'=>true,
	'wp-head-callback'=>'',
	'admin-head-callback'=>'',
	'admin-preview-callback'=>'',
	)
);

実際に運用されるテーマ「あさまっこ」の’asamito’ディレクトリ内にある縦横比1:2の #SVG 画像’asamito/asset/svg/theme_header.svg’が参照されます。同じディレクトリに同じ名前のSVG画像を差し替えればヘッダー画像を変更することが可能です。

でも、普通はそんな回りくどいことはしないで「ヘッダー画像」設定で運用することになると思います。私もそうしようとしたのですがSVG画像をヘッダーに設定してみると一つ落とし穴がありました。スポッ…と。

株式会社379のトップページをご覧ください。
ヘッダー画像部分に、円で囲まれた「379inc.」のロゴがあります。これ、すぐ次の白い半透明背景が上に重なっていることを確認できると思います。あとから上から重なってますよね!

「379inc.」のロゴはSVG画像です。私は、表示サイズを心配することなく利用できるので可能な限りSVG画像を利用しています。でもこれを #ビットマップ 画像と同様にimgタグで貼り付けると、なんと!次の背景の上に乗っかって表示されてしまったのです。後ろの #エレメント なのに変ですよね?最初は何が起こったのか困惑してしまいました。
事態は事実なので、致し方なく解決を図りました。
ためしに、 #CSS 指定による背景画像として扱ったらすんなりと下に潜り込んで表示してくれました。

解決策は簡単でしたがテーマへの実装方法はあまり洗練されたものにはならず、私と同様のケースのデザインのため、該当パーツのPHPソース’asama/include/parts/page-poster.php’の中に選択肢をコメントアウトにて次のように仕込みました。

<?php
if($MD==='E404'): ?>
	<article class='content poster' name='PosterBord'><figure class='hustleImageFlex' name='Error404Image'><div class='fix'><img src='<?php echo get_stylesheet_directory_uri().'/assets/svg/e404.svg' ?>' /></div></figure></article>
	<!-- <article class='content poster' name='PosterBord'><figure class='hustleImageBG' name='Error404Image'><div style='background-image:url(<?php //echo get_stylesheet_directory_uri().'/assets/svg/e404.svg' ?>)'></div></figure></article> -->
<?php else:
$is_Poster = get_header_image();
if(!empty($is_Poster)): ?>
	<article class='content poster' name='PosterBord'><figure class='hustleImageFlex'><div class='fix'><img src='<?php header_image(); ?>'' alt='<?php bloginfo("name"); ?>' /></div></figure></article>
	<!-- <article class='content poster' name='PosterBord'><figure class='hustleImageBG'><div style='background-image:url(<?php //header_image(); ?>)' alt='<?php //bloginfo("name"); ?>'></div></figure></article> -->
<?php endif;endif; ?>

背景画像による運用ソースは #コメントアウト してあります。一応、 #404エラー 用のヘッダー画像分も用意してあります。背景画像によるヘッダー画像運用の場合はそのソース行を活きにして、imgタグ運用の方のソース行をコメントアウトします。実際にロードされるPHPは次のようになります。

<?php
if($MD==='E404'): ?>
	<article class='content poster' name='PosterBord'><figure class='hustleImageBG' name='Error404Image'><div style='background-image:url(<?php //echo get_stylesheet_directory_uri().'/assets/svg/e404.svg' ?>)'></div></figure></article>
<?php else:
$is_Poster = get_header_image();
if(!empty($is_Poster)): ?>
	<article class='content poster' name='PosterBord'><figure class='hustleImageBG'><div style='background-image:url(<?php //header_image(); ?>)' alt='<?php //bloginfo("name"); ?>'></div></figure></article>
<?php endif;endif; ?>

なんだったら、背景画像運用で通してしまってもよかったのですが、Wordpressには「おすすめヘッダーをランダム表示」という機能(上の画像参照)があますよね。これが背景画像運用に対応しているとはとても思えなかったので、それを尊重してソースにコメントアウトで加えるという仕込みになりました。かっこう悪いけど致し方ありません。

あとはCSSを調整して、お好みの運用になります。

さて次はカスタマイズ「 #メニュー 」の順番ですが、内容としては前々回の「あさま」のあからさま(メニュー)」と同しになります。ので、飛ばして次はカスタマイズ「 #ウィジェット 」の紹介になります。

ところで、メニューについて一点だけ注意があります。Wordperessの元々のメニュー設定では、メニュー項目が多いと設定時にエラーが発生することがあります。そのような時には、カスタマイズの方でメニューを設定すると上手くいくことがあります。
これは私の場合の事態でほかでは起きないかもしれません。また、Wordpressのバージョンによっても状況が変わるでしょう。とはいえ、手を尽くすということでは参考になるかと…思います。そかさ。