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-panels.php

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

content-front-page.php

<?php
/**
 * Displays content for front page
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?>
<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 に、子ページリスト表示用構文行33~55を追加
  • アイキャッチ画像用構文はすべて削除
  • 子ページリスト取得には、get_page 関数を使用
  • カスタムフィールドを利用。
    event-date、event-cat 2つのカスタムフィールドの名前を設定。
  • 子ページのカスタムフィールド event-date に値があれば、表示。なければ、非表示。
  • カスタムフィールド event-date、event-cat の値、および、子ページのタイトルを、下に続く子ページへのリンク付きで表示
  • customized-page1.php で、それぞれの子パネルに割り振られた、panel ナンバーを利用して、ジャンプ先位置を設定。

content-front-page-panels.php

<?php
/**
 * Template part for displaying pages on front page
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

global $twentyseventeencounter;

?>

<article id="panel<?php echo $twentyseventeencounter; ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >

	<?php if ( has_post_thumbnail() ) :
		$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

		// Calculate aspect ratio: h / w * 100%.
		$ratio = $thumbnail[2] / $thumbnail[1] * 100;
		?>

		<div class="panel-image" style="background-image: url(<?php echo esc_url( $thumbnail[0] ); ?>);">
			<div class="panel-image-prop" style="padding-top: <?php echo esc_attr( $ratio ); ?>%"></div>
		</div><!-- .panel-image -->

	<div>
	<div>

	<?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 */ ?>;">

	<?php endif; ?>

		<div class="panel-content">
			<div class="wrap">
				<header class="entry-header">
					<?php the_title( '<h2 class="entry-title" style="color:'. $frontpaneltitlecolor .';">' , '</h2>' ); /* amended by MTA */ ?>
	
					<?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' => '') );

					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><?php echo $page->post_title; ?></p>
					</div>
					<?php
					}
					// child page list till here 
					?>

				</div><!-- .entry-content -->
	
				<?php
				// Show recent blog posts if is blog posts page (Note that get_option returns a string, so we're casting the result as an int).
				if ( get_the_ID() === (int) get_option( 'page_for_posts' )  ) : ?>
	
					<?php // Show four most recent posts.
					$recent_posts = new WP_Query( array(
						'posts_per_page'      => 3,
						'post_status'         => 'publish',
						'ignore_sticky_posts' => true,
						'no_found_rows'       => true,
					) );
					?>
	
			 		<?php if ( $recent_posts->have_posts() ) : ?>
	
						<div class="recent-posts">
	
							<?php
							while ( $recent_posts->have_posts() ) : $recent_posts->the_post();
								get_template_part( 'template-parts/post/content', 'excerpt' );
							endwhile;
							wp_reset_postdata();
							?>
						</div><!-- .recent-posts -->
					<?php endif; ?>
				<?php endif; ?>
	
			</div><!-- .wrap -->
		</div><!-- .panel-content -->
	</div><! -- added by MTA -->
	</div><! -- added by MTA -->
</article><!-- #post-## -->

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

  • フロントページの一つのパネルに、親ページを表示させた時、子ページのリスト表示をします。
  • 既存の content-front-page-panels.php に、行56~78を追加
  • 子ページリスト取得には、get_page 関数を使用
  • カスタムフィールドを利用。
    event-date、event-cat 2つのカスタムフィールドの名前を設定。
  • 子ページ上のカスタムフィールド event-date に値があれば、表示。なければ、非表示。
  • カスタムフィールド event-date、event-cat の値、および、子ページのタイトルをフロントページに表示

ご注意事項

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

コメントを残す

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