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

时间:2014-01-10 08:00:10

标签: php html css wordpress wordpress-theming

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

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>

我感谢所有的建议。感谢。

output

Source code

2 个答案:

答案 0 :(得分:1)

根据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中)

答案 1 :(得分:0)

这仅适用于后端:(

    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