ワードプレス テーマ Twentyseventeen カスタマイズ（ 固定ページにサイドバー表示）

• 表示イメージは次のような感じです。
  

  

• 固定ページ編集画面上の「固定ページの属性」欄で、新しく作成したページ・テンプレート「Page with Sidebar」を選択するとサイドバーが表示されます。
  「デフォルトテンプレート」を選択した時は、サイドバーは表示されません。
  

  

• 投稿ページと同じように、スクリーン幅が、48em 以下の時は、サイドバーは、固定ページ記事の下、フッターの上部に表示されます。
• Twentyseventeen では、1 カラム と 2 カラムの どちらかの固定ページが選択できます。
  「外観」＞「カスタマイズ」＞「テーマオプション」
  

  

  
  上記表示イメージは、1 カラム設定の時です。

• wp-content
• • themes
  • • twentyseventeen-child
    • • functions.php（修正なし）
      • style.css（修正なし）
      • template-pages
      • • page-sidebar.php

page-sidebar.php

オリジナルの page.php をコピーして次の 3 点を追加
• テンプレートファイル認識するための「Template Name:」記述（下緑色部分）
• body class 属性追加
  サイドバーが存在する時のスタイルを設定します。（下黄色部分）
• 「get_sidebar()」
  サイドバーを呼び出すための関数です。（下青色部分）

<?php
/**
 * Template Name: Page with Sidebar
 *
 */
add_filter('body_class','my_body_class');
function my_body_class($classes){
  $classes[] = 'has-sidebar';
  return $classes;
}

get_header(); ?>

<div class="wrap">
  <div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

      <?php
      while ( have_posts() ) : the_post();

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

        // If comments are open or we have at least one comment, load up the comment template.
        if ( comments_open() || get_comments_number() ) :
          comments_template();
        endif;

      endwhile; // End of the loop.
      ?>

    </main><!-- #main -->
  </div><!-- #primary -->
  <?php get_sidebar(); /* copy page.php and add this function here  */ ?>
</div><!-- .wrap -->

<?php get_footer();?>

このカスタマイズをダウンロード

ご注意事項