如何将类添加到侧边栏小部件的 <ul> 和子级 <li> - Wordpress

Posted 2023-02-24

【中文标题】如何将类添加到侧边栏小部件的 <ul> 和子级 <li> - Wordpress

【英文标题】：How to add class to <ul> and childs <li> of sidebar widget - Wordpress

【发布时间】：2014-01-29 02:35:25

【问题描述】：

这就是我在右侧边栏上注册菜单的方式：

if(function_exists('register_sidebar'))
  register_sidebar(array(
            'name'=>'sidebar_default',
            'before_widget' => '<div class="panel panel-info">',
            'after_widget' => '</div>',
            'before_title' => '<div class="panel-heading"><h4>',
            'after_title' => '</h4></div>'
        ));
 

这是输出：

<div class="panel panel-info">
   <div class="panel-heading">
      <h4>Title</h4>
   </div>
<div class="menu-openings-menu-container">
    <ul id="menu-openings-menu" class="menu">
       <li id="" class="menu-item-object-page menu-item-381"><a href="">Software</a></li>
       <li id="" class="menu-item-object-page menu-item-382"><a href="">Software</a></li>
       <li id="" class="menu-item-object-page menu-item-383"><a href="">Software</a></li>
       <li id="" class="menu-item-object-page menu-item-384"><a href="">Software</a></li>
       <li id="" class="menu-item-object-page menu-item-385"><a href="">Software</a></li>
    </ul>
</div>
</div>

这就是它如何需要输出才能使用 Twitter Bootstrap 列表样式样式：

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

感谢所有建议。谢谢。

【参考方案1】：

这仅适用于后端:(

    class - CSS class to assign to the Sidebar in the Appearance -> Widget admin page. This class will only appear in the source of the WordPress Widget admin page. It will not be included in the frontend of your website. Note: The value "sidebar" will be prepended to the class value. For example, a class of "tal" will result in a class value of "sidebar-tal". (default: empty).
before_widget - html to place before every widget(default: '<li id="%1$s" class="widget %2$s">') Note: uses sprintf for variable substitution

【参考方案2】：

根据WordPress function reference，您只需将'class' => 'list-group', 属性添加到您传递的选项中，如下所示：

if(function_exists('register_sidebar'))
    register_sidebar(array(
        'name'=>'sidebar_default',
        'before_widget' => '<div class="panel panel-info">',
        'after_widget' => '</div>',
        'before_title' => '<div class="panel-heading"><h4>',
        'after_title' => '</h4></div>',
        'class' => 'list-group'
    ));

这应该设置ul 的类。 我不确定您是否也可以为个人 li 设置课程，但可以通过 ul 访问这些课程 （ul.list-group li 在 css 中）