WordPress 固定ページを2カラム構成に

テーマ「Twenty Seventeen」の固定ページがタイトルと内容で2カラム構成だったのを、(タイトル+内容)とウィジェットのブログサイドバーで2カラム構成に変更しました。

①外観>テーマの編集>template-functions.php

has-sidebarのclassが is_page() のときに適用されないので、以下の ! is_page() の条件をはずす

// Add class if sidebar is used.
if ( is_active_sidebar( 'sidebar-1' ) /* && ! is_page() */ ) {
	$classes[] = 'has-sidebar';
}

②外観>テーマの編集>個別投稿ページ (page.php)

</div><!– .wrap –> の前に <?php get_sidebar(); ?> を追加

③CSSの調整

ここまでだと、固定ページのタイトルと内容部分がカラム分割されて3カラム状態になるので、以下のように has-sidebar がある場合にはカラム分割が適用されないように修正する

@media screen and (min-width: 48em) {
/* 略 */
	body:not(.has-sidebar):not(.page-one-column) .page-header,
	body.has-sidebar.error404 #primary .page-header,
	body.page-two-column:not(.archive):not(.has-sidebar) #primary .entry-header,/* ここに :not(.has-sidebar) を追加する */
	body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
		float: left;
		width: 36%;
	}

	.blog:not(.has-sidebar) #primary article,
	.archive:not(.page-one-column):not(.has-sidebar) #primary article,
	.search:not(.has-sidebar) #primary article,
	.error404:not(.has-sidebar) #primary .page-content,
	.error404.has-sidebar #primary .page-content,
	body.page-two-column:not(.archive):not(.has-sidebar) #primary .entry-content,/* ここに :not(.has-sidebar) を追加する */
	body.page-two-column #comments {
		float: right;
		width: 58%;
	}
/* 略 */
}

タイトル文字を大きくしたり等、よしなに調整する。

他のやり方

※CSSに :not(.has-sidebar) を追加せずに、 template-functions.php 内で $classes[] = ‘page-two-column’; を適用している箇所、条件のところから is_page() をはずす、というのもありかな、と思ったのですが、アーカイブページが .page-two-column が適用されてて、CSS側で :not(.archive) としていたので、そのやり方にそろえました。