如何在wp_list_pages子节点上添加类

时间:2014-04-27 21:51:47

标签: wordpress

我'我正在使用bootstrap 3.我'不知道在WordPress中是否可以在其子项ul上添加函数 wp_list_pages 。我知道有可能使用jQuery。

这就是我目前拥有的

<ul class="nav navbar-nav dropdown" role="menu" aria-labelledby="dLabel">
<?php 
  $args = array(
    'authors'      => '',
    'child_of'     => 0,
    'date_format'  => get_option('date_format'),
    'depth'        => 2,
    'echo'         => 1,
    'exclude'      => '5, 141, 143, 145',
    'include'      => '',
    'link_after'   => '',
    'link_before'  => '',
    'post_type'    => 'page',
    'post_status'  => 'publish',
    'show_date'    => '',
    'sort_column'  => 'menu_order',
    'title_li'     => '', 
    'walker'       => ''
  ); 
?>
<?php wp_list_pages( $args ); ?> 
</ul>

这是一个下拉菜单,因此WordPress会在其ul中添加一个类子类,但是我可以将bootstrap类下拉列表添加到该子项中。

2 个答案:

答案 0 :(得分:2)

您需要创建自定义walker来更改子<ul>类。默认页面调度器中没有用于更改所应用类的过滤器。

顺便说一句,您不需要为wp_list_pages包含这么多参数。只有你改变的那些。

我是这样做的:

添加到functions.php -

class WPSE_Walker_Page extends Walker_Page {
    /**
     * @see Walker::start_lvl()
     * @since 2.1.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param int $depth Depth of page. Used for padding.
     * @param array $args
     */
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class='change-me children'>\n"; // MAKE SURE TO CHANGE CLASSES HERE
    }
}

然后将您现有的来电替换为wp_list_pages()

<?php 
$args = array(
    'depth'        => 2,
    'exclude'      => '5, 141, 143, 145',
    'sort_column'  => 'menu_order',
    'title_li'     => '', 
    'walker'       => new WPSE_Walker_Page(),
); 

wp_list_pages( $args ); ?>

答案 1 :(得分:0)

好吧,仍然没有找到我要找的东西但是我发现一个不使用jQuery的工作只需要将类下拉菜单的代码粘贴到我的css样式中,就是这样。作品!

<强> CSS

.primary-menu-container > ul > li.page_item_has_children > ul.children{
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    background-clip: padding-box;
}