Twentyseventeen フロントページのパネル表示で使用されているテンプレート

ワードプレスの今年のオリジナル テーマ Twentyseventeen の大きな特徴はフロントページです。フロントページのパネル表示で使用されているテンプレートファイルをまとめました。

front-page.php の中のテンプレートファイル

  • header.php
  • content-front-page.php (最上段のパネル表示)
  • content-front-page-panels.php(2段目以後のパネル表示(*1)
  • footer.php

(*1)
content-front-page-panels.php は、front-page.php 内からダイレクトに呼び出されておらず、template-tags.php 内で定義されている twentyseventeen_front_page_section 関数を経由しています。

  • wp-content
    • themes
      • twentyseventeen
        • inc
          • template-tags.php

template-tags.php からの抜粋

/**
 * Display a front page section.
 *
 * @param $partial WP_Customize_Partial Partial associated with a selective refresh request.
 * @param $id integer Front page section to display.
 */
function twentyseventeen_front_page_section( $partial = null, $id = 0 ) {
  if ( is_a( $partial, 'WP_Customize_Partial' ) ) {
    // Find out the id and set it up during a selective refresh.
    global $twentyseventeencounter;
    $id = str_replace( 'panel_', '', $partial->id );
    $twentyseventeencounter = $id;
  }

  global $post; // Modify the global post object before setting up post data.
  if ( get_theme_mod( 'panel_' . $id ) ) {
    global $post;
    $post = get_post( get_theme_mod( 'panel_' . $id ) );
    setup_postdata( $post );
    set_query_var( 'panel', $id );

    get_template_part( 'template-parts/page/content', 'front-page-panels' );

    wp_reset_postdata();
  } elseif ( is_customize_preview() ) {
    // The output placeholder anchor.
    echo '<article class="panel-placeholder panel twentyseventeen-panel twentyseventeen-panel' . $id . '" id="panel' . $id . '"><span class="twentyseventeen-panel-title">' . sprintf( __( 'Front Page Section %1$s Placeholder', 'twentyseventeen' ), $id ) . '</span></article>';
  }
}

コメントを残す

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