SWELLの標準サイドバーに追加のウィジェット領域を設け、広い画面で3カラムにする実装例です。SWELL 2.19.0のテンプレートを参照しています。以下の改訂コードは実サイトの画面では未検証のため、検証環境で表示・操作を確認してから適用してください。
旧コードから変更した点
旧稿は左右に同じid=”sidebar”を付け、異なるテンプレートへ同じキャッシュキーを渡していました。SWELL 2.19.0のget_partsはそのキーで保存内容を取得するため、右側のHTMLが左側でも使われる構成でした。今回は標準サイドバーの処理を親テーマへ任せ、追加領域は別IDで出力し、追加側にはパーツキャッシュを設けません。
追加領域の追従表示はこの例の対象から外しました。標準の追尾サイドバーは親テーマの処理を保ちますが、新しい3カラム配置での動作は別途確認が必要です。CSSによる配置はHTMLやTabの順序を変更しないため、視覚上の左列へ先にフォーカスが移る設計でもありません。
1．子テーマと戻す手段を用意する
有効な子テーマと使用中のSWELLの版を確認し、変更するファイルをバックアップします。子テーマに既存のsidebar.phpがある場合は上書きせず、その独自処理と今回の追加を比較してください。親テーマは直接編集しません。子テーマのフォルダー名は環境により異なります。
以下のsidebar.phpとparts/sidebar_content2.phpは子テーマに保存するテンプレートファイルです。functions.phpやCode Snippetsへ貼り付けるものではありません。コード内のPHP開始タグも含めてファイルとして保存します。
2．子テーマのsidebar.phpを作成する
<?php
if ( ! defined( 'ABSPATH' ) ) exit;
// 標準サイドバーは親テーマのテンプレートを使用。
require get_template_directory() . '/sidebar.php';
// 追加領域が空なら出力しない。
if ( is_active_sidebar( 'sidebar-2' ) || is_active_sidebar( 'fix_sidebar_2' ) ) : ?>
<aside id="waza-sidebar-extra" class="waza-sidebar-extra" aria-label="追加情報">
<?php SWELL_Theme::get_parts( 'parts/sidebar_content2' ); ?>
</aside>
<?php endif;
親テーマのsidebar.phpを直接読み込むので、標準側のトップ用・スマートフォン用ウィジェットやキャッシュ処理を維持します。追加側は独自IDとし、標準のsidebarと重複させません。サイト設定やテンプレートがサイドバー自体を呼び出さないページには追加領域も出ません。
3．子テーマのparts/sidebar_content2.phpを作成する
<?php
if ( ! defined( 'ABSPATH' ) ) exit;
foreach ( array( 'sidebar-2', 'fix_sidebar_2' ) as $widget_area ) {
if ( is_active_sidebar( $widget_area ) ) {
SWELL_Theme::outuput_widgets( $widget_area );
}
}
追加領域は端末を判定して隠さず、スマートフォンでも本文・標準サイドバーに続けて表示する構成です。旧稿のウィジェット割り当てを引き継ぐためfix_sidebar_2というIDを残しますが、今回の例ではその領域も通常表示し、追従させません。
4．functions.phpへウィジェット登録を追加する
次の登録処理だけを子テーマのfunctions.phpのPHP領域、または既存のPHPスニペット管理方法へ一度だけ追加します。旧稿の登録処理がある場合は置き換えます。Code Snippetsを使う場合も構文エラーや重複登録の確認は必要です。
add_action( 'widgets_init', function () {
$areas = array(
'sidebar-2' => '追加サイドバー：上段',
'fix_sidebar_2' => '追加サイドバー：下段（追従なし）',
);
foreach ( $areas as $id => $name ) {
register_sidebar( array(
'name' => $name,
'id' => $id,
'description' => '追加領域に通常表示するウィジェットです。',
'before_widget' => '<div id="%1$s" class="c-widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="c-widget__title -side">',
'after_title' => '</div>',
) );
}
}, 60 );
外観のウィジェット設定で追加領域へ内容を入れます。末尾の60はフックの実行優先度であり、「6番目に表示する」という指定ではありません。既存のsidebar-2やfix_sidebar_2を別用途で使っている場合は、登録と出力の両方で重複しないIDへそろえて変更してください。
5．追加CSSで画面幅ごとの配置を設定する
旧稿のコンテナ幅・サイドバー幅・orderのCSSを取り除き、以下を追加CSSまたは子テーマのstyle.cssへ保存します。1280px以上では左に追加領域、中央に本文、右に標準サイドバーを置きます。960～1279pxでは本文と標準サイドバーを2列にし、追加領域はその下へ置きます。960px未満ではテーマの通常配置に従い、追加領域は後続に表示します。
.waza-sidebar-extra { width: 100%; min-width: 0; margin-top: 24px; }
@media (min-width: 960px) {
.-sidebar-on .l-content:has(> .waza-sidebar-extra) {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
gap: 24px;
align-items: start;
}
.-sidebar-on .l-content:has(> .waza-sidebar-extra) > .l-mainContent {
grid-column: 1; grid-row: 1;
width: auto; min-width: 0; max-width: none; margin: 0;
}
.-sidebar-on .l-content:has(> .waza-sidebar-extra) > #sidebar {
grid-column: 2; grid-row: 1;
width: auto; min-width: 0; max-width: none; margin: 0;
}
.-sidebar-on .l-content > .waza-sidebar-extra {
grid-column: 1 / -1; grid-row: 2; margin: 0;
}
}
@media (min-width: 1280px) {
.-sidebar-on .l-content:has(> .waza-sidebar-extra) {
grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) minmax(160px, 220px);
}
.-sidebar-on .l-content:has(> .waza-sidebar-extra) > .l-mainContent { grid-column: 2; }
.-sidebar-on .l-content:has(> .waza-sidebar-extra) > #sidebar { grid-column: 3; }
.-sidebar-on .l-content > .waza-sidebar-extra { grid-column: 1; grid-row: 1; }
}このCSSは:has()に対応するブラウザーを前提にした配置例です。サイトの本文幅設定によって中央が狭くなる場合は、列幅や3列へ切り替える条件を調整してください。DOM上は本文・標準サイドバー・追加領域の順なので、読み上げやTabも基本的にその順になります。視覚配置と操作順の差が利用を妨げる場合は左列配置を採用せず、追加情報を本文の後へ置く設計を検討してください。
旧稿の画像と確認すべき範囲
以下の4枚は旧稿から保持した画像です。今回のコードを実行した表示例ではありません。
検証環境で左右に異なるウィジェットを置き、標準サイドバーのキャッシュ有効・無効の両方で内容が混ざらないことを確認します。投稿・固定ページ・一覧・トップ、サイドバーなしのページ、追加ウィジェットが空の状態、スマートフォンの折り返し、長いリンク・画像・埋め込み、Tab・Enter、標準の追従領域とPjax併用を比較してください。サイト全体のページキャッシュやCDNがある場合は、その更新も必要です。
戻す方法と確認記録
戻す場合は今回のCSSとウィジェット登録を外し、子テーマのsidebar.phpをバックアップへ戻します。今回初めて作成し他の変更がないファイルなら、そのsidebar.phpとparts/sidebar_content2.phpを取り除いて親テーマへ戻せます。ウィジェットの割り当ては事前に控え、登録解除後の扱いを確認してください。子テーマの独自変更があるファイルを一括で削除しないでください。
2026年10月21日、SWELL 2.19.0のsidebar.php・parts/sidebar_content.php・get_partsのキャッシュ処理をソースで照合しました。実WordPressへの改訂コード設置、PC・スマートフォンの表示、操作、キャッシュ・Pjax・追従領域の統合動作は未検証です。スクリーンショットは撮影していません。親テーマの更新時はテンプレート構造を再確認してください。
