SWELL│特定の条件でサイドバーを表示・非表示にするカスタマイズ

2022.04.082024.03.16

SWELLでモバイルファーストを意識してサイドバーを非表示にしたいことがあります。

できればすでに表示されてから非表示にするCSSからではなく、元のテンプレートの設定から非表示にしたいと思います。

まずは基本設定からおさらいします。

SWELLではカスタマイズからサイドバーを非表示にする設定項目が下記の4つあります。

トップページ
投稿ページ
固定ページ
アーカイブ

しかしカスタム投稿タイプやカスタムタクソノミー、あとは特定の条件を指定しての非表示はカスタマイズが必要になります。

本記事では特定の条件でサイドバーを非表示にするカスタマイズを紹介いたします。

SWELLで特定の条件でサイドバーを非表示にするカスタマイズ

特定の条件でサイドバーを非表示にするカスタマイズはfunctions.phpをコードを挿入するだけです。

swell_is_show_sidebarというフックを使用しています。

以下、詳しく解説いたします。

functions.phpにコードを挿入する

コードを記述する場所は下記になります。

WordPressの管理画面＞外観＞テーマファイルエディター＞ functions.php

functions.phpに下記のコードを挿入してください。

また2行目にはif文を使った表示条件を記載してください。

今回はnewsというカスタム投稿タイプとplaceというカスタムタクソノミーでサイドバーを非表示にする条件を記載しています。

function motoki_swell_hide_sidebar() {
	if ( is_singular('news') || is_tax('place')) { //表示条件を記述する
		return false;
	}
}
add_filter( 'swell_is_show_sidebar', 'motoki_swell_hide_sidebar' );

swell_is_show_sidebarというSWELLのフックを使用しています。

カスタマイズは以上です。

コード挿入後にサイドバーが非表示になっているか確認しましょう。

SWELLで特定の条件でサイドバーを表示にするカスタマイズ

同じやり方ですが、たとえばeventというカスタム投稿記事の場合はサイドバーを表示させてみます。

function motoki_swell_show_sidebar($is_show) {
    if (is_singular('event')) { // カスタム投稿タイプがeventの場合
        return true; // サイドバーを表示
    }
    return $is_show; // それ以外の場合は元の設定を維持
}
add_filter('swell_is_show_sidebar', 'motoki_swell_show_sidebar');