サイドバーが表示されません

A. 2点を確認してください。1つ目は、現在のページのレイアウトが「No Sidebar」または「Full Width」になっていないか。2つ目は、「外観 → ウィジェット」の Sidebar エリアにウィジェットが1つ以上入っているか。ウィジェットが空のエリアは出力されないため、何か追加すると表示されます。

フッターを3カラムにしたい

A. Footer 1〜3 の3つにだけウィジェットを配置し、Footer 4 を空のままにすれば3カラムになります。表示されるカラム数は「ウィジェットが入っているエリアの数」で自動的に決まります。さらに、均等な幅にするには「カスタマイズ→Footer（フッター）」の「Footer Widgets Columns」で指定します。デフォルトでは4カラムになっています。これを「3」に指定します。デバイス毎に指定できるのでタブレットでは2カラム、スマホでは1カラムなど指定可能です。

投稿ページだけサイドバーを左にできますか

A. できます。「カスタマイズ → Single（投稿）」のレイアウト設定で「Sidebar / Content」を選べば、投稿ページだけサイドバーが左側に表示されます。固定ページやアーカイブはそれぞれ別のセクションで個別に設定できます。

サイドバー＆ウィジェットエリア活用ガイド｜レイアウト切替と開発者向けフック

「サイドバーに人気記事やプロフィールを置きたい」「フッターを4カラムに分けて整理したい」「この固定ページだけサイドバーを消したい」——ブログやビジネスサイトを運営していると、こうしたレイアウトの悩みは必ず出てきます。

Apuraテーマには、サイドバーとフッターのウィジェットエリアが標準で用意されており、コードを書かずにカスタマイザーから細かく配置を切り替えられます。

この記事では、ウィジェットエリアの種類と設定方法から、ページごとのレイアウト切り替え、さらに開発者向けのフックを使った拡張までを順番に解説します。

Apuraのウィジェットエリアは何種類ある？

ウィジェットエリアとは、検索ボックスやカテゴリー一覧、バナーなどの「ウィジェット」を配置できる領域のことです。Apuraでは「外観 → ウィジェット」の画面から、次の3種類のエリアにブロックを自由に追加できます。

ウィジェットエリア	表示位置	主な使い道
Sidebar	本文の横（左右はレイアウト設定で切替）	プロフィール・人気記事・検索・カテゴリー
Footer 1〜4	フッター上部（最大4カラム）	サイトマップ・お問い合わせ・SNS・メニュー
Footer Bottom	フッター最下部	コピーライト・プライバシーポリシーリンク

「Footer 1〜4」は4つの独立したエリアで、ウィジェットを入れたカラムだけが表示されます。たとえばFooter 1とFooter 2だけにウィジェットを置けば2カラム、4つすべてに置けば4カラムのフッターになります。空のエリアは自動的に詰められるため、カラム数を変えるのに特別な設定は不要です。

サイドバーにウィジェットを追加する手順

まずは定番の、サイドバーに検索ボックスと人気記事を表示する流れを見ていきましょう。

ウィジェット画面を開く

WordPress管理画面の「外観 → ウィジェット」を開きます。「Sidebar」というエリアが表示されているはずです。
ブロックを追加する

「Sidebar」エリア内の「＋」ボタンをクリックし、「検索」ブロックや「最新の投稿」ブロックを選んで追加します。ウィジェットは通常のブロックエディターと同じ操作で配置できます。
並び順を調整して更新

ドラッグで表示順を入れ替え、「更新」ボタンをクリックすれば反映されます。サイドバーが表示されないページではウィジェットも出ないため、次のセクションでレイアウト設定も確認しておきましょう。

ウィジェットの見出しは <h2 class="widget__title"> として出力されます。見出しを設定すると自動的に整ったスタイルが当たるので、各ウィジェットにはタイトルを付けておくのがおすすめです。

ただし「Footer Bottom」エリアだけは例外です。このエリアのウィジェットタイトルには u-dn（非表示）クラスが自動で付与されるため、タイトルを入力しても画面には表示されません。

コピーライトやポリシーリンクなど、見出しを必要としない要素を置く前提の設計になっています。タイトルはスクリーンリーダー向けの情報として残るので、入力しておくこと自体はアクセシビリティ上プラスに働きます。

サイドバーの位置とレイアウトを切り替える

サイドバーの位置・有無はレイアウト設定で決まります。「Content / Sidebar」は本文の右、「Sidebar / Content」は本文の左にサイドバーを表示し、「No Sidebar」はサイドバーを表示しません。左右の配置は広い画面の場合で、狭い画面では基本的に縦並びになります。

サイト全体のレイアウトはサイトレイアウト設定ガイドで説明しています。

投稿用のSingleと固定ページ用のPageにも、それぞれ共通のレイアウト設定があります。特定のページだけ変更したい場合やFull Widthを使いたい場合は、編集画面のLayout Settingsを使います。

個別設定の4項目、操作手順、優先順位、解除方法はページ別レイアウト設定ガイドをご覧ください。このメタボックスにSidebar Widthの項目はありません。幅の調整は次の共通設定で行います。

投稿と固定ページでサイドバー幅を使い分ける

Sidebar Widthは、サイト全体に加えて、投稿用のSingleと固定ページ用のPageでも指定できます。たとえば投稿ページの幅を22%、固定ページの幅を30%にする使い分けができます。それぞれの表示種類に共通する値であり、投稿や固定ページを1件ずつ選んで幅を変える設定ではありません。

設定場所	適用範囲	初期状態
サイト全体のレイアウト設定	サイト全体のサイドバー幅。	25%
SingleのGeneral	投稿ページに共通のサイドバー幅。	未指定ならサイト全体の値を使う。
PageのGeneral	固定ページに共通のサイドバー幅。	未指定ならサイト全体の値を使う。

指定範囲はいずれも10〜100%です。SingleとPageでは、該当するレイアウトがサイドバーありの場合にSidebar Widthが表示されます。レイアウトがDefaultの場合はサイト全体の設定で判定されるため、項目が見つからないときは同じ表示種類のレイアウトを確認してください。

この表示条件と幅の出力判定は、個別記事のLayout Settingsではなく、投稿用・固定ページ用とサイト全体の設定を参照します。共通設定ではサイドバーなし、特定のページだけサイドバーありにするような場合は、個別変更だけで幅の項目が表示・適用されるとは限りません。

記事ごとのサイドバーの有無やタイトル枠などを変更する場合はページ別レイアウト設定ガイドを、投稿ページの他の共通設定はSingle設定ガイドをご覧ください。

開発者向け：フックでサイドバーを拡張する

ここからは少し踏み込んだ内容です。Apuraはサイドバーまわりにもアクションフックとフィルターフックを用意しているので、子テーマの functions.php から表示をカスタマイズできます。

特定のページで使うサイドバーを差し替える

apura_primary_sidebar_id フィルターを使うと、表示するウィジェットエリアのIDを条件によって切り替えられます。たとえば「LP専用サイドバー」を別に登録しておき、特定のページだけそちらを表示する、といった使い方ができます。まずはウィジェットエリアを追加で登録します。

<?php
/**
 * LP専用のサイドバーを登録する。
 */
function mytheme_register_lp_sidebar() {
	register_sidebar(
		array(
			'name'          => __( 'LP Sidebar', 'mytheme' ),
			'id'            => 'sidebar-lp',
			'before_widget' => '<div id="%1$s" class="widget %2$s">',
			'after_widget'  => '</div>',
			'before_title'  => '<h2 class="widget__title"><span class="widget__title-text">',
			'after_title'   => '</span></h2>',
		)
	);
}
add_action( 'widgets_init', 'mytheme_register_lp_sidebar' );

続いて、フィルターで表示するサイドバーIDを切り替えます。条件分岐タグ（is_page() など）で対象ページを判定します。

<?php
/**
 * 特定の固定ページで表示するサイドバーを差し替える。
 *
 * @param string $sidebar_id 既定のサイドバーID。
 * @return string 使用するサイドバーID。
 */
function mytheme_filter_sidebar_id( $sidebar_id ) {
	// スラッグ 'campaign' の固定ページでのみ差し替える。
	if ( is_page( 'campaign' ) && is_active_sidebar( 'sidebar-lp' ) ) {
		return 'sidebar-lp';
	}

	return $sidebar_id;
}
add_filter( 'apura_primary_sidebar_id', 'mytheme_filter_sidebar_id' );

カスタマイズ用のコードは、必ず子テーマの functions.php に記述してください。親テーマを直接編集すると、テーマ更新時に変更が上書きされて消えてしまいます。子テーマの作り方は別記事「Apura子テーマ作成ガイド」を参照してください。

サイドバーの前後に独自の要素を追加する

サイドバーは apura_sidebar アクションフックを通じて出力されています。このフックに処理を追加すれば、ウィジェットの前後にバナーやお問い合わせボタンなどを差し込めます。優先度（第3引数）を調整して、ウィジェットより前か後かを制御します。

<?php
/**
 * サイドバーの先頭に固定バナーを表示する。
 */
function mytheme_sidebar_top_banner() {
	$url   = 'https://example.com/campaign';
	$label = __( 'キャンペーン実施中', 'mytheme' );
	?>
	<div class="widget widget--banner">
		<a href="<?php echo esc_url( $url ); ?>">
			<?php echo esc_html( $label ); ?>
		</a>
	</div>
	<?php
}
// 優先度5でウィジェット（優先度10）より前に表示。
add_action( 'apura_sidebar', 'mytheme_sidebar_top_banner', 5 );

出力するURLやテキストは、必ず esc_url() や esc_html() でエスケープしておきましょう。ユーザー入力やオプション値を扱う場合はもちろん、固定値であってもエスケープを徹底するのがWordPressのベストプラクティスです。

よく使うサイドバー関連のフック一覧

フック名	種類	用途
apura_primary_sidebar_id	フィルター	表示するサイドバー（ウィジェットエリア）IDを切り替える
apura_sidebar	アクション	サイドバー内に独自要素を出力する
apura_get_layout	フィルター	現在のページのレイアウト判定を上書きする

apura_get_layout フィルターを使えば、「特定のカテゴリーのアーカイブだけサイドバーを消す」といった動的なレイアウト制御も可能です。返り値に 'no_sidebar' や 'content_sidebar' などのレイアウト名を返すだけで切り替わります。

よくある質問

: 2点を確認してください。1つ目は、現在のページのレイアウトが「No Sidebar」または「Full Width」になっていないか。2つ目は、「外観 → ウィジェット」の Sidebar エリアにウィジェットが1つ以上入っているか。ウィジェットが空のエリアは出力されないため、何か追加すると表示されます。
: Footer 1〜3 の3つにだけウィジェットを配置し、Footer 4 を空のままにすれば3カラムになります。表示されるカラム数は「ウィジェットが入っているエリアの数」で自動的に決まります。

さらに、均等な幅にするには「カスタマイズ→Footer（フッター）」の「Footer Widgets Columns」で指定します。デフォルトでは4カラムになっています。これを「3」に指定します。

デバイス毎に指定できるのでタブレットでは2カラム、スマホでは1カラムなど指定可能です。
: できます。「カスタマイズ → Single（投稿）」のレイアウト設定で「Sidebar / Content」を選べば、投稿ページだけサイドバーが左側に表示されます。固定ページやアーカイブはそれぞれ別のセクションで個別に設定できます。