将Foundation的选项卡与WordPress导航菜单和显示活动选项卡相结合

时间:2012-08-29 作者:thatguycraig

我目前正在使用ZURB的基础框架。这是一个很棒的框架,我的项目进展得比之前好得多,也快得多。Foundation附带了CSS/Javascript,可以在您的设计中调用。其中一个关键特性是标签系统。现在,到目前为止,我目前在网站上拥有的以下内容非常出色!

<dl class="tabs">

    <?php
    // List all pages needed in Navigation with their slug and title
    $pages = array(
        "" => "Home",
        "about" => "About",
        "contact" => "Contact",
    );

    // Find which page you\'re on currently...
    global $post;
    $post_slug = $post->post_name;

    // Looping through the pages to create each tab...
    foreach ( $pages as $slug => $title )
    {
        // Find out if we\'re on this page and setup the \'active\' class.
        $active = ( $slug == $post_slug || ( $slug == \'\' && is_front_page() ) ) ? "class=\'active\'" : "";

        // Echo each dd item with a link to page...
        echo "<dd ".$active.">
            <a href=\'". get_bloginfo(\'url\') ."/".$slug."\'>".$title."</a>
        </dd>";
    }
    ?>

</dl>
它显示活动标签,并允许我通过硬代码添加新链接。然而,我需要的是灵活性,我想在后端融入对Wordpress新菜单系统的支持,并以某种方式合并wp\\U nav\\U菜单。然而,我不确定从哪里开始。。。我在发布这篇文章时正在测试不同的东西,所以,也许我会偶然发现一个解决方案,但我想先检查一下这里。

谢谢

2 个回复
SO网友:Tribalpixel

您可以编写自定义类来扩展函数中的Walker\\u Nav\\u菜单。php,在这个类中,您可以更改所有标记

更简单的方法是从/wp includes/nav菜单模板复制所有类。php并修改所需内容

class Walker_Nav_Foundation extends Walker_Nav_Menu {

   function start_lvl() // to change opening <ul>

   function end_lvl() // to change ending </ul>

   ... etc ...
}
并在模板中调用它

<?php wp_nav_menu( array( \'theme_location\' => \'primary\', \'walker\' => new Walker_Nav_Foundation() ) ); ?>

SO网友:Jen

忘记上面构建的自定义代码吧(尽管我很高兴您喜欢!)只需使用vanilla WP导航菜单即可。

调整从Foundation获得的样式表,以识别“当前菜单项”,就像它识别“活动”选项卡一样。。。如果css过去是这样的:

li.active {
    /* some styles here */
}
li.active a {
    /* some other styles here */
}
现在应该是这样的:

li.active, li.current-menu-item {
    /* some styles here */
}
li.active a, li.current-menu-item a {
    /* some other styles here */
}
http://codex.wordpress.org/Function_Reference/wp_nav_menu 有很多关于自定义wp_nav_menu() 更多,以及它在页面底部附近输出的所有类的长列表。

结束

相关推荐

Remove menus and submenus

所以我找到了一些方便的代码片段来帮助删除管理菜单项。但是,我对子菜单项有问题。我想保留外观菜单,但去掉主题、小部件和编辑器。function remove_menus() { global $menu; global $current_user; get_currentuserinfo(); if($current_user->user_login == \'username\') { $restricted = array(__(\'