Wordpress 导航菜单 - 添加条件跨度

Question

有人有手动输出的 Wordpress 菜单的工作示例吗？ one on the Codex 似乎不起作用，尽管我的“页脚”的 menu_name slug 不能那么复杂..？为了便于访问，我需要在外部菜单链接中添加屏幕外跨度。我已经有了 CSS 类；我需要的是通过 functions.php 文件添加的特定标记。

我正在寻找的基本代码（请参阅带有“外部”类的列表项。为了代码简洁，Hrefs 更改为 #，它们在现实生活中链接到异地）：

<ul id="menu-footer" class="menu">
    <li class="menu-item">
        <a href="#">About Us</a>
    </li>
    <li class="external menu-item">
        <a title="Link opens in a new window." target="_blank" href="#">Terms &amp; Conditions <span class="offscreen">Opens in a new window</span></a>
    </li>
    <li class="menu-item">
        <a href="#">Comments Policy</a>
    </li>
    <li class="external menu-item">
        <a title="Link opens in a new window." target="_blank" href="#">Privacy Statement<span class="offscreen">Opens in a new window</span></a>
    </li>
    <li class="menu-item">
        <a href="#">Contact Us</a>
    </li>
</ul>

Answer 1

一个自定义的“walker”类？

http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

Answer 2

选项 1：

假设您已经使用 Appearance -> Menus 创建了菜单，您可以尝试以下操作。

1. 导航到外观 -> 菜单
2. 点击屏幕的“屏幕选项”（右上角），确保选中“CSS 类”。

完成上述步骤后，每个菜单项现在都会有一个“CSS 类”文本框，显示您可以在哪里单独分配 CSS 类（查看屏幕截图）。

选项 2：

你也可以试试http://codex.wordpress.org/Function_Reference/wp_nav_menu#Adding_Conditional_Classes_to_Menu_Items

<?php
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
     if(is_single() && $item->title == "Blog"){ //Notice you can change the conditional from is_single() and $item->title
             $classes[] = "special-class";
     }
     return $classes;
}
?>

选项 3：

如果上述 2 个选项不起作用，那么您还有使用 jQuery 的第 3 个选项。

HTH

Answer 3

答案：导航菜单必须注册并分配给主题才能使 Codex 示例正常工作。呵呵！

在functions.php中：

// default register any navigation menus
register_nav_menus(
    array(
      'footer' => 'Footer Menu',
      'links' => 'Links Menu'
    )
);

为您的主题分配菜单：

返回functions.php：

function accessibleAnchors($menu_name, $link_after = NULL){
    if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) {
        $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );

        $menu_items = wp_get_nav_menu_items($menu->term_id);

        $menu_list = '<ul id="menu-' . $menu_name . '" class="menu">';

        foreach ( (array) $menu_items as $key => $menu_item ) {
            // uncomment next line to see all array values
            // print_r($menu_item);
            $linkText = $menu_item->title;
            $url = $menu_item->url;
            $target = $menu_item->target;
            $titleAttr = $menu_item->attr_title;
            // hard-coding the first & only CSS class here, you could loop through others
            $cssClass = $menu_item->classes[0];

            if($target == '_blank'):
               $titleAttr = " title=\"$titleAttr\"";
               $span = "<span class=\"offscreen\"> Opens in a new window</span>";
            else:
               $span = "";
            endif;

            $menu_list .= '<li class="menu-item '.$cssClass.'"><a href="' . $url . '"'.$titleAttr. '>' . $linkText . $span . $link_after .'</a></li>';
        }
        $menu_list .= '</ul>';
    }
    return $menu_list;
}

现在调用模板中的函数：

<?php echo accessibleAnchors('footer'); ?>

轰隆隆。

Answer 4

您必须从 wp-includes/nav-menu-template.php 开始，将函数复制并粘贴到主题的 functions.php 并更改名称或使用 functions.php 中的过滤器来更改选定的标记钩子。并且可能还可以查看 wp-includes/nav-menu.php。

抱歉，我无法提供更多详细信息。