Wordpress 菜单 + Bootstrap + Glyphicon 代替文本答案

【问题标题】：Wordpress Menu + Bootstrap + Glyphicon Instead TextWordpress 菜单 + Bootstrap + Glyphicon 代替文本
【发布时间】：2013-10-17 18:49:37
【问题描述】：

所以我正在使用 Bootstrap 开发一个 Wordpress 网站。我正在使用 Bootstrap 的导航栏作为与 WP 集成的菜单。我将主页作为导航栏中的链接作为“主页”。我希望出现一个字形而不是文本，而不是“主页”作为文本。
我想我可以为此使用 CSS... 像这样：

#menu-item-55 {
  /* something that removes text and adds the icon */
}

但在引导程序中我必须使用这样的图标

<span class="glyphicon glyphicon-search"></span>

有人吗？

谢谢

【问题讨论】：

标签： css wordpress twitter-bootstrap

【解决方案1】：

我想我可以通过添加自定义链接并将其放在导航标签内来做到这一点。

我仍然想要另一种方法。 :D

干杯

【讨论】：

【解决方案2】：

如果您在主题中使用 wordpress 3+ wp_nav_menu，则将此 sn-p 添加到 functions.php 将在您的导航中添加一个引导程序的 glyphicon-home 链接。

function addHomeMenuLink($menuItems, $args)
{
    if('header_menu' == $args->theme_location) // make sure to give the right theme location for the menu
    {
        if ( is_front_page() )
            $class = 'class="current-menu-item active"';
        else
            $class = '';
        $homeMenuItem = '<li ' . $class . '>' .
                $args->before .
                '<a class="glyphicon glyphicon-home" href="' . home_url( '/' ) . '" title="Home">' .
                $args->link_before .
             /* 'HOME' . //add home text if you want. */
                $args->link_after .
                '</a>' .
                $args->after .
                '</li>';
        $menuItems = $homeMenuItem . $menuItems;
    }
    return $menuItems;
}
add_filter( 'wp_nav_menu_items', 'addHomeMenuLink', 10, 2 );

source

【讨论】：

【解决方案3】：

导航到外观 > 菜单
找到要添加图标的菜单项
展开菜单项
在导航项中，您需要在现有菜单项标签之前或之后或代替现有菜单项标签添加图标代码。对于这个例子，我将使用主页图标。以下是您要输入的内容：

首页

注意：请务必使用单引号！

5.重要：这是您要确保做的事情，如果您忽略此步骤，可能会对您的 SEO 产生负面影响。您需要确保将纯文本放在 Title Attribute 字段中。

6.保存菜单。（还要确保您从主题位置下拉菜单中选择了其中一个菜单）就是这样！

http://jasonbradley.me/icons-in-the-wordpress-menu/

【讨论】：

菜单项 really 中不应包含 HTML。如果原始海报删除 Bootstrap/Glyphicons 会发生什么？他被菜单中的 HTML 卡住了。
如果删除 Bootstrap/Glyphicons 没有任何反应， 标签为空，浏览器上不会显示任何内容。
当然，这不是最佳方式。但是您应该知道标签可以随时从导航标题中删除，因为它们是从管理面板添加的。