ワードプレス テーマ Twentyseventeen カスタマイズ（固定ページをフロントページ的に）

Twenty Seventeen テーマのフロントページでは、数点のセクション（ページ）を、スクリーン(ブラウザ)幅いっぱいのアイキャッチ画像と共に、スライド式に表示しています。

フロントページ以外の固定ページでも、このような表示方法ができるように、カスタマイズしました。（必要かどうかはわかりませんが。。）

作成するテンプレートファイル

作成するテンプレートファイルは、一つだけ。customized-page1.php というファイル名で、twentyseventeen 子テーマ内のあたらしく作成したフォルダ template-pages に保存。

ファイル内の構文は次のとおり。

<?php
/**
 * Template Name: Customized Page1
 *
 */

// adding body class
add_filter('body_class','mta_body_class');
function mta_body_class($classes){
  $classes[] = 'customized-page1';
  return $classes;
}

get_header(); ?>

<div id="primary-custom1" class="content-area">
  <main id="main" class="site-main" role="main">

    <?php
    if ( have_posts() ) :
      while ( have_posts() ) : the_post();
        get_template_part( 'template-parts/page/content', 'front-page' );
      endwhile;
    else :
      get_template_part( 'template-parts/post/content', 'none' );
    endif; 

    // The Query
    $the_query = new WP_Query( array( 'post_parent' => $post->ID ,'post_type' => 'page', 'orderby' => 'date', 'order' => 'DESC') );

    // The Loop
    if ( $the_query->have_posts() ) {
      $twentyseventeencounter = 1;
      while ( $the_query->have_posts() ) {
        $the_query->the_post();
        get_template_part( 'template-parts/page/content', 'front-page-panels' );
        $twentyseventeencounter += 1;
      }
			
    } else {
      // no posts found
    }
    /* Restore original Post Data */
    wp_reset_postdata();
		
    ?>

  </main><!-- #main -->
</div><!-- #primary -->

<?php get_footer();

主な作成ポイント・コンセプト

• フロントページでは、最上段のパネルを表示する時は、front-page.php から、content-front-page.php を、2段目以後のパネル表示の時には、content-front-page-panels テンプレートを呼び出している。よって、今回作成の固定ページでも、フロントページ同様に、最上段のコンテンツ表示用テンプレートは content-front-page.php を、2段目以後は content-front-page-panels.php を取り込むように設定。
• 2段目以後のパネル表示は、wp_query を作って、親の固定ページに紐づいた子の固定ページを引っ張ってきて表示。（行28-44）
• それぞれのパネルの article タグの ID にナンバリングをする為、変数 twentyseventeencounter を準備。
• 通常の固定ページの場合、アイキャッチ画像の幅は、コンテンツ幅と同じ幅になる。スクリーン（ブラウザ）幅いっぱいに表示させる為、id=#primary 設定を、id=#primary-custom1 に変更し、ブラウザ幅いっぱいに表示できるように変更。

固定ページの設定

必要な数の固定ページを作成する。例えば、一つのページ上に3つのセクションを表示する場合は、3つの固定ページを作成する。

一番上段のセクションに表示する固定ページは、「固定ページの属性」欄にある「テンプレート」設定で、上記作成したテンプレートファイル「Customized Page1」を選択する。「親」設定は、「親なし」を選択。



2段目以後のセクションに表示する固定ページは、「固定ページの属性」欄にある「親」設定で、一段目の固定ページを選択する。「テンプレート」は「デフォルトテンプレート」を選択。



このカスタマイズをダウンロード

ご注意事項

• 親ページに、アイキャッチ画像が設定されている場合、その画像が featured img として表示されてしまいます。親ページには、アイキャッチ画像を設定しないでください。（2017/07/08 追記）
• 当サイトでは、不具合なく動作していますが、他の条件下では、正しく動作しない可能性もありますので、ご自身の責任においてご利用ください。
• 不具合、もしくは、ご質問等は、お気軽にお問い合わせください。わかる範囲でお答えさせていただきます。