如何向侧栏小部件-WordPress的<ul>和Childs<li>添加类

时间:2017-10-14 作者:Sasa1234

Note : Please note that I create this theme to re-sell, so I need little bit good way to add it.

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

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引导列表样式:

<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

3 个回复
SO网友:IXN

如果你只处理一个网站而没有创建一个主题,那么最简单的解决方案可能是“手动”创建。这不是最“专业”的方式,但它确实有效。

以文本小部件或新的html小部件为例,粘贴您的代码,例如:

<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>
并手动更改(链接)。

SO网友:Johansson

如果你打算像评论中所说的那样销售你的主题,并且你想对导航菜单进行重大更改以在小部件中使用,我不确定创建一个助行器是否是解决方案。

相反,我建议使用小部件或短代码来进一步使用。下面是一个基本示例,使用wp_get_nav_menu_items():

add_shortcode(\'my-nav-menu\',\'my_nav_menu_callback\');
function my_nav_menu_callback($atts){
    $atts = shortcode_atts( 
        array(
            \'location\' => \'\',
        ), 
        $atts, 
        \'\' 
    ); 

    // Get the menu by its theme location
    $menu = get_term( $locations[$atts[\'location\']], \'nav_menu\' );
    $menu_items = wp_get_nav_menu_items($menu->term_id);

    // Run a loop and output the menu
    $menu_list = \'<ul class="list-group">\';

    foreach( $menu_items as $menu_item ) {

        if( $menu_item->menu_item_parent == 0 ) {

            $parent = $menu_item->ID;

            $menu_array = array();
            foreach( $menu_items as $submenu ) {
                if( $submenu->menu_item_parent == $parent ) {
                    $bool = true;
                    $menu_array[] =\'<li class="list-group-item">\'.$submenu->title.\'</li>\';
                }
            }
            if( $bool == true && count( $menu_array ) > 0 ) {

                $menu_list .= \'<li class="list-group-item">\'.$menu_item->title.\'</li>\';

            } else {

                $menu_list .= \'<li class="list-group-item">\' . $menu_item->title . \'</li>\';
            }

        }

    }

    $menu_list .=\'</ul>\';

    return $menu_list;
}
现在,您可以使用访问菜单[my-nav-menu location=\'menu-location] 在内容或任何文本小部件中。

确保首先通过使用以下命令启用对在文本小部件中使用短代码的支持:

add_filter(\'widget_text\',\'do_shortcode\');

SO网友:Arthur Ronconi

您可以使用dynamic_sidebar_params 过滤器:

function dynamic_sidebar_before_filter ($params) {
    $params[0][\'before_widget\'] = str_replace(\'class="widget-container\', \'class="widget-container w3-white w3-margin-bottom w3-card\', $params[0][\'before_widget\']);
    $params[0][\'before_title\'] = str_replace(\'class="widget-title\', \'class="widget-title\', $params[0][\'before_title\']);
    return $params;
}
add_action(\'dynamic_sidebar_params\', \'dynamic_sidebar_before_filter\');

结束

相关推荐

WordPress默认主题css单位

CSS单元的默认WordPress主题是否遵循特定规则?我在一些字体上看到em,在其他字体上看到rems,在某些地方看到px。引用了以下链接,但我找不到他们用于CSS单元的规则的实际引用:why does twenty eleven theme mix up the css measurement units?Why do Wordpress default themes specify fonts in so many places?编辑:按规则,我的意思是,例如:始终遵循单位制-px表示边框,em表示