
※当サイトにはプロモーションが含まれています。
ワードプレス(WordPress)の人気テーマ「SWELL(スウェル)」には、サイドバー用として次の4種類のウィジェットエリアが用意されています。
- 共通サイドバー
- 共通サイドバー【スマホ版】
- トップページ専用サイドバー
- 追尾サイドバー

トップページのサイドバーが長くなってしまったにゃ
「トップページ専用サイドバー」は名前のとおりトップページのみに表示されるウィジェットですが、その下に「共通サイドバー」も続けて表示される仕様になっています。
そのため、サイトのレイアウトによっては、このようにサイドバーが縦に長くなりすぎてしまうケースがあります。

そこで今回は、トップページでは「共通サイドバー」を表示させないようにして、サイドバーをすっきり見せたいと思います。
検証に使用したSWELLの環境は以下のとおりです。
SWELLバージョン:2.14
WordPressバージョン:6.8.x
PHPバージョン:8.2.x
サーバー:エックスサーバー
※セキュリティの観点から、マイナーバージョンの一部をxとさせて頂きます
基本機能を使ったサイドバーの表示・非表示を切り替え
まずは、SWELLの基本機能を使用して、トップページのサイドバーの表示・非表示を切り替える方法について説明します。
ページタイプごとの設定
投稿ページ、固定ページ、トップページ、アーカイブページといったページの種類ごとに、サイドバーを表示するか非表示にするかを設定できます。
左メニューにある、
外観 > カスタマイズ > サイドバー
を選択。
表示したいページ種類にチェックを入れます。

投稿(固定)ページごとで設定する
ワードプレスの表示設定では、トップページ(ホームページ)の表示を固定ページや投稿ページに変更することができます。


ただ、ウィジェットごとに表示・非表示を設定することはできないにゃ。
共通サイドバーをトップページでは表示させない方法
今回やりたかったのは、ワードプレスの表示設定は、最新の投稿の状態で、トップページの場合は共通サイドバーを表示させないようにすることです。
トップページに共通サイドバーを表示しないようにするには、以下の内容をfunction.phpに記載します。
add_filter( 'sidebars_widgets', function( $sidebars ) {
$is_top = function_exists( 'SWELL_Theme' ) && method_exists( 'SWELL_Theme', 'is_top' )
? SWELL_Theme::is_top()
: ( is_front_page() /* || is_home()*/ );
if ( $is_top ) {
$COMMON_SIDEBAR_ID = 'sidebar-1';
// トップページでは共通サイドバーのウィジェットを空にする
if ( isset( $sidebars[ $COMMON_SIDEBAR_ID ] ) ) {
$sidebars[ $COMMON_SIDEBAR_ID ] = [];
}
}
return $sidebars;
} );
このコードをfunctions.phpに追記して保存すると、トップページのサイドバーから共通サイドバーが非表示になりました。

ちなみに、SWELLではウィジェットのIDに、以下の名称が割り当てられています。
ウィジェット | 名称(ID) |
---|---|
共通サイドバー | sidebar-1 |
共通サイドバー【スマホ版】 | sidebar_sp |
トップページ専用サイドバー | sidebar_top |
追尾サイドバー | fix_sidebar |
たとえば、トップページのみ「追尾サイドバー」を表示させないようにするには、
$COMMON_SIDEBAR_ID = ‘sidebar-1’;
の箇所を、
$COMMON_SIDEBAR_ID = ‘fix_sidebar’;
と書き換えてあげればOKです。
function.phpの場所は?
function.phpは、だいたいどのテーマも、
外観 > テーマエディター
にあります。

テーマエディターに移動したら、編集するテーマが、現在、使用しているテーマかを確認しましょう。
問題なければ、「function.php」を選択します。

なお、function.phpに記載する際に、ブラウザ上で全角から半角に変換すると、エンコーディング(文字コード)の関係で、不具合が発生することがあります。
その為、編集する時は、メモ帳などに貼り付けたものを編集をしてからペーストするようにしましょう。
選択したら、一番下に以下のコードを追加します。
add_filter( 'sidebars_widgets', function( $sidebars ) {
$is_top = function_exists( 'SWELL_Theme' ) && method_exists( 'SWELL_Theme', 'is_top' )
? SWELL_Theme::is_top()
: ( is_front_page() /* || is_home()*/ );
if ( $is_top ) {
$COMMON_SIDEBAR_ID = 'sidebar-1';
// トップページでは共通サイドバーのウィジェットを空にする
if ( isset( $sidebars[ $COMMON_SIDEBAR_ID ] ) ) {
$sidebars[ $COMMON_SIDEBAR_ID ] = [];
}
}
return $sidebars;
} );
最後に、「ファイルを更新」ボタンで、保存(更新)します。
※function.phpの設定を失敗すると、最悪、サイトが表示されなくなります。
その為、コードを追加する際は、必ずバックアップを取ってから追加するようにしてください。
ご支援のお願い
この記事が役に立ったと感じたら・・・
この記事が少しでもお役に立ったと感じていただけましたら、ぜひ下の“ボタン”をクリックしてお買い物をしていただけると嬉しいです。
ご購入いただいた商品の金額の一部が私に入り、より有益な記事を作るための励みになります。
なお、商品は、ご自身の好きなものをご購入いただければと思います。
無料相談・お問い合わせはこちら