MENU

theme.jsonで横幅を設定する方法（settings.layout）

WordPress
  • URLをコピーしました！

WordPressのtheme.jsonファイルにsettings.layoutの設定を追加することで、テーマのレイアウトを詳細にカスタマイズできます。

目次

settings.layout

以下のコードは、settings.layoutに関する全体的な設定を示しています。この設定によって、標準コンテンツ領域の幅や幅広のサイズ、さらにカスタマイズの可否を制御することが可能です。

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

contentSize

contentSizeプロパティは、ブロック生成時にデフォルトで適用される横幅を指定します。

{
    "settings": {
        "layout": {
            "contentSize": "800px"
        }
    }
}
theme.json

この設定では、コンテンツの幅を800ピクセルに設定しています。この設定により、ページのメインコンテンツエリアのサイズが統一され、デザインの整合性が保たれます。

出力されるCSS変数

contentSizeプロパティを指定すると、WordPressのエディタとフロントエンドに以下のCSS変数が生成されます。

/* エディタ */
.editor-styles-wrapper {
    --wp--style--global--content-size: 800px;
}

/* フロントエンド */
:root {
    --wp--style--global--content-size: 800px;
}
CSS

wideSize

wideSizeプロパティは、幅広表示される要素の最大幅を指定します。

{
    "settings": {
        "layout": {
            "wideSize": "1200px"
        }
    }
}
theme.json

この設定では、全幅表示のコンテンツが最大で1200ピクセルの幅に広がるように設定されています。これにより、画面全体に広がる要素のサイズが制御され、大きなビジュアルコンテンツを表示できます。

出力されるCSS変数

wideSizeプロパティを指定すると、WordPressのエディタとフロントエンドに以下のCSS変数が生成されます。

/* エディタ */
.editor-styles-wrapper {
    --wp--style--global--wide-size: 1200px;
}

/* フロントエンド */
:root {
    --wp--style--global--wide-size: 1200px;
}
CSS

付与されるクラス

幅広が選択されたときに、alignwideのクラスが付与されエディタで使用される以下のスタイルが適用されます。

/* エディタ */
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .alignwide {
    max-width: 1200px;
}
CSS

allowCustomContentAndWideSize

allowCustomContentAndWideSizeプロパティは、ユーザーがテーマの設定画面からコンテンツ幅や全幅表示の幅を自由にカスタマイズできるかどうかを制御します。

{
    "settings": {
        "layout": {
            "allowCustomContentAndWideSize": true
        }
    }
}
theme.json

このプロパティをtrueに設定すると、ユーザーは自由な横幅を指定できます。一方、falseに設定すると、ユーザーはcontentSize、wideSize、および「全幅」から横幅を選択する必要があります。

trueを設定した場合の表示

多くの配布テーマは、カスタム幅を許可するためにこの設定をtrueにしていますが、一部のクライアント向けに制作したオリジナルテーマでは、決められたレイアウトを維持してほしい場合があるため、意図的にfalseを設定することもあります。

allowEditing

allowEditingプロパティは、テーマ内のレイアウト設定が編集可能かどうかを制御します。

{
    "settings": {
        "layout": {
            "allowEditing": true
        }
    }
}
theme.json

このプロパティをtrueに設定すると、サイドバーにレイアウトの項目が表示されますが、false に設定すると、レイアウトの項目は非表示になります。

trueを設定した場合の表示

この設定も、allowCustomContentAndWideSizeと同様に、一部のクライアント向けに項目を非表示にするために使用されることがあります。

useRootPaddingAwareAlignments

useRootPaddingAwareAlignmentsプロパティは、settings.layoutに直接設定するものではありませんが、密接な関連があるためここで紹介します。

このプロパティは、styles.spacing.paddingを使用した際、通常はbodyタグに付く余白を、グループブロックやカバーブロックなどの全幅指定されたブロックにも適用できるようにします。

{
    "settings": {
        "useRootPaddingAwareAlignments": true
    },
    "styles": {
        "spacing": {
            "padding": {
                "left": "15px",
                "right": "15px"
            }
        }
    }
}
theme.json

useRootPaddingAwareAlignmentsプロパティを有効化すると、以下のCSS変数とクラスを出力します。

/* エディタ */
.editor-styles-wrapper {
    --wp--style--root--padding-top: 0px;
    --wp--style--root--padding-right: 15px;
    --wp--style--root--padding-bottom: 0px;
    --wp--style--root--padding-left: 15px;
}

.editor-styles-wrapper .has-global-padding {
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
}

/* フロントエンド */
body {
	--wp--style--root--padding-top: 0;
	--wp--style--root--padding-right: 15px;
	--wp--style--root--padding-bottom: 0;
	--wp--style--root--padding-left: 15px;
}

.has-global-padding {
	padding-right: var(--wp--style--root--padding-right);
	padding-left: var(--wp--style--root--padding-left);
}
CSS

フロントエンドの横幅を指定する

settings.layoutの設定は、WordPressのエディタには自動で反映されますが、フロントエンドには自分で設定を反映させる必要があります。また、厄介な点として、この設定には明確な正解がなく、サイトやテーマの設計方針によって異なる設定が採用されることがあります。そのため、ここで紹介するサンプルコードはあくまで参考程度にご覧ください。

<div class="wrapper">
    <?php if(have_posts()): ?>
        <?php while(have_posts()): the_post(); ?>
            <?php the_content(); ?>
        <?php endwhile; ?>
    <?php endif; ?>
</div>
PHP
{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "useRootPaddingAwareAlignments": true,
        "layout": {
            "contentSize": "800px",
            "wideSize": "1200px",
            "allowCustomContentAndWideSize": true,
            "allowEditing": true
        }
    },
    "styles": {
        "spacing": {
            "padding": {
                "left": "15px",
                "right": "15px"
            }
        }
    }
}
theme.json
.wrapper {
  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);
  > * {
     max-width: var(--wp--style--global--content-size);
     margin-left: auto;
     margin-right: auto;
  }

  > .alignwide {
     max-width: var(--wp--style--global--wide-size);
  }

  > .alignfull {
     max-width: none;
     margin-left: calc(var(--wp--style--root--padding-left) * -1);
     margin-right: calc(var(--wp--style--root--padding-right) * -1);
  }
}
SCSS
WordPress

この記事が気に入ったら
いいねしてね！

よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次