WordPress Twenty Seventeen テーマのページ幅を変更

WordPress.org のフォーラムに「Twenty Seventeen テーマで、全体（ページ）の幅および記事（コンテンツ）の幅を広げたい」というような内容の投稿があったので調べてみました。

ページの幅およびコンテンツの幅を変更する手っ取り早いのは、下記のようなスタイルを追加する方法でしょうか。

スタイル

@media screen and (min-width: 48em) {
	/* ページの幅 */
	.navigation-top .wrap,
	.wrap {
		max-width: 1100px; /* デフォルトは 1000px */
	}
	/* コンテンツの幅 */
	.has-sidebar:not(.error404) #primary {
		width: 58%;
	}
	/* サイドバーの幅 */
	.has-sidebar #secondary {
		width: 36%;
	}
}

コンテンツの幅は、サイドバーの幅も合わせて変更する必要があります。

なお、コンテンツの幅とサイドバーの幅の合計を 100% にすると余白（コンテンツとサイドバーの間）がなくなります。

コンテンツ幅（グローバル変数 $content_width）

コンテンツの幅を変更した場合、グローバル変数 $content_width を変更する必要があります。

$content_width は画像サイスの大サイズや、 oEmbed 埋め込み（YouTube 等）に影響するので、コンテンツの幅に合わせて変更する必要があります。

詳細は、WordPress Codex 日本語版の「コンテンツ幅」を参照してください。

通常（？）のテーマでは下記のような記述をしているため、子テーマで $content_width を設定することで更新できます。

if ( !isset( $content_width ) ) {
	$content_width = 525;
}

しかし、Twenty Seventeen テーマではこの方法で親テーマの設定を更新できません。

子テーマで $content_width を変更するには、下記のように記述しないと更新できないようです。

function twentyseventeen_child_setup() {
	$GLOBALS['content_width'] = 525;
}
add_action( 'after_setup_theme', 'twentyseventeen_child_setup', 11 );