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

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

ワードプレス（WordPress）の人気テーマ「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ではウィジェットのIDに、以下の名称が割り当てられています。

たとえば、トップページのみ「追尾サイドバー」を表示させないようにするには、

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

にゃテック

プラグイン「Code Snippets」を使用すると、安全にfunction.phpを編集することができます。

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

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

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

• Amazonでのお買物はこちら
• 楽天でのお買物はこちら

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

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