web-dev-qa-db-ja.com

動的サイドバーにクラスを追加する

ちょっと私はウィジェット/サイドバーが追加され、削除されたときに自動でグリッドレイアウトを作成するこの条件を作成しようとしています。目標は、レイアウトを気にせずに、できるだけ多くのウィジェットをユーザーに配置させることです。これは私のコードです、あなたが私にさらに自分自身を説明させて欲しいならば私に知らせてください：

if (function_exists('create_widget') && dynamic_sidebar('sidebar-1') && dynamic_sidebar('sidebar-2') && dynamic_sidebar('sidebar-3') ) {
            $layout_classes = "col-md-4";
    }       elseif ( is_active_sidebar( 'sidebar-1' ) && is_active_sidebar( 'sidebar-2' ) ) {
                $layout_classes = "col-md-6";
    } else {
            $layout_classes = "col-md-2";
    }

<div class="row"
    <div class="container">
        <div class="col-md-12">
        <div class="<?php echo $layout_classes ?>">

                                <?php dynamic_sidebar( 'sidebar-1'); ?>

                                    <?php dynamic_sidebar( 'sidebar-2'); ?>

                                        <?php dynamic_sidebar( 'sidebar-3'); ?>

</div>
</div>
</div>
</div><!--End Layout Class-->

P.Sブートストラップの使用3.

widgetssidebar
2
Carl Sergile

あなたは実際に問題が何であるかを言っていません。しかし私は初心者のためのものを見ることができます - あなたのif条件のdynamic_sidebarはウィジェットをすぐにエコーアウトします。 check サイドバーにウィジェットがある場合は、 is_active_sidebar を使用します。

is_active_sidebar( 'sidebar-1' ); // True/false
1
TheDeadMedic

here という答えがありますが、これは wp_get_sidebars_widgets に依存しています。

このコード は、より堅牢なソリューションのように見えます。

実はとても簡単です。私のウィジェットの PureCSS frameworkにクラスを追加するためにそれを使いました。

この場合、外側のコンテナに "grid"のクラスpure-gを持たせます。内側の項目はpure-u-1-*のクラスになります。アスタリスクは列の総数、この場合はウィジェットの数です。

サイドバーを登録する：

register_sidebar([
    'name'          => __('Footer Widget Area', 'pure-demo'),
    'id'            => 'sidebar-footer',
    'class'            => 'pure-g',
    // Next line has our callback
    'before_widget'  => '<section class="widget %2$s '. slbd_count_widgets( 'sidebar-footer' ) .'">',
    'after_widget'  => '</section>',
    'before_title'  => '<h3>',
    'after_title'   => '</h3>'
]);

そして、これが私たちのコールバック関数です。

 function slbd_count_widgets( $sidebar_id ) {
  // If loading from front page, consult $_wp_sidebars_widgets rather than options
  // to see if wp_convert_widget_settings() has made manipulations in memory.
  global $_wp_sidebars_widgets;
  if ( empty( $_wp_sidebars_widgets ) ) :
    $_wp_sidebars_widgets = get_option( 'sidebars_widgets', array() );
  endif;

  $sidebars_widgets_count = $_wp_sidebars_widgets;

  if ( isset( $sidebars_widgets_count[ $sidebar_id ] ) ) :
    $widget_count = count( $sidebars_widgets_count[ $sidebar_id ] );
    $widget_classes = '';
    $widget_classes .= 'pure-u-1 pure-u-sm-1-1';
    $widget_classes .= ' pure-u-md-1-' . ceil($widget_count / 2);
    $widget_classes .= ' pure-u-lg-1-' . $widget_count;
    return $widget_classes;
  endif;
}

それから私はそれをこのように表示します：

<footer class="content-info pure-g">
  <?php if ( is_active_sidebar( 'sidebar-footer' ) ) : ?>
      <?php dynamic_sidebar( 'sidebar-footer' ); ?>
  <?php endif; ?>
  <div id="colophon" class="site-footer" role="contentinfo">
  <?php
    if ( has_nav_menu( 'footer_links' ) ) :
       wp_nav_menu(['theme_location' => 'footer_links', 'container_class' => 'pure-menu', 'menu_class' => 'pure-menu-list']);
    endif;
  ?>
  </div>
</footer>
0
MikeiLL