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

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

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

screencapture-mtac-jp-wordpress640x920
固定ページのイメージ・こちらをクリックするとサンプルページに移動

MENU

  • 作成するテンプレートファイル
  • 固定ページの設定
  • ご注意事項

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

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

  • wp-content
    • themes
      • twentyseventeen-child
        • template-pages
          • customized-page1.php

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

    <?php
    /**
     * Template Name: Customized Page1
     *
     */
    
    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」を選択する。「親」設定は、「親なし」を選択。

    customized-page1-parent1
    一段目は、親固定ページとして設定

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

    customized-page1-child1
    二段目以後は子の固定ページとして設定

    ご注意事項

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

“ワードプレス テーマ Twentyseventeen カスタマイズ(固定ページをフロントページ的に)” への1件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です