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

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

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

MENU

  • 制作例
  • 編集するテンプレートファイル
  • ご注意事項

制作例

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

展示会・イベント情報

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

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

  • content-front-page.php(テンプレートファイル customized-page1 に紐づく、コンテンツ表示用テンプレート)と、content-front-page-panels.php(フロントパネル上のパネル表示テンプレート)に、若干追加をします。
  • wp-content
    • themes
      • twentyseventeen-child
        • template-parts
          • page
            • content-front-page.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-## -->

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

  • 親テンプレート customized-page1.php に紐づく、最上段のパネルコンテンツ表示用テンプレート
  • 既存の content-front-page.php に、子ページリスト表示用構文行を追加
  • アイキャッチ画像用構文はすべて削除
  • 子ページリスト取得には、get_page 関数を使用
  • カスタムフィールドを利用。
    event-date、event-cat 2つのカスタムフィールドの名前を設定。
  • 子ページのカスタムフィールド event-date に値があれば、表示。なければ、非表示。
  • カスタムフィールド event-date、event-cat の値、および、子ページのタイトルを、下に続く子ページへのリンク付きで表示
  • customized-page1.php で、それぞれの子パネルに割り振られた、panel ナンバーを利用して、ジャンプ先位置を設定。

ご注意事項

  • 表示デザインは、別途スタイルシートで設定してください。
  • 親ページのアイキャッチ画像は表示されません。
  • 子ページにアイキャッチ画像を設定すると、親ページからのジャンプ時に、アイキャッチ画像が表示されてしまうため、アイキャッチ画像は設定しないでください。
  • 当サイトでは、不具合なく動作していますが、他の条件下では、正しく動作しない可能性もありますので、ご自身の責任においてご利用ください。
  • 不具合、もしくは、ご質問等は、お気軽にお問い合わせください。わかる範囲でお答えさせていただきます。

コメントを残す

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