投稿・固定ページごとにレイアウトを変える「Layout Settings」の解説

「ブログ記事はサイドバー付きの2カラムにしたいけれど、ランディングページや会社概要だけはサイドバーを消して全幅で見せたい」——そんなふうに、ページごとにレイアウトを変えたくなる場面は意外と多いと思われます。

サイト全体の設定だけで運用していると、特定のページだけ調整するために追加CSSやテンプレートの複製に手を出してしまい、管理が複雑になりがちです。

Apuraテーマには、投稿・固定ページの編集画面サイドに表示される「Layout Settings（レイアウト設定）」メタボックスが用意されています。コードを書かずに、そのページだけレイアウトを切り替えたり、特定の要素を非表示にしたりできる機能です。

この記事では、Layout Settingsでできること、各設定の使い方、レイアウトが決まる優先順位、そして開発者向けのカスタマイズ方法まで、テーマの実装にもとづいて詳しく解説します。

Layout Settingsでできる4つの設定

このメタボックスでは、現在編集しているページに対して次の4つの設定を個別に上書きできます。いずれもそのページ単体にのみ適用され、他のページには影響しません。

設定項目	種類	効果
Layout	選択	このページのカラム構成（サイドバーの位置やフルワイド）を上書きする
Disable Entry Header	チェックボックス	タイトルなどのエントリーヘッダー（カバー画像を含む）を非表示にする
Disable Breadcrumbs	チェックボックス	そのページのパンくずリストを非表示にする
Disable Vertical Spacing	チェックボックス	本文エリア上下の余白（縦方向の余白）を取り除く

初期状態ではどの項目も未設定（空）になっており、その場合はサイト全体やコンテキストごとの設定がそのまま使われます。つまり、必要なページだけ「上書き」する使い方が基本です。

各設定の使い方

Layout：このページだけカラム構成を変える

「Layout」のセレクトボックスでは、このページに適用するカラム構成を選べます。選択肢は次のとおりです。

• （空欄）：上書きしない。サイト全体やコンテキストの設定に従う
• コンテンツ + サイドバー：本文を左、サイドバーを右に配置する2カラム
• サイドバー + コンテンツ：サイドバーを左、本文を右に配置する2カラム
• サイドバーなし：サイドバーを表示しない1カラム（コンテンツ幅は通常どおり）
• Full Width（フルワイド）：サイドバーを表示せず、本文エリアを最大幅まで広げる

たとえばランディングページならFull Widthを選ぶと、余計な要素のない1カラムの広い紙面になります。「サイドバーなし」と「Full Width」の違いは本文エリアの最大幅で、前者は通常のコンテンツ幅を保ち、後者はより広く使えます。

Disable Entry Header：タイトル・カバーを隠す

チェックを入れると、そのページのエントリーヘッダー（タイトルや日付などのヘッダー領域）が出力されなくなります。Apuraではタイトルを「カバー」表示にしている場合、カバー画像も同時に非表示になる点が重要です。本文の冒頭でフルワイドのビジュアルブロックを置きたいときなど、テーマ側のタイトル表示を消したい場面で役立ちます。

Disable Breadcrumbs：このページだけパンくずを消す

サイト全体ではパンくずリストを表示していても、トップページ的に使う固定ページやLPでは不要なことがあります。このチェックを入れると、そのページに限ってパンくずリストが非表示になります。SEO設計上パンくずは基本的に残すことが推奨されますが、デザイン上どうしても外したい1ページだけ、といった用途に向いています。

Disable Vertical Spacing：上下の余白をなくす

チェックを入れると、本文エリアの上下（縦方向）の余白が取り除かれます。先頭から背景色いっぱいのセクションを始めたいフルワイドなLPなどで、本文上部の余白が邪魔になるケースに効果的です。Layoutを「Full Width」にし、さらにこの設定を組み合わせると、画面の端から端まで余白なしのデザインを作りやすくなります。

設定の手順

レイアウトが決まる「優先順位」を理解する

Apuraのレイアウトは複数の場所で設定できるため、「どこの設定が最終的に効くのか」を把握しておくと混乱しません。個別投稿・固定ページの場合、レイアウトは次の優先順位で決まります。

1. Layout Settingsメタボックスの「Layout」（最優先）— このページに値があれば、ほかの設定より優先される
2. コンテキストごとの設定 — 投稿なら「Single（投稿）」、固定ページなら「Page（固定ページ）」のレイアウト設定
3. サイト全体のレイアウト設定 — 上記がいずれも未設定の場合の既定値

つまり、メタボックスで何か選んでいる限り、カスタマイザーの全体設定を変えてもそのページだけは反映されません。「サイト全体の設定を変えたのに特定ページが変わらない」という場合は、まずそのページのLayout Settingsを確認してみてください。なお、アーカイブや検索結果などの一覧ページは個別メタの対象外で、アーカイブ用のレイアウト設定が使われます。

【開発者向け】カスタム投稿タイプへの拡張とフック

Layout Settingsは、初期状態ではpost（投稿）とpage（固定ページ）に表示されます。カスタム投稿タイプでも使いたい場合や、独自の項目を追加したい場合は、テーマが用意しているフックを利用します。

カスタム投稿タイプにメタボックスを表示する

apura_metabox_layout_post_types フィルターで、メタボックスを表示する投稿タイプを追加できます。子テーマの functions.php に次のように記述します。

<?php
/**
 * Layout Settings メタボックスをカスタム投稿タイプ「product」にも表示する。
 *
 * @param array $post_types 対象の投稿タイプ配列。
 * @return array
 */
add_filter(
	'apura_metabox_layout_post_types',
	function ( $post_types ) {
		$post_types[] = 'product';
		return $post_types;
	}
);

これだけで、product 投稿タイプの編集画面にも「Layout Settings」が表示され、投稿・固定ページと同じようにレイアウトを個別設定できるようになります。

独自のコントロールを追加する

メタボックスの登録時には apura_metabox アクションが実行され、メタボックスのマネージャーが渡されます。これを利用すると、既存のメタボックスに独自のチェックボックスなどを追加できます。

次の例は、Layout Settingsに「このページでフッターを非表示にする」チェックを追加するものです。

<?php
use Apura\Metabox\Controls\Checkbox;

/**
 * Layout Settings に独自のチェックボックスを追加する。
 *
 * @param \Apura\Metabox\Manager $metabox メタボックスマネージャー。
 * @return void
 */
add_action(
	'apura_metabox',
	function ( $metabox ) {
		$metabox->add_control(
			new Checkbox(
				'_apura_meta_disable_footer',
				[
					'default' => '',
					'label'   => __( 'Disable Footer', 'your-textdomain' ),
				]
			),
			'apura_layout'
		);
	},
	20
);

追加した値は、テンプレート側で get_post_meta() を使って取得し、出力を分岐させます。取得した値は必ずエスケープ・型変換のうえで扱ってください。

<?php
// 例：フッターを出力する前に、ページ個別設定をチェックする。
$disable_footer = (bool) get_post_meta( get_the_ID(), '_apura_meta_disable_footer', true );

if ( $disable_footer ) {
	return; // このページではフッターを出力しない。
}

レイアウト判定そのものをコードで上書きする

最終的なレイアウト判定は apura_get_layout フィルターを通ります。条件分岐タグと組み合わせれば、メタボックスを使わずにコードで一括制御することも可能です。たとえば「カテゴリー news に属する投稿はすべてサイドバーなしにする」場合は次のように書きます。

<?php
/**
 * 特定カテゴリーの投稿をサイドバーなしレイアウトに強制する。
 *
 * @param string $layout 現在のレイアウト識別子。
 * @return string
 */
add_filter(
	'apura_get_layout',
	function ( $layout ) {
		if ( is_singular( 'post' ) && has_category( 'news' ) ) {
			$layout = 'no_sidebar';
		}
		return $layout;
	}
);

よくある質問