如何将图标添加到自定义WordPress菜单没有插件

技术教程 2022年3月9日
2784 0

向您的网站导航菜单添加图标为您的访客提供了一些关于内容的视觉线索，并为您的网站添加了一个很好的设计触摸.

在此帖子中，我将演示如何在不使用任何插件或上传任何图像的情况下执行此操作.相反，您将通过WordPress管理员对导航菜单进行一些调整，然后在主题文件中添加一些代码.

当您完成后，您将在导航菜单中的每个项目旁边有一些简单的图标，最好的部分是您不必上载任何可能会减慢您的网站的图像或文件.以下是我们完成的导航菜单将如何看出:

The navigation menu with fonts and font size corrected

我们将使用字体令人敬畏的图标库，您可以通过插件添加，但您不需要从主题的函数文件中轻松调用它.

继续读取，或使用以下链接跳转:

  • 添加菜单图标-概述
  • 激活字体令人敬畏
  • 将图标添加到菜单项
  • 造型菜单项

添加菜单图标-概述

这些是如果您跟随此帖子，您将采用步骤:

  1. 创建二十五个主题的子主题来工作(如果您使用自己的主题，您可以跳过此步骤).
  2. 从主题的函数文件激活字体令人敬畏的库.
  3. 通过WordPress管理员将CSS类添加到导航菜单中的项目中.
  4. 为您的主题样式表添加一些样式，以获得正确的布局和字体.

让我们开始.

创建一个二十五岁的儿童主题

如果您没有您使用的主题，您需要创建一个.这样做的最简单方法是通过创建现有主题的子主题，这意味着您可以添加自己的更改而不为原始主题做任何事情.我打算创建一个默认主题的子主题，这是二十五岁.

如果您是新的儿童主题，请查看我们的全面指南，解释了如何进行.

激活字体Awesome

下一步是激活主题中的字体令人敬畏的库.在这样做之前，让我们快速看看字体很棒:

Font Awesome-the iconic font and CSS toolkit.Website home page.

字体Awesome是使用图标字体创建的图标库.这意味着它不使用背景图像，因为当您在您的网站添加图标时可能已经完成了.相反，它使用CSS类，将伪元素添加到具有图标类的任何内容.此伪元素在元素之前添加特殊字符，具有图标样式.你最终的目标是一个图标，它在您添加了CSS类的元素之前要输出.

如果您想了解有关字体如何使用CSS的信息，请查看其网站上的示例页面.您还将了解如何使用本教程的工作方式显示图标，这可能是最简单的方法来掌握它.

所以，让我们在主题中激活字体令人敬畏.

在主题文件夹中，创建一个名为functions.php的新文件.如果您的主题已经有函数文件，请打开.

将此代码添加到您的函数文件:

加载GIST 76E9AB6F27C66DE24D3B0C132521E214

让我们看看那是什么:

  1. 它创建一个名为wmpudev_enqueue_icon_stylesheet()的函数.
  2. 在该函数的内部，它使用wp_register_style()注册字体令人敬畏的样式表，该表托管在您的网站外.您可以在字体上找到此链接在令人敬畏的网站上的入门页面上.
  3. 接下来它使用wp_enqueue_style()将其驻留在注册的风格.
  4. 最后，它将函数挂钩到wp_enqueue_scripts动作钩，这告诉wordpress何时运行该功能.

请注意，在字体上是可靠的入门页面，您可以使用网页的<head>部分(这将在WordPress主题的header.php文件中调用样式表的说明.在WordPress中注册样式表的最佳方法:上面的方法是您应该这样做的方法.

现在保存你的functions.php文件.

将图标添加到菜单项

现在我们已经有字体很棒，我们可以使用它提供的CSS类添加到我们的菜单项中.

在wordpress admin中，转到外观>菜单以便编辑导航菜单.如果您尚未创建导航菜单，请立即创建一个，并确保您在菜单屏幕中勾选复选框，以便它位于主题中的"主要导航"插槽中.

wordpress允许您将CSS类添加到菜单中的每个项目，但默认情况下，您无法看到此字段:您需要首先切换它:

  1. 在屏幕顶部，单击屏幕选项选项卡.
  2. 确保选中"CSS类"旁边的框.
  3. 关闭屏幕选项选项卡.

现在您可以为每个菜单项添加一个类.从"主页"菜单项开始.在"菜单项"旁边，单击向下箭头以查看与该菜单项相关的更多选项.在"CSS类"字段中，键入以下内容:

加载GIST B53A6BC20705CCEFEF008078360A9A0.

这为菜单项添加了三个类:

  • fa用于所有具有字体令人敬畏的图标的所有项目
  • fa-lg将图标的大小设置为大
  • fa-home涉及要显示的特定图标.

菜单的管理界面现在将如下所示:

Menus Admin Screen with CSS Classes added

现在为每个菜单项执行相同的操作.您将在字体上找到更多的图标及其课程.

我正在使用以下类:

  • home:fa fa-lg fa-home(如上:房子图标)
  • 新闻:fa fa-lg fa-newspaper-o(报纸图标)
  • 图库:fa fa-lg fa-camera-retro(相机图标)
  • 约:fa fa-lg fa-info-circle(信息图标)
  • 联系人:fa fa-lg fa-envelope-o(信封图标)

您可以使用您想要的任何图标.只需确保添加fa fa-lg，然后添加"CSS类"字段中的每个导航菜单项的类.

现在通过单击保存菜单按钮来保存菜单.

样式菜单项

现在看看前端的网站菜单.这是我的:

Navigation menu with Icons added but no styling

那是一团糟！我的菜单中的字体已更改，当我希望它们到左侧时，图标在文本之上，当它们应在另一个之上时，我的菜单项彼此相邻.

如果您正在使用自己的主题，您可能会发现您的菜单看起来更好(或更糟！)，您可能需要进行一些不同的调整.要解决我网站中的问题，我将为我的样式表添加一些样式.

让我们首先使菜单项成为另一个.

打开主题的样式表并将以下内容添加到其中:

加载GIST DE419105FD2929459D87EE5E97274C58

这将确保每个菜单项占用其包含元素的100％宽度.

注意:如果您使用自己的主题，您可能需要为菜单定位不同的类别或ID，具体取决于您的主题编码的编码方式.在浏览器中使用Web Inspector识别目标的类.

现在刷新屏幕时，菜单看起来更好:

Menu icons on home page-menu item width corrected to full width of container

菜单项现在位于正确的位置，但图标应该位于每个菜单项的左侧而不是上面.

通过将以下方式添加到您的样式表:

加载GIST 1E446D1349F71CF607B199E5F3A10FCE.

这将使用font awesome添加到您分配其类的每个元素的::before伪元素.在这种情况下，我们将左侧的伪元素的内容浮动，这意味着图标将出现在菜单文本的左侧.

现在保存样式表并刷新屏幕.图标将在正确的位置:

Menu icons floated left

图标现在位于正确的地方，但他们可以用整理.让我们为边距和宽度添加更多样式.编辑刚刚添加到样式表的伪元素的声明，以便它如下所示:

加载GIST 5C4F7D9BABC0F49FB40BAC9B3C683596

这在元素上方添加了一个边缘，以将其与文本一起线，并给它一个固定的宽度，以便在它和文本之间存在空间，但文本将是对齐的.

现在，您的菜单将如下所示:

Menu icons with the correct layout

那更好.现在最后一步是调整菜单文本的字体.

将字体添加到每个菜单项中，更改了文本的字体以及图标，因此我们需要更改返回.我将在菜单中的每个列表项中添加样式，因为不会影响图标，我将使用二十十二个主题的字体.

在您的样式表中，添加以下:

加载GIST 4C68F69C4D210D5A7B15F6896B278C1

这将针对fa和fa-lg类的任何菜单项中的链接，并调整字体和字体大小.

这是您的最终样式表将包括:

加载GIST 40637E3F0288BC21F5F6886306CE9699
现在，菜单看起来应该这样做:

The navigation menu with fonts and font size corrected

现在我的导航菜单完成！

摘要

向您的网站添加图标是一年或两年前的一个非常不同的过程.现在，代替上传图像并使用样式将它们放在页面中的元素背景中，可以使用基于字体的图标库添加图标.

在此帖子中您已经学习了如何使用字体令人敬畏的库将图标添加到菜单项，然后将它们拟合它们，以便它们看起来整洁，文本字体就像它一样.您可以使用本网站中的其他元素使用此技术，例如列表，标注和按钮，只需使用Font Awesome库提供的CSS类.

图标(6)添加(37)菜单(19)
♥赞3

相关文章

发表回复