アイキャッチ画像をもう少しデザイン要素として使えないか…
投稿ページ毎にヘッダーイメージを変えるためにアイキャッチ画像を用いるソースは以前試してみた。
で、もう少しデザイン要素として扱う方法を模索してみる。
とりあえず、全体の背景として落とし込んでみる。
固定ページテンプレートとして作成するので固定ページのみの仕様となるが…
「全体」というところがポイントで、Wordpressの構造としてheaderとfooter、そしてそれを「get」で呼び出して全体のデザインを構築している感じなので、ヘッダー部分とメインコンテンツを跨いでスタイルを割り当てなくてはいけない。
果たして可能なの？
用意するのはヘッダー用のPHPと固定テンプレート用のPHP
スタイルシートをPHPをまたいで指定する…という正しいのか正しくないのか解らない方法でやってみる。
まず、オリジナルヘッダーを用意。これはベースとなるシンプルなヘッダーを複製して作成した。Xeory Extensionはそのままheader.phpを流用でOK。
とりあえず【header-eyecatch-bg.php】と命名。
そこにCSSで背景画像を指定するのだが、背景画像となるアイキャッチ画像のURLを取得するPHPは以下の通り。
<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>
このPHPで取得したURLをCSSのbackground要素で扱うと…
<span style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>)"></span>
この span から /span までに囲まれたエリアに先のbackgroundが効いてくる。
場合によっては div でもよい。
で、見せ方はこのCSS上で完結してみる。
<div style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>); background-repeat: no-repeat; background-position: 0px -100px; background-size: cover; "><div style="background-color: rgba(256,256,256,0.8);">
次に、このヘッダーを反映させる固定ページテンプレートを作成。
基本のテンプレートを複製して【page-tgd-eyecatch-bg.php】と命名。
フッターを呼び出すPHPの前にdiv終了タグを記述。
</div> <?php get_footer(); ?>
こんな感じ。
サンプルページはこちら。
どんな画像でも対応できるようにオーバーレイをかけてみる
先に作った【header-eyecatch-bg.php】に追記したCSS（div style=”background〜）の直ぐ下にオーバーレイ用のCSSを配置。
<div style="background-color: rgba(256,256,256,0.8);">
で、【page-tgd-eyecatch-bg.php】の末尾手前に同じようにdiv終了タグを記述。
PHPをまたぐ終了タグなので解りやすいようにコメントも追記。
</div><!-- /背景色を取得（始まりのdivはheader-eyecatch-bg.php） --> </div><!-- /アイキャッチ背景を取得（始まりのdivはheader-eyecatch-bg.php） --> <?php get_footer(); ?>
