Wordpress - 如果当前页面处于活动状态,则添加“活动”类

时间:2012-05-21 19:22:12

标签: php css wordpress

<?php
          if($post->post_parent)
          $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
          else
          $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
          if ($children) {
        $parent_title = get_the_title($post->post_parent);?>

        <li><a href="<?php echo get_permalink($post->post_parent) ?>"><?php echo $parent_title;?></a></li>
          <?php echo $children; ?>
    <?php } ?>

上面的代码列出了列表中的父页面和所有子页面。

家长页面 儿童页面 Child Page class =“active”
儿童页面 儿童页面

我想在当前活动的页面中添加一个“active”类。任何帮助是极大的赞赏。感谢

3 个答案:

答案 0 :(得分:13)

要查找特定页面并向其添加活动类,您可以尝试使用is_page并定义页面的URL / slug。

<a  class="<?php if (is_page('name-of-page')) echo 'active'; ?>" href="#">Link</a>

答案 1 :(得分:0)

您是否无法通过WP菜单(在管理员中)获得此功能? 通常,大多数WP框架都会提供这种类命名。 (查看themehybrid.com例如)

答案 2 :(得分:0)

您可以通过将$post->post_title$item->title进行比较来轻松添加活动类和其他类

function addLinkClassesWithActive( $atts, $item, $args ) {
    global $post;
    // check if the item is in the primary menu
    if( $args->theme_location == 'main-nav' ) {
        // add the desired attributes:
        $atts['class'] = $post->post_title === $item->title ? 'mdl-layout__tab is-active' : 'mdl-layout__tab';
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'addLinkClassesWithActive', 10, 3 );

我自己使用这个,并剥离包装容器,ul和li标签,以便获得链接。参见下面的示例。

<nav role="navigation" class="mdl-navigation mdl-layout--large-screen-only" itemscope itemtype="http://schema.org/SiteNavigationElement">
    <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
        <?php
        $primaryMenu = array(
            'container' => false,
            'theme_location' => 'main-nav',
            'items_wrap' => '%3$s',
            'echo' => false,
        );
        echo strip_tags( wp_nav_menu( $primaryMenu ), '<a>' );
        ?>
    </div>
</nav>