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

swell_hide_sidebar

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カスタマイズ全まとめ

SWELLに関連するカスタマイズ記事を全てまとめました。

是非チェックしてみてください。

contact

お問い合わせ

WordPressの技術的なお悩みやご要望がありましたら、お気軽にお問い合わせください。

もちろんデザインに関することも相談できます。

  • 見た目の調整エラー相談その他技術に関する相談をしたい
  • 絞り込み検索オリジナルのブロックを作りたい
  • SEO内部施策構造化データの設定を依頼したい
  • サイトの高速化を診断・依頼したい
  • トップページデザインを依頼したい

この記事を書いた人

すいみんのアバター すいみん テクニカルアーティスト

カナダ在住のテクニカルアーティスト。
大学ではアート(油画)を専攻。卒業後はアニメ・映画・映像・ゲーム業界で、2Dから3DCG、ゲームエンジン、WEB制作まで幅広いコンテンツ制作の経験を積んでいます。デザイナーとエンジニアの中間のポジションでお仕事をするのが得意。

目次
閉じる