【theme.json】横幅の設定

2024年8月20日2024年8月22日

この記事では、theme.jsonで横幅を設定する方法について解説しています。

theme.jsonを追加したら、ブロックが全て横幅いっぱいに表示されてしまった人・エディタとフロント側の表示がずれてしまう人はぜひご参考ください。

settings.layout

横幅を設定するには、settings.layoutの項目を指定する必要があります。

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

theme.json

プロパティ解説

contentSize：ブロック生成されるときに指定されるデフォルトの値
wideSize：幅広サイズ

生成されるcssは以下のとおりです。

:root {
  --wp--style--global--content-size: 800px;
  --wp--style--global--wide-size: 1200px;
}

CSS

theme.jsonの設定を追加することで、WordPressのエディタに設定が反映されますが、フロント側は自分でスタイルを記述する必要があります。

この設定方法は、人によってそれぞれのため以下のコードはサンプル程度にご参考ください。

.wrapper > * {
    max-width: calc(var(--wp--style--global--content-size) + 30px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.wrapper > .alignwide {
    max-width: calc(var(--wp--style--global--wide-size) + 30px);
}

.wrapper > .alignfull {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}