Twentyseventeen カスタマイズ（フロントページ パネル 記事の下に背景画像）

Twenty Seventeen テーマでは、数枚の固定ページ（パネル）を、フロントページに表示することができます。

それぞれの固定ページ（パネル）に、アイキャッチ画像があれば、上部にアイキャッチ画像、その下にコンテンツが表示されるように設定されています。

この記事では、画像と、記事コンテンツを重ねて表示するようにカスタマイズしてみましたのでご報告します。（当サイトトップページでご確認いただけます。）

カスタマイズ コンセプトと方法

コンテンツ下に画像を入れるだけなので、テンプレートファイルに、タグを直打ちすれば済む話ですが、できるだけ汎用性を保つため、「カスタムフィールド」を利用することとしました。

それぞれの固定ページ（パネル）毎で異なってくるようなスタイルの設定を、「カスタムフィールド」でおこなっています。

別の方法として、アイキャッチ画像上にコンテンツを表示する方法もあるとは思いますが、アイキャッチ画像のサイズが、スクリーンサイズに基いて変化するため、コンテンツとのサイズ調整が複雑になります。よって、今回は、その手法を取っていません。

カスタムフィールドの項目と設定内容

修正するテンプレートファイル

修正するテンプレートファイルは、一つだけ。

content-front-page-panels.php

カスタマイズ手順

1. このカスタマイズを行う固定ページ上で、上記テーブルのカスタムフィールド設定を行う。
2. オリジナルの twentyseventeen テーマの中の content-front-page-panels.php を、子テーマの「template-parts」→「page」フォルダにコピー。
3. content-front-page-panels.php 内 global $twentyseventeencounter の下に、次を追記
   （カスタムフィールドで設定した色を$frontpaneltitlecolor変数に設定）

   $frontpaneltitlecolor = get_post_meta(get_the_ID(), "front-panel-title-color",true ); /* added by MTA */

4. content-front-page-panels.php の if ( has_post_thumbnail() )構文内 endif 前に次を追記（背景図・色設定）
   

   <div><!-- added by MTA -->
   <div><!-- added by MTA -->
   <?php else: ?>
   <div style="background: url(<?php echo get_post_meta(get_the_ID(), "front-panel-img",true );  /* added by MTA */ ?>); background-size: contain;">
   <div style="background-color: <?php echo get_post_meta(get_the_ID(), "front-panel-color",true );  /* added by MTA */ ?>;">

5. ページ タイトル色変更の為、content-front-page-panels.php 内 entry-header内the_title関数を修正
   

   the_title( '<:h2 class="entry-title" style="color:'. $frontpaneltitlecolor .';">' , '</h2>' ); /* amended by MTA */

6. 上記記載 div タグのクローズを article クローズ タグ前に記載

   </div><!-- added by MTA -->
   </div><!-- added by MTA -->
   

ご注意事項

• 投稿記事の文字色設定は、投稿記事内で設定していただきます。
• コンテンツ全体の表示位置は、オリジナルのままです。必要に応じて修正をお願いします。
• アイキャッチ画像を設定すると、アイキャッチ画像の下段に、今回の背景画像がある記事が表示されます。
• 背景画像を設定しないで、背景色のみを設定することができます。
• 当サイトでは、不具合なく動作していますが、他の条件下では、正しく動作しない可能性もありますので、ご自身の責任においてご利用ください。
• 不具合、もしくは、ご質問等は、お気軽にお問い合わせください。わかる範囲でお答えさせていただきます。