wordpress twentyseventeenのフロントページでサイドバーを表示させる方法

フロントページを固定ページにしたのですが、PCで画面いっぱいに表示させたときに空白が多くバランスが悪くなっていました。固定ページの幅のみを変更しようとしたけれど方法がわかなかったので、サイドバーをつけることにしました。

方法はこちら

子テーマのstyle.cssに


/*————————————————————–
13.2 Front Page
————————————————————–*/

.twentyseventeen-front-page .site-content {
padding: 2.5em 0 1.5em;
}

@media screen and (min-width: 48em) { /* two column start */
/* Layout */
.twentyseventeen-front-page.page-one-column #primary,
.page-template-page-sidebar.page-one-column #primary {
float: left;
width: 58%;
}
.twentyseventeen-front-page.page-one-column #secondary,
.page-template-page-sidebar.page-one-column #secondary {
float: right;
padding-top: 0;
width: 36%;
}
.twentyseventeen-front-page .site-content {
padding: 5.5em 0 2.5em;
}
}


を追加。

 

子テーマのフォルダ(/wpcontent/themes/twentyseventeen-child/)に、ファイル名「front-page.php」、中身が以下の内容のファイルを作成。(<、>、”を半角に変えてください)


<?php
/*フロントページを1コラム1記事の場合にサイドバーを表示させる*/

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_open() || get_comments_number() ) :
comments_template();
endif;

endwhile;
?>

</main>
</div>
<?php get_sidebar(); ?>
</div>

<?php get_footer();


 

コメントを残す

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

CAPTCHA