SWELLの「共通サイドバー」のみをトップページで非表示にする方法

※当サイトにはプロモーションが含まれています。

ワードプレス(WordPress)の人気テーマ「SWELL(スウェル)」には、サイドバー用として次の4種類のウィジェットエリアが用意されています。

  • 共通サイドバー
  • 共通サイドバー【スマホ版】
  • トップページ専用サイドバー
  • 追尾サイドバー
にゃのらいとにゃのらいと

トップページのサイドバーが長くなってしまったにゃ

「トップページ専用サイドバー」は名前のとおりトップページのみに表示されるウィジェットですが、その下に「共通サイドバー」も続けて表示される仕様になっています。

そのため、サイトのレイアウトによっては、このようにサイドバーが縦に長くなりすぎてしまうケースがあります。

SWELL|トップページ

そこで今回は、トップページでは「共通サイドバー」を表示させないようにして、サイドバーをすっきり見せたいと思います。

検証に使用したSWELLの環境は以下のとおりです。

ワードプレス環境

SWELLバージョン:2.14
WordPressバージョン:6.8.x
PHPバージョン:8.2.x
サーバー:エックスサーバー

※セキュリティの観点から、マイナーバージョンの一部をxとさせて頂きます

基本機能を使ったサイドバーの表示・非表示を切り替え

まずは、SWELLの基本機能を使用して、トップページのサイドバーの表示・非表示を切り替える方法について説明します。

ページタイプごとの設定

投稿ページ固定ページトップページアーカイブページといったページの種類ごとに、サイドバーを表示するか非表示にするかを設定できます。

左メニューにある、

外観 > カスタマイズ > サイドバー

を選択。

表示したいページ種類にチェックを入れます。

SWELL|外観 > カスタマイズ > サイドバー

投稿(固定)ページごとで設定する

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

ワードプレス|表示設定

その際、選択した固定ページや投稿ページの「表示の上書き設定」から、サイドバーの表示・非表示を個別に設定することが可能です。
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|共通サイドバーのみを非表示

にゃテックにゃテック

ちなみに、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

なお、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

※function.phpの設定を失敗すると、最悪、サイトが表示されなくなります。
その為、コードを追加する際は、必ずバックアップを取ってから追加するようにしてください。

ご支援のお願い
この記事が役に立ったと感じたら・・・

Ny@Tech(にゃテック)

この記事が少しでもお役に立ったと感じていただけましたら、ぜひ下の“ボタン”をクリックしてお買い物をしていただけると嬉しいです。

ご購入いただいた商品の金額の一部が私に入り、より有益な記事を作るための励みになります。

なお、商品は、ご自身の好きなものをご購入いただければと思います。

無料相談・お問い合わせはこちら