サポート » テーマ » twentyseventeenでサイドバーを表示させる方法

  • 解決済 kitakarasu

    (@kitakarasu)


    twentyseventeenで固定ページにサイドバーを表示する方法を教えてください。
    これまで,VektorのBizVektorというテーマを使ってきました。
    新しいtwentyseventeenを使いたくて,テーマを変更しました。
    固定ページにサイドバーを表示させたいのですが,うまくいきません。
    Vectorの時は,「固定ページを編集」 で開いて,「固定ページの属性」のところに,
    「親」「テンプレート」「順序」と並んでいる「テンプレート」をクリックして,
    「デフォルトテンプレート」か「サイドバーなし」を選択することで,それぞれのページに
    サイドバーを表示するかしないかを選択できました。
    それが,
    twentyseventeenでは,「テンプレート」がなくて選ぶことができません。
    「外観」「ウィジェット」の「サイドバー」の中には,
    「最近の投稿」「最近のコメント」などが設定されています。これを固定ページの
    サイドバーに表示したいです。

    フォーラム内を見てみましたが,こんな質問は見当たりませんでした。
    初歩的すぎる質問ですが,教えてください。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • CG

    (@du-bist-der-lenz)

    投稿テンプレートを固定ページでも使うということで、なしにですか。

    Du bist der Lenz様
    お答えが意味していることがわかりません。

    ブラウザーで固定ページを閲覧すると,
    固定ページに書いてある本文は表示されているのですが,
    サイドバーが表示されません。
    サイドバーには,
    「外観」「ウィジェット」の「サイドバー」で
    「最近の投稿」「最近のコメント」「テキスト」などが設定してありますから,
    これらが,サイドバーとして固定ページに表示されてほしいのです。

    こういう状況で,アドバイスをいただけないでしょうか。
    お願いします。

    twentyseventeenで固定ページにサイドバーを表示するには
    まず、固定ページでカスタマイズからテーマオプションを開き1カラムに変更します
    次に、テーマファイルのincフォルダ内にあるtemplate-functions.phpというファイルを編集します
    この部分を
    `
    // Add class if sidebar is used.
    if ( is_active_sidebar( ‘sidebar-1’ ) && ! is_page() ) {
    $classes[] = ‘has-sidebar’;
    }
    `
    以下のように書き換えてください
    `
    // Add class if sidebar is used.
    if ( is_active_sidebar( ‘sidebar-1’ ) /*&& ! is_page()*/ ) {
    $classes[] = ‘has-sidebar’;
    }
    `

    最後にテーマファイル内にあるpage.phpを開き、以下を
    `
    </main><!– #main –>
    </div><!– #primary –>
    </div><!– .wrap –>
    `
    このように書き換えてください
    `
    </main><!– #main –>
    </div><!– #primary –>
    <?php get_sidebar(); ?>
    </div><!– .wrap –>
    `

    これで固定ページにもサイドバーが表示されるようになるはずです

    こんな方法はいかがでしょうか?
    ワードプレス Twentyseventeen テーマの固定ページでサイドバーを表示

    • この返信は6 ヶ月、 1 週前に  World Masa さんが編集しました。

    kPherox様

    template_function.phpと
    page.phpを書き換えました。
    これは,全部の固定ページにサイドバーがつくのですね。
    できれば,サイドバーをつける固定ページと
    つけない固定ページをわけたいので,この方法は
    避けたいです。
    で,
    リンク先で紹介されている方法でやってみました。
    それが,そのとおりにしたつもりですが,
    うまくいきません。
    子テーマははじめて使います。
    フォルダー名を「twentyseventeen-child」で,それを
    「themes」の下に置くのでしょうか。
    もともとある「page.php」は修正しますか。
    お願いします。

    CG

    (@du-bist-der-lenz)

    元のテンプレートを複製して、サイドバー有りを作り、テンプレートを使い分けます。

    リンク先での方法で正しく動作しない、とのことですので、次の点をご確認いただけますでしょうか?

    • 「template_function.phpとpage.phpを書き換えました。」と書かれています。元にもどされていますか?
    • フォルダー名を「twentyseventeen-child」で,それを「themes」の下に置いてください。(リンク先にフォルダとファイルの設置場所を示していますのでご確認ください。)
    • 編集画面で、「外観」>「テーマ」から先ほどの子テーマが有効になっているか?をご確認ください。
    • 編集画面で、「外観」>「カスタマイズ」で、「固定フロントページ」下に「テーマオプション」がありますが、その「テーマオプション」は表示されていますか?
    • その「テーマオプション」内の「固定ページレイアウト」1カラムが選択されていますか?

    よろしくお願いいたします。

    mattaki5様

    丁寧にありがとうございます。
    ・template_function.phpとpage.phpはもとに戻しました。
    ・twentyseventeen-childはthemesの下に置きました。twentyseventeenと同じフォルダーです。
    ・「子テーマが有効になっているか?」
    え?
    子テーマというものを初めて使うので,有効にするということを知りません。
    「外観」->「テーマ」の中に「Twenty Seventeen Child」がありますが,
    これを有効にするのですか。
    今,やってみました。
    「Twenty Seventeen Child」は有効になりましたが,
    「Twenty Seventeen」と両方が有効になるわけではないですね。
    これでいいのでしょうか。
    ・「テーマオプション」は表示されています
    ・「1カラムが選択されているか」
    テーマを変えたときに2カラムに戻るのですね。
    1カラムに変えました。

    おかげさまで,固定ページの編集で,「テンプレート」が出てきて
    「sidebar」を選択できるようになりました。

    ここまではよかったのですが,
    トップページには,サイドバーが出てきません。
    トップページ以外で「sidebar」を選択すると,
    ちゃんと,目的のサイドバーが表示されます。

    これはどうしたものでしょうか。

    もうしわけありません。あと少し,教えてください。

    トップページは少しややこしいです。

    twentyseventeen は、フロントページに数枚のパネル(固定ページ)を表示することができますが、一つのパネルしか表示しないという条件でよければサイドバー表示が可能となりますと、思います。

    style.css 上部コメントの下を次のように変更

    
    /*--------------------------------------------------------------
    13.2 Front Page
    --------------------------------------------------------------*/
    
    .twentyseventeen-front-page .site-content {
    	padding: 2.5em 0 1.5em;
    }
    
    @media screen and (min-width: 48em) { /* two column start */
    	/* Layout */
    	.twentyseventeen-front-page.page-one-column #primary,
    	.page-template-page-sidebar.page-one-column #primary {
    		float: left;
    		width: 58%;
    	}
    	.twentyseventeen-front-page.page-one-column #secondary,
    	.page-template-page-sidebar.page-one-column #secondary {
    		float: right;
    		padding-top: 0;
    		width: 36%;
    	}
    	.twentyseventeen-front-page .site-content {
    		padding: 5.5em 0 2.5em;
    	}
    }
    

    子テーマ内に front-page.php を次の内容で作成

    
    <?php
    /**
     * front page with one panel and sidebar
     */
    
    get_header(); ?>
    
    <div class="wrap">
    	<div id="primary" class="content-area">
    		<main id="main" class="site-main" role="main">
    
    			<?php
    			while ( have_posts() ) : the_post();
    
    				get_template_part( 'template-parts/page/content', 'page' );
    
    				// If comments are open or we have at least one comment, load up the comment template.
    				if ( comments_open() || get_comments_number() ) :
    					comments_template();
    				endif;
    
    			endwhile; // End of the loop.
    			?>
    
    		</main><!-- #main -->
    	</div><!-- #primary -->
    	<?php get_sidebar(); ?>	
    </div><!-- .wrap -->
    
    <?php get_footer();
    

    こんにちは、

    @du-bist-der-lenz さん曰く

    元のテンプレートを複製して、サイドバー有りを作り、テンプレートを使い分けます。

    が、簡単でいいのではないかと思います。

    Twentyseventeen 使っていないので、間違っていたらごめんなさい。

    このテーマを2カラム表示にするためには、2つのポイントがあるように思います。

    一つは、body_class()に、has-sidebar クラスを追加する事

    もう一つは、page.php には、get_sidebar()が記述されていないので、チャイルドテーマに、新しくカスタマイズしたテンプレートを追加する事

    固定ページテンプレートで、トップページに固定ページを配置した場合、サイドバーが消えてしまう問題に対処

    この場合、front-page.php をコピーして、チャイルドテーマに、カスタマイズしたテンプレートを追加する

    まずは、固定ページ2カラム用

    
    <?php
    /**
     * Template Name: 2col Template
     * Template Post Type: post, page
     *
     */
    
    add_filter('body_class','my_body_class');
    function my_body_class($classes){
    	$classes[] = 'has-sidebar';
    	
    	return $classes;
    }
    
    //ここは、page.phpのコピーを貼り付け
    
    	</div><!-- #primary -->
    	<?php get_sidebar( );?>//貼り付けの時にこの1行を追加
    </div><!-- .wrap -->
    
    <?php get_footer();
    

    固定ページで、保存する時に2col templateを選択

    front-page.php

    
    <?php
    add_filter('body_class','my_front_body_class');
    function my_front_body_class($classes){
    	$classes[] = 'has-sidebar';
    	
    	return $classes;
    }
    ?>
    //以下、front-page.phpをコピーします
    get_header(); ?>この下に
    <div class="wrap">を追加
    
    //貼り付け最終部分を変更
    	</main><!-- #main -->
    </div><!-- #primary -->
    
    		<?php get_sidebar( );?>これを追加
    </div><!-- .wrap -->//このタグを追加
    
    <?php get_footer();
    

    front-page.phpは、サイドバーのCSSの調整が必要そうですが、

    これで、私の環境では、表示できるようです。

    • この返信は6 ヶ月、 1 週前に  nobita さんが編集しました。
    kitakarasu

    (@kitakarasu)

    mattaki5様

    トップページへのサイドバーの表示方法について解説くださいまして
    ありがとうございます。
    この方法で,トップページへもサイドバーが表示できました。

    du-bist-der-lenz様
    nobita様
    「元のテンプレートを複製して、サイドバー有りを作り、テンプレートを使い分けます。」
    という方法がよかったのかもしれませんが,上記の方法でできましたので,
    自分としては満足しています。

    みなさまへ
    月曜日以後,風邪で寝込んでいたもので,返事が遅れましたことをお詫びします。
    そして,
    子テーマを有効にすることすら知らなかった私を導いてくださったことに
    感謝します。
    冒頭の質問は,Twentyseventeenの画面上での機能の中でサイドバーを
    表示できるものと思って質問したもので,
    まさか,もともと,固定ページ上ではサイドバーを表示することを
    選択できる機能が用意されていないものとは思っていませんでした。

    まだ,テーマを変更したばかりで,前のテーマでしていたことを
    復活するためには,まだまだ,長い道のりがありそうです。
    今後ともよろしくお願いします。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • トピック「twentyseventeenでサイドバーを表示させる方法」には新たに返信することはできません。