每个WordPress菜单项旁边的唯一图标

时间：2017-07-09 作者：James Mitchell

我有Wordpress菜单，它似乎是以某种方式放在后端的。我用过wp_nav_menu() 稍微自定义菜单项的换行。

我的问题是，我找不到直接访问菜单项的权限，无法向其添加自定义字段。它们都是类别，我希望每个类别都有一个特定的图标。

这是我在函数中的代码。php自定义菜单：

function custom_novice_menu($args) {
    $args[\'container\'] = false;
        $args[\'container_id\'] = \'my_primary_menu\';
        $args[\'link_before\'] = \'<div class="topic-card"><div class="topic-circle"></div><h3>\';
        $args[\'link_after\'] = \'</h3></div>\';
    return $args;
}

有人知道我可以为每个菜单项添加唯一图标的方法吗？

2 个回复

SO网友:InSight

您可能可以使用图标字体来实现这一点，例如FontAwesome，再加上CSS，以您的主题样式。css文件（希望使用子主题）。每个菜单项通常是HTML中的一个列表项，通常它们都有一个唯一的类和/或id，因此您可以使用它来针对每个菜单项。添加::before 在列表项之前插入图标的选择器，如下所示：

li.class::before {
    font-family: FontAwesome;
    color: #43CC9E;
    content: "\\f06c"; /* escaped unicode for the icon */
    float: left;
    width: 1.6em; /* icon width + space */
}

这是一个CodePen 我制作了，您可以在其中使用HTML&；CSS使用FontAwesome以这种方式在列表项之前放置图标。

This article 告诉你如何让FontAwesome进入你的WordPress网站，以及关于如何使用它的更多信息。当然，还有其他图标字体，原理也是一样的。

在FontAwesome.io 您可以查看每个图标并获取每个图标的unicode。

SO网友:Vijay Baria

在主题文件夹中，将以下代码添加到函数文件中：

function menu_icon_stylesheet() {
    wp_register_style( \'fontawesome\', \'http:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css\' );
    wp_enqueue_style( \'fontawesome\');
}
add_action( \'wp_enqueue_scripts\', \'menu_icon_stylesheet\' );

现在，您可以向每个菜单项添加一个类。单击向下箭头可查看与该菜单项相关的更多选项。在“CSS类”字段中，键入以下内容：

例如：

fa fa-lg fa-home

在这里

"fa" is used for all items with a Font Awesome icon
"fa-lg" sets the size of the icon to large
"fa-home" relates to the specific icon you want to display.

最后，在样式表中添加以下样式代码：

/* styling for menu icons */
.navigation-class ul li {
    width: 100%;
}
.fa::before {
    float: left;
    margin-top: 8px;
    width: 30px;
}
.navigation-class ul li.fa.fa-lg a {
    font-family: \'Noto Serif\', serif;
    font-size: 0.8em;
}

现在，您的导航菜单已包含完整的图标！

希望对你有帮助

结束

标签： php functions menus filters 小码农

重新编码类别-template.php以转到自定义URL

感谢所有人的支持–热爱这些论坛！问题是：–与普通页面相比，自动创建的类别和标记页面无法完全自定义解决方案是将类别/标记页面重定向到包含完整内容的内置页面–示例：https://www.checkhookfighting.com/category/brazilian-jiu-jitsu/ 重定向到https://www.checkhookfighting.com/techniques/brazilian-jiu-jitsu/问题：有没有办法将标签硬编码到wordpress模板中的页面WP分类法的一些初步研究

小码农CODE

每个WordPress菜单项旁边的唯一图标

相关推荐

重新编码类别-template.php以转到自定义URL