【theme.json】レイアウトの設定方法

theme.jsonの多くのプロパティでは、設定した内容がエディタとフロントの両方で自動的に適用されることが多いですが、レイアウト(layout)はエディタにしか適用されず、フロントは自分で設定する必要があります。

フロントにコンテンツ幅を指定する

{
    "version": 3,
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "settings": {
        "layout": {
            "contentSize": "800px",
            "wideSize": "1200px"
        }
    }
}

JSON

<?php 

function custom_enqueue_scripts() {
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/dist/css/style.css', array(), '1.0.0', 'all');
};
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

PHP

body:is(.single) {
    main {
        > * {
            max-width: var(--wp--style--global--content-size);
            margin-left: auto;
            margin-right: auto;
            padding-left: 15px;
            padding-right: 15px;
        }
        > .alignwide {
            max-width: var(--wp--style--global--wide-size);
        }
        > .alignfull {
            max-width: 100%;
        }
    }
}

SCSS