サポート » 使い方全般 » WordPressで複数のサイドバーを設置したい

  • 解決済 karaage23

    (@karaage23)


    いつもご覧いただき、ありがとうございます。

    実現したいことはsidebar.phpに複数のサイドバーエリアを設け、エリアごとにまとめてそれぞれにid,classをつけたいということです。

    ①functions.phpには

    function my_widgets_init() {
    	register_sidebar( array(
    		'name'          => 'Sidebar',
    		'id'            => 'sidebar-1',
    		'description'   => 'サイドバー1の説明を入れます。',
        'class'         => 's1',
    	  'before_widget' => '<div id="%1$s" class="widget %2$s">',
      'after_widget' => '</div>',
      'before_title' => '<h2 class="widget_title">',
      'after_title' => '</h2>',
    	) );
    
    	 register_sidebar( array(
            'name'          => 'Sidebar2',
            'id'            => 'sidebar-2',
            'description'   => 'サイドバー2の説明を入れます。',
            'class'         => 's2',
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget' => '</div>',
            'before_title' => '<h2 class="widget_title">',
            'after_title' => '</h2>',
        ));
    }
    add_action( 'widgets_init', 'my_widgets__init' );
    

    の記載をし、無事管理画面で2つのサイドバーが表示されています。

    ②しかしsidebar.phpに

    <aside class="aside widget-area mb4">
    
    <?php if ( is_active_sidebar('sidebar-1') ) : ?>
      <?php dynamic_sidebar('sidebar-1'); ?>
    <?php endif; ?>
    <?php if ( is_active_sidebar('sidebar-2') ) : ?>
      <?php dynamic_sidebar('sidebar-2'); ?>
    <?php endif; ?>
    </aside>

    の記載をするとウイジェットの表示は正しくできるのですが、考えておりましたsidebar毎にid名、class名をつけてそれぞれをまとめるということができません

    どのようにしたらいいのかご教示いただけないでしょうか?
    よろしくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • sidebar毎にid名、class名をつけてそれぞれをまとめるということ

    ちょっとこの部分もう少し詳しく教えて下さい。

    
    <aside class="aside widget-area mb4">
    
    <?php if ( is_active_sidebar('sidebar-1') ) : ?>
      <div id="sidebar-1"><?php dynamic_sidebar('sidebar-1'); ?></div>
    <?php endif; ?>
    <?php if ( is_active_sidebar('sidebar-2') ) : ?>
      <div id="sidebar-2"><?php dynamic_sidebar('sidebar-2'); ?></div>
    <?php endif; ?>
    </aside>
    

    みたいにするとか、before_widget をいじることでクラスとかはある程度コントロール出来るかなとは。

    トピック投稿者 karaage23

    (@karaage23)

    @toro_unit さま
    ご返信ありがとうございます。PHPについてしっかりと基礎から勉強していきたいのでお答え一つが大変勉強になします。

    私の方であれから試行錯誤してなんとかsidebar.phpに

    
    <aside class="aside widget-area mb4">
    <div class="sidebarBox-01">
    <?php if ( is_active_sidebar('sidebar-1') ) : ?>
      <?php dynamic_sidebar('sidebar-1'); ?>
    <?php endif; ?>
    </div>
    <!-- END //.sidebarBox-01 -->
    <div class="sidebarBox-02">
    <?php if ( is_active_sidebar('sidebar-2') ) : ?>
      <?php dynamic_sidebar('sidebar-2'); ?>
    <?php endif; ?>
    </div>
    <!-- END //..sidebarBox-02 -->
    </aside>
    

    と記載して、なんとか動いております。
    全くまだPHPに対して理解ができておりませんで、お恥ずかしい限りです。
    もしまたアドバイス頂戴できるのであれば、わたしの記述について「このあたりがおかしいから後で変になるかも」
    などございましたらご教示くださいませ。

    @toro_unitさま ありがとうございます。

    ウイジェットが存在しない場合も、 div タグが表示されてしまうので、if 文の中に入れた方が良いかなと思いますー。
    空の div タグを表示させたいとかで無ければですが。

    
    <aside class="aside widget-area mb4">
        <?php if ( is_active_sidebar('sidebar-1') ) : ?>
            <div class="sidebarBox-01">
                <?php dynamic_sidebar('sidebar-1'); ?>
            </div>
        <?php endif; ?>
        <!-- END //.sidebarBox-01 -->
    
        <?php if ( is_active_sidebar('sidebar-2') ) : ?>
            <div class="sidebarBox-02">
                <?php dynamic_sidebar('sidebar-2'); ?>
            </div>
        <?php endif; ?>
        <!-- END //..sidebarBox-02 -->
    </aside>
    
    トピック投稿者 karaage23

    (@karaage23)

    @toro_unit さま
    ありがとうございます。sidebar.phpでももしかすると同様にdivがif文の中に入っていないケースが
    あるやもしれないので確認してみます。一つ教えていただいたことが他の学びにもつながって大変助かりました。どうもありがとうございました。

    書籍や体系的に学べるもので基礎力をしっかりつけて自分を成長させていきたいと思います。本当にありがとうございました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「WordPressで複数のサイドバーを設置したい」には新たに返信することはできません。