サポート » 使い方全般 » テーマ[Chocolat] 特定のページにおけるサイドバーの削除

  • 解決済 uick

    (@uick)


    はじめまして。chocolatのカスタマイズ中につまづいてしまいました。

    webサイトとして構築しているので、
    ・固定ページはコンテンツ(index,info,mainなど)の静的ページとして
    ・カスタム投稿ページも同じく静的ページとして
    ・通常投稿ページはブログとして
    使い分けています。

    このうち、通常投稿(ブログ)ページにだけサイドバーを表示したいのですがうまくいきません。
    最初に考えたのは、chocolatにあらかじめ用意されているサイドバーの設定
    ・1カラム
    ・右サイドバー
    ・左サイドバー
    の3つのうち、右サイドバーを選び、そこにプラグインを適用することで通常投稿ページ以外のページのサイドバーを非表示にしてしまうことでした。

    ただ、この方法だと“本来サイドバーが表示されるスペース”を取り払う事まではできず、固定ページとカスタム投稿ページには右側に何とも不細工な空白が…。
    反対に、1カラムを選択した上で通常投稿ページにだけサイドバーを表示させることも、私にはできませんでした。
    (単純にget_sidebar()を削除するだけだとデザインが崩れてしまって)

    固定ページとカスタム投稿ページにはサイドバーを表示させず、かつ記事の表示領域を『1カラム』を選択したときと同じ幅まで(サイドバーが表示される領域まで)広げるにはどのようにすればいいでしょうか?
    どうかお力添えをお願い致します。

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • こんにちは、

    このテーマは、body に active-sidebar とか left-sidebar といったクラスを追加する事で、スタイルで、レイアウトコントロールを行っています。

    なので、シングル表示でないときには、これらのクラスを削除してやることで、特定の環境下でのスタイルをコントロールできるようになります。

    ざっくりとは、以下のコードを確認してください。

    functions.php

    add_action( 'after_setup_theme', 'custom_chocolat_setup', 99 );
    
    function custom_chocolat_setup() {
    
    	add_filter( 'body_class', 'function_name' );
    }
    
    function function_name( $classes ) {
    
    	if ( !is_single() ) {
    		$blacklist = array( 'active-sidebar', 'right-sidebar', 'left-sidebar' );
    
    		foreach ( $blacklist as $val ) {
    			if ( !in_array( $val, $classes ) ) {
    				continue;
    			} else {
    				foreach ( $classes as $key => $value ) {
    
    					if ( $value == $val )
    						unset( $classes[ $key ] );
    				}
    			}
    		}
    		$classes[] = 'inactive-sidebar';
    	}
    	return $classes;
    }

    style.css

    body:not(.single) #sidebar{
        display:none;
    }

    カスタム投稿の部分で不具合あるかもしれませんが、適宜調整してください。

    トピック投稿者 uick

    (@uick)

    こんばんは。お世話になります。
    教えていただいた通りにfunctions.phpとstyle.cssを書き換えてみたところ、やりたかった通りのレイアウトになりました!
    レイアウトコントロールの仕組みまで教えて下さって、ありがとうございます。
    当方は趣味でHTMLとCSSをいじる程度でPHPは全くダメなのですが、仕組みと照らし合わせて考えることでどの命令文がどのような役割を担っているのか、ほんの少しだけですが見えた気がしてPHPに興味がわきました。

    ところで、またかなり初歩的な質問でお恥ずかしいのですが……
    single.phpだけでなく、ブログ記事のアーカイブページであるhome.phpにもサイドバーを表示したい場合はどのように記述すれば宜しいでしょうか?
    単純に

    if ( !is_single() || !is_home() ) {

    と書き換えてみたのですが、これだとsingle.phpにもhome.phpにも効果が適用されませんでした。

    ブログ記事のアーカイブページであるhome.phpにもサイドバーを表示したい場合はどのように記述すれば宜しいでしょうか?

    ブログ記事アーカイブにhome.phpを使うというのが、ちょっと理解できないのですが
    テーマディレクトリに、home.phpというテンプレートを作っているという意味ですか?

    ブログアーカイブを作成する一般的な手順は、

    固定ページ タイトル blog 本文なし を作成して、カスタマイザーの固定フロントページの投稿ページでblogを選択し、そのページを投稿アーカイブとする

    このような形で、ブログアーカイブを実装した場合は、コントロールは可能です。

    なにか特殊な事情でもあるのですか?

    トピック投稿者 uick

    (@uick)

    お返事ありがとうございます。

    テーマディレクトリに、home.phpというテンプレートを作っている

    はい、その通りです。
    しかしながら、仰る通りhome.phpは不要でした。

    最初の頃に他の方の事例なども参考にしつつ奮闘していた名残のファイルなのですが、お恥ずかしながら私自身その事をすっかり失念しており、アーカイブページとしてhome.phpが表示されているのも『そのような仕様』だと思い込んでいました…

    お騒がせいたしました。
    現在home.phpは削除して、index.phpがブログのアーカイブページとして表示されています。

    数あるindex.phpページの中でも一部のページにだけサイドバーを表示したい場合は、記事スラッグか記事IDを使用するのでしょうか?
    またご教授いただけますと幸いです。

    ブログアーカイブの固定ページタイトルが blog だとした時

    if ( !is_single() && !is_page('blog') ) {

    で条件分岐できると思います。

    ただこれだけだと、サイドバーが非表示になるので、前回スタイル指定した後方に
    以下のように追加すると、表示できるようになると思います。

    body:not(.single) #sidebar{
        display:none;
    }
    body.page-id-固定ページのページID #sidebar{
        display:block;
    }

    もし、うまくいかなかったら、書き込んでみてください。

    すみません 気になって動かしてみたら、うまくなかったので 訂正です

    add_action( 'after_setup_theme', 'custom_chocolat_setup', 99 );
    
    function custom_chocolat_setup() {
    
    	add_filter( 'body_class', 'function_name' );
    }
    
    function function_name( $classes ) {
    
    	global $post;
    
    	if ( !is_single() ) {
    		if( ( isset( $post->ID )  && 27746 !== $post->ID ) || is_404() ) { //blog archive id
    
    			$blacklist = array( 'active-sidebar', 'right-sidebar', 'left-sidebar' );
    
    			foreach ( $blacklist as $val ) {
    
    				if ( !in_array( $val, $classes ) ) {
    
    					continue;
    				} else {
    
    					foreach ( $classes as $key => $value ) {
    
    						if ( $value == $val )
    							unset( $classes[ $key ] );
    					}
    				}
    			}
    
    			$classes[] = 'inactive-sidebar';
    		}
    	}
    	return $classes;
    }

    style.css

    .inactive-sidebar #sidebar{
        display:none;
    }
    .active-sidebar #sidebar{
        display:block;
    }

    トピック投稿者 uick

    (@uick)

    大変お手数をおかけしており恐縮です。
    教えていただいた通りにfunction.phpとstyle.cssを書き換えました。
    結果、以下のように表示されてしまいます。

    ・ブログとカスタム投稿のシングルページにはサイドバーが表示されており、スペースも正しく確保されている状態
    ・ブログのアーカイブページにはサイドバー自体も、サイドバーを入れるためのスペースも生成されていない状態
    ・アーカイブ以外のindex.phpも同じ状態(サイドバー無し、スペース無し)

    ※念のためプラグインをすべて停止してみても結果は変わりませんでした

    おそらく私の指定方法が間違っていて、アーカイブのindex.phpとその他のindex.phpの振り分けが出来ていないんだと思います…
    何度もお手を煩わせて申し訳ありませんが、どこを間違えてしまっているのかチェックしていただけないでしょうか。

    function.phpは、

    if( ( isset( $post->ID )  && 27746 !== $post->ID ) || is_404() ) { //blog archive id

    if( ( isset( $post->ID )  && 254 !== $post->ID ) || is_404() ) { //blog archive id

    このように27746の部分をブログのアーカイブページのIDに書き換えています(変更箇所はこれで合っているでしょうか?)
    その他の部分は触っていません。

    cssは以下のように指定しています。

    body:not(.single) #sidebar{
        display:none;
    }
    .inactive-sidebar #sidebar{
        display:none;
    }
    .active-sidebar #sidebar{
        display:block;
    }

    もし、固定ページのIDに書き換えても、動作しないときには、

    ブログアーカイブとして表示されるはずの固定ページを開いて

    function function_name( $classes ) {
    
    	global $post;
    
    	var_dump( $post->ID );

    var_dump( $post->ID );を記述して、ソースのbody要素を見ていただくと
    クラスの手前ぐらいに int(xxx)と表示されると思いますので、ページのIDと異なっていれば、
    コードの数字のところを、それに置き換えてみてください。

    int(xxx)が固定ページの編集画面で表示されるものと異なっていた場合、お手数ですが、違っていたと書き込んでもらえますか?

    styleは、一番上の一個は、なくても大丈夫のようです。

    トピック投稿者 uick

    (@uick)

    こんにちは。
    お返事ありがとうございます。

    cssを

    .inactive-sidebar #sidebar{
        display:none;
    }
    .active-sidebar #sidebar{
        display:block;
    }

    の2つだけにしました。

    また、教えていただいた方法でページIDを確認したところ、int(1181)となり、URLに表示される数字とは異なっていました。
    前回のコードのID部分をこの数字に書き換えてみると、アーカイブのトップページはサイドバー付きのデザインになってくれました!

    ただ2ページ目以降になるとやはりサイドバーが表示されておらず、スペースも生成されていない状態です(ページIDが異なるので当然ではあるのですが…)。

    ページIDが異なるというのが素人なりにもちょっと気にかかるのですが、原因や対策?はおわかりになりますか?
    ブログ記事を他のWPからインポートしましたがそれはあまり関係ないでしょうか。

    ただ2ページ目以降になるとやはりサイドバーが表示されておらず、スペースも生成されていない状態です(ページIDが異なるので当然ではあるのですが…)。

    ページIDが異なるというのが素人なりにもちょっと気にかかるのですが、原因や対策?はおわかりになりますか?

    ちょっと時間ください。

    私の考え方が、的外れで、固定ページなんだから 固定ページのIDで条件分岐できるだろうと、考えていたのが、浅はかで、

    この固定ページは、投稿ループ用の posts がセットされているので、IDがコロコロ変わる?

    キャー といったところなのですが、それを考える時間が今ちょっと、

    トピック投稿者 uick

    (@uick)

    nobita 様

    こんばんは、お世話になっております。

    テンプレートの作りがちょっと特殊なのでしょうか。
    私が当初考えていたよりもずっとややこしいことを知らずのうちにお願いしてしまったみたいで、申し訳ないやら有り難いやらで頭の下がる思いです。
    お忙しい中にも関わらずいろいろと親身になって下さって本当にありがとうございます。

    まったく急いではおりませんので、またお手すきの際にでも引き続きお力添えをお願い出来れば幸いに存じます。

    nobita

    (@nobita)

    どうでしょう、うまく動きますか?

    add_action( 'after_setup_theme', 'custom_chocolat_setup', 99 );
    
    function custom_chocolat_setup() {
    
    	add_filter( 'body_class', 'function_name' );
    }
    
    function function_name( $classes ) {
    
    	global $post;
    
    	$paged = get_query_var( 'paged', 1 );
    
    	if ( !is_single() ) {
    		if( is_home() && $paged > 1 ) { 
    
    			return $classes;
    		}
    	if(  is_front_page() || ( ! is_home() &&  is_paged() ) || is_404() || is_search() || is_archive() || is_page() ) { 
    
    			$blacklist = array( 'active-sidebar', 'right-sidebar', 'left-sidebar' );
    
    			foreach ( $blacklist as $val ) {
    
    				if ( !in_array( $val, $classes ) ) {
    
    					continue;
    				} else {
    
    					foreach ( $classes as $key => $value ) {
    
    						if ( $value == $val )
    							unset( $classes[ $key ] );
    					}
    				}
    			}
    
    			$classes[] = 'inactive-sidebar';
    		}
    	}
    	return $classes;
    }

    テンプレートの作りがちょっと特殊なのでしょうか。
    私が当初考えていたよりもずっとややこしいことを知らずのうちにお願いしてしまったみたいで、申し訳ないやら有り難いやらで頭の下がる思いです。

    特殊というよりかは、理に適っているといったほうがいいと思います。このような設計をしているテーマは少ないとは思いますが、特殊といったものではありません。

    また、一般的にテーマは、このようなフィルタでレイアウトの制御ができるレベルにあるものは、皆無と言っていいと思います。

    なので、それを証明してあげれるといいなと思って対応させていただいています。

    トピック投稿者 uick

    (@uick)

    こんにちは。
    お世話になっております。
    素晴らしいです! めでたく2ページ目以降にもサイドバーが表示されるようになりました!
    ブログ以外の固定ページやシングルページも全て問題ありません。
    ありがとうございます。

    特殊というよりかは、理に適っているといったほうがいいと思います。

    なるほど、そうなのですね。
    改めてこのテンプレートの完成度の高さとnobita様の知識の深さに感嘆するばかりです。

    ご親切に甘えて、さらにお訊ねしたいのですが、カテゴリー別の記事一覧やタグ別のアーカイブにもサイドバーを表示したい場合はどのような記述を追加すればいいでしょうか?
    自分でも悩んでみたのですが、私にはレベルが高すぎて土台無理な話でした…

    nobita

    (@nobita)

    たぶん、カテゴリなら、

    if ( !is_single() ) {
    
    		if( is_home() && $paged > 1 ) { 
    
    			return $classes;
    		}
    		if( is_category() ){
    
    			return $classes;
    		}

    といった形で追加できると思います。

    トピック投稿者 uick

    (@uick)

    そうか、そこはis_categoryやis_tagでサッと呼び出せるんですね!
    今までの例から複雑に考えすぎていたようで、初歩的なことまで頼り切ってしまってお恥ずかしい限りです。

    無事、カテゴリーとタグ別のアーカイブにもサイドバーを表示することができました。
    やりたかったことが全て実現できたのも、nobita様が親身になって下さったおかげです。
    フォーラムに投稿するのは初めてで緊張していましたが、大変丁寧なご指導のおかげで得るものが多い経験となり、心からお礼申し上げます。

    最後まで見捨てずお付き合いくださって、本当にありがとうございました!
    テンプレートの作者様にもこの場を借りてお礼申し上げます。

    それでは、これにて解決済みとさせていただきます。

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • トピック「テーマ[Chocolat] 特定のページにおけるサイドバーの削除」には新たに返信することはできません。