Question

所以我目前有这个；

<?php dynamic_sidebar( 'footerfull' ); // In footer.php ?>

目前的结构是这样的

<div class="col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0">
   Menu Widget 1
   Menu Widget 2
   Menu Widget 3
</div>

我想要实现的目标；

<div class="col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0">
    Menu Widget 1 
</div>
<div class="col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0">
    Menu Widget 2 
</div>
<div class="col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0">
    Menu Widget 3 
</div>

目标是像这样将菜单分成几列；

<div class="col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0">
  <h4 class="h6">Account</h4>

  <!-- List Group -->
  <ul class="list-group list-group-flush list-group-borderless mb-0">
    <li><a class="list-group-item list-group-item-action" href="../account/dashboard.html">Account</a></li>
    <li><a class="list-group-item list-group-item-action" href="../account/my-tasks.html">My tasks</a></li>
    <li><a class="list-group-item list-group-item-action" href="../account/projects.html">Projects</a></li>
    <li><a class="list-group-item list-group-item-action" href="../account/invite-friends.html">Invite friends</a></li>
  </ul>
  <!-- End List Group -->
</div>

Widgets.php

register_sidebar(
        array(
            'name'          => __( 'Footer Full', 'understrap' ),
            'id'            => 'footerfull',
            'description'   => __( 'Full sized footer widget with dynamic grid', 'understrap' ),
            'before_widget' => '<div id="%1$s" class="footer-widget %2$s dynamic-classes">',
            'after_widget'  => '</div><!-- .footer-widget -->',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        )
    );

在此问题上我能提供的任何帮助将不胜感激。

编辑：1月22日12:58

作为@cabrerahector，我需要编辑以下行来进行我想要的更改。

'before_widget' => '<div id="%1$s" class="col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0">',

Answer 1

您已经有一个div元素来包装小部件，因此您只需将CSS类（col-6，col-sm-4等）添加到before_widget：

register_sidebar(
    array(
        'name'          => __( 'Footer Full', 'understrap' ),
        'id'            => 'footerfull',
        'description'   => __( 'Full sized footer widget with dynamic grid', 'understrap' ),
        'before_widget' => '<div id="%1$s" class="footer-widget %2$s dynamic-classes col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0">',
        'after_widget'  => '</div><!-- .footer-widget -->',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    )
);

或者，您也可以将包含上述类的新div元素添加到before_widget / after_widget（包装器的包装器）中。

register_sidebar(
    array(
        'name'          => __( 'Footer Full', 'understrap' ),
        'id'            => 'footerfull',
        'description'   => __( 'Full sized footer widget with dynamic grid', 'understrap' ),
        'before_widget' => '<div class="col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0"><div id="%1$s" class="footer-widget %2$s dynamic-classes">',
        'after_widget'  => '</div></div><!-- .footer-widget -->',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    )
);

如何包装Wordpress的-dynamic_sidebar输出的每个小部件？

1 个答案: