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

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

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

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

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

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

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

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

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

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

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

サイドバーを「右に出すか・左に出すか・そもそも出さないか」は、カスタマイザーのレイアウト設定で決まります。Apuraでは次の4つのレイアウトから選べます。

レイアウト名	内容
Content / Sidebar	本文を左、サイドバーを右に表示（標準的なブログ向け）
Sidebar / Content	サイドバーを左、本文を右に表示
No Sidebar	サイドバーを非表示にし、本文を1カラムで表示
Full Width	サイドバーなし＋本文を全幅で表示（LP向け）

レイアウトは3つの階層で上書きできるのがApuraの便利なところです。優先順位は次の通りで、下にいくほど優先されます。

1. サイト全体：「カスタマイズ → General」の Site Layout で、サイト全体の初期値を設定
2. コンテキスト別：投稿（Single）・固定ページ（Page）・アーカイブ（Archive）ごとに、それぞれのセクションでレイアウトを指定
3. 個別ページ：投稿・固定ページの編集画面にあるレイアウト設定（メタボックス）で、そのページだけ個別に上書き

たとえば「サイト全体はContent / Sidebarだが、このランディングページだけFull Widthにしたい」という場合は、その固定ページの編集画面でレイアウトをFull Widthに変更するだけでOKです。サイト全体の設定を触る必要はありません。

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

ここからは少し踏み込んだ内容です。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' );

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

サイドバーは 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' などのレイアウト名を返すだけで切り替わります。

よくある質問