Twenty Seventeen カスタマイズ（固定ページをフロントページ的に（子ページリスト付））

2017年1月8日の記事「ワードプレス テーマ Twentyseventeen カスタマイズ（固定ページをフロントページ的に）」では、フロントページ以外の固定ページでも、twenty seventeen テーマのフロントページのような表示ができる方法について投稿しました。

今回の記事では、親の固定ページ（最上段のパネル）上に、下に続く固定ページの一覧をリスト形式で表示してみましたのでご紹介します。

制作例

こちらのサイトを参照ください。

展示会・イベント情報

セミナーなどのイベントの一覧を、親の固定ページ（最上段のパネル）上にリスト形式で表示

編集するテンプレートファイル

• content-front-page.php（テンプレートファイル customized-page1 に紐づく、コンテンツ表示用テンプレート）と、content-front-page-panels.php（フロントパネル上のパネル表示テンプレート）に、若干追加をします。

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

content-front-page.php

<?php
/**
 * Displays content front page
 */
?>
<article id="post-<?php the_ID(); ?>"<?php post_class('twentyseventeen-panel'); ?> >

 <div class="panel-content">
  <div class="wrap">
   <header class="entry-header">
    <?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>

    <?php twentyseventeen_edit_link( get_the_ID() ); ?>

   </header><!-- .entry-header -->

   <div class="entry-content">
    <?php
     /* translators: %s: Name of current post */
     the_content( sprintf(
      __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
      get_the_title()
     ) );
    ?>

    <?php
    // child page list from here

    $mypages = get_pages( array(
     'child_of' => $post->ID,
     'sort_column' => 'post_date',
     'sort_order' => 'desc',
     'meta_key' => 'event-date',
     'meta_value' => ''
    ) );
    $panelnumber = 1;
    foreach( $mypages as $page ) {
     $content = $page->post_content;
      if ( ! $content ) // Check for empty page
       continue;

     $content = apply_filters( 'the_content', $content );

    ?>
    <div class="event-meta">
     <span><?php echo get_post_meta($page->ID, 'event-cat', true ); ?></span>
     <span><?php echo get_post_meta($page->ID, 'event-date', true ); ?></span>
    </div>
    <div class="event-content">
     <p><a href="#panel<?php echo $panelnumber ; ?>"><?php echo $page->post_title; ?></a></p>
    </div>
    <?php
    $panelnumber += 1;
    }
    // child page list till here
    ?>

   </div><!-- .entry-content -->

  </div><!-- .wrap -->
 </div><!-- .panel-content -->

</article><!-- #post-## -->

ご注意事項