Twenty Seventeen テーマのフロントページでは、数点のセクション(ページ)を、スクリーン(ブラウザ)幅いっぱいのアイキャッチ画像と共に、スライド式に表示しています。
フロントページ以外の固定ページでも、このような表示方法ができるように、カスタマイズしました。(必要かどうかはわかりませんが。。)
MENU
- 作成するテンプレートファイル
- 固定ページの設定
- ご注意事項
作成するテンプレートファイル
作成するテンプレートファイルは、一つだけ。customized-page1.php というファイル名で、twentyseventeen 子テーマ内のあたらしく作成したフォルダ template-pages に保存。
- wp-content
-
- themes
-
- twentyseventeen-child
-
- template-pages
-
- customized-page1.php
ファイル内の構文は次のとおり。
<?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 追記)
- 当サイトでは、不具合なく動作していますが、他の条件下では、正しく動作しない可能性もありますので、ご自身の責任においてご利用ください。
- 不具合、もしくは、ご質問等は、お気軽にお問い合わせください。わかる範囲でお答えさせていただきます。
“ワードプレス テーマ Twentyseventeen カスタマイズ(固定ページをフロントページ的に)” への1件の返信