若何在 WordPress 主题中增加自界说导航菜单

平衡才能持久

来历：知乎
您想在您的 WordPress 主题中增加自界说导航菜单吗？
一切主题都设备了可以显现导航菜单的位置。可是，默许情况下，除了这些预界说位置之外，您不能在其他任何地方增加菜单。
在本文中，我们将向您展现若何将自界说导航菜单增加到 WordPress 主题的任何地区。


为什么要在 WordPress 主题中增加自界说导航菜单？

导航菜单是指向网站重要地区的链接列表。它们使拜候者可以轻松找到风趣的内容，从而可以 增加网页阅读量并下降 WordPress 中的跳出率。
菜单简直切位置将按照您的WordPress 主题而有所分歧。大大都主题都有多个选项，是以您可以建立分歧的菜单并将它们显现在分歧的地方。
要检察当前 WordPress 主题中可以在何处显现菜单，只需转到表面 » 菜单，然后检察“显现位置”部分。
下图显现了Astra WordPress 主题支持的位置。


可是，偶然您能够希望在主题中未列为“显现位置”的地区中显现菜单。
斟酌到这一点，让我们来看看若何建立 WordPress 导航菜单，然后将它们增加到您的主题中。只需利用下面的快速链接跳转到您喜好的方式。

• 方式一、在全站编辑中增加自界说导航菜单
  
• 方式 2. 利用 SeedProd 在 WordPress 中建立自界说导航菜单（适用于一切主题）
  
• 方式 3. 利用代码在 WordPress 中建立自界说导航菜单（高级）
  

方式一、在全站编辑中增加自界说导航菜单

假如您利用的是块主题，则可以利用完整站点编辑 (FSE) 和块编辑器增加自界说导航菜单。有关更多具体信息，您可以检察我们关于最好 WordPress 全站编辑主题的文章。
此方式不适用于每个主题，而且不会让您自界说菜单的每个部分。假如您想向任何 WordPress 主题增加完全自界说的菜单，那末我们倡议利用页面构建器插件。
假如您利用的是基于块的主题，请转到表面»编辑器。


这将启动完整的站点编辑器，其中已挑选您的活动主题模板之一。
假如您想将自界说导航菜单增加到分歧的模板，请单击工具栏中的箭头并挑选“阅读一切模板”。


站点编辑器现在将显现属于您的主题的一切分歧模板。
只需找到您要编辑的模板，然后单击即可。


下一步是将导航块增加到要显现菜单的地区。
在左上角，单击蓝色的“+”按钮。


现在，继续并在搜索栏中输入“导航”。
当“导航”块出现时，只需将其拖放到您的结构上即可。


接下来，单击以挑选导航块。
假如您已经建立了要显现的菜单，请单击“挑选菜单”并从下拉列表中停止挑选。


另一种挑选是单击“建立新菜单”，它答应您在完整的站点编辑器中构建导航菜单。
要从空缺菜单起头，只需单击“从空缺起头”。


要将项目增加到新菜单，只需单击“+”图标。
这将翻开一个弹出窗口，您可以在其中增加任何帖子或页面，并决议这些链接能否应在新选项卡中翻开。


只需反复这些步调即可将更多项目增加到菜单中。
假如您对菜单的表面感应满足，只需单击“保存”按钮即可。您的网站现在将利用新模板，拜候者可以与您的自界说导航菜单停止交互。
方式 2. 利用 SeedProd 在 WordPress 中建立自界说导航菜单（适用于一切主题）

完整的站点编辑器是将根基自界说菜单增加到基于块的主题的快速简洁的方式。可是，假如您想为任何主题增加一个高级的、完全可定制的菜单，那末您将需要一个页面构建器插件。
SeedProd是市场上最好的 WordPress 页面构建器插件，答应您自界说导航菜单的每个部分。
SeedProd 附带 180 多个专业设想的模板，您可以将其用作起点。挑选模板后，您可以利用简单的拖放操纵将自界说导航菜单增加到您的站点。
首先，您需要安装并激活 SeedProd 插件。有关更多具体信息，请参阅我们关于若何安装 WordPress 插件的分步指南。
留意：还有一个免费版本的 See d Prod，它答应您在不编写代码的情况下建立自界说导航菜单。可是，在本指南中，我们将利用 SeedProd Pro，由于它有更多模板供您挑选。
激活插件后，SeedProd 将要求您供给答应证密钥。


您可以在您在 SeedProd 网站上的帐户下找到此信息。输入密钥后，单击“考证密钥”按钮。
完成后，转到SeedProd » Landing Pages并单击“增加新的 Landing Page”按钮。


您现在可以为您的自界说页面挑选一个模板。
为了帮助您找到合适的设想，SeedProd 的一切模板都被构造成份歧的活动范例，例如行将推出和领先挤压活动。您甚至可以利用 SeedProd 的模板来改良您的 404 页面。


要仔细检察任何设想，只需将鼠标悬停在该模板上，然后单击放大镜图标。
当您找到想要利用的设想时，请单击“挑选此模板”。


我们在一切图像中都利用“黑色星期五销售页面”模板，但您可以利用任何您想要的模板。
挑选模板后，输入该自界说页面的称号。SeedProd 将按照页面题目自动建立一个 URL，但您可以将此 URL 变动成您想要的任何内容。
输入此信息后，单击“保存并起头编辑页面”按钮。


大大都模板已经包括一些块，它们是一切 SeedProd 页面结构的焦点组件。
要自界说块，只需在页面编辑器中单击以选中它。
左侧工具栏将显现该块的一切设备。例如，鄙人图中，我们正在变动“题目”块中的文本。


您可以利用左侧菜单中的设备来设备文本格式、变动其对齐方式、增加链接等。
要向您的设想增加新块，只需在左侧菜单中找到任何块，然后将其拖到您的设想中。假如您想删除一个块，只需单击以挑选该块，然后单击渣滓桶图标。


由于我们要建立自界说导航菜单，是以将“导航菜单”块拖到页面上。
这将建立一个带有单个默许“关于”项的导航菜单。


要自界说此菜单项，请在左侧菜单中单击以选中它。
这将翻开一些控件，您可以在其中变动文本，以及增加要链接到的菜单项的 URL。


默许情况下，菜单项将是一个“dofollow”链接并在同一阅读器窗口中翻开。要变动这些设备中的任何一个，只需利用“URL 链接”部分中的复选框即可。
鄙人图中，我们正在建立一个将在新窗口中翻开的“nofollow”链接。


要向菜单增加更多项目，只需单击“增加新项目”按钮。
然后，您可以依照上述不异的进程自界说这些项目中的每一个。


左侧菜单还具有变动字体巨细和文本对齐方式的设备。
您甚至可以建立一个分隔线，它会出现在菜单中的每个项目之间。


以后，继续并切换到“高级”选项卡。在这里，您可以变动菜单的色彩、间距、排版和其他高级选项。
当您停止变动时，实时预览会自动更新，是以您可以尝试分歧的设备来检察您的设想中看起来不错的部分。


当您对自界说菜单的表面感应满足时，便可以公布它了。
只需单击“保存”旁边的下拉箭头，然后挑选“公布”。


您的自界说导航菜单和页面现在将在您的WordPress 博客上生效。
方式 3. 利用代码在 WordPress 中建立自界说导航菜单（高级）

假如您不想设备页面构建器插件，则可以利用代码增加自界说导航菜单。凡是，您需要将自界说代码片断增加到主题的 functions.php 文件中。
可是，我们不倡议高级用户之外的任何人利用此方式，即使这样，您代码中的一个小毛病也能够致使很多常见的 WordPress 毛病，大概完全破坏您的网站。
这就是我们保举利用WPCode的缘由。这是在 WordPress 中增加自界说代码而无需编辑任何焦点 WordPress 文件的最简单和最平安的方式。
您需要做的第一件事是在您的网站上安装并激活免费的 WPCode 插件。有关更多具体信息，请参阅我们关于若何安装 WordPress 插件的分步指南。
激活后，转到Code Snippets » Add Snippet在您的 WordPress 仪表板中。


在这里，您会看到一切可以增加到站点的分歧现成片断。
由于我们要增加我们自己的代码段，请将鼠标悬停在“增加您的自界说代码”上，然后单击“利用代码段”。


首先，输入自界说代码片断的题目。这可所以帮助您识别代码段的任何内容。
以后，翻开“代码范例”下拉菜单并挑选“PHP 代码段”。


完成后，只需将以下代码片断粘贴到代码编辑器中：

1. function wpb_custom_new_menu() {
2.   register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
3. }
4. add_action( 'init', 'wpb_custom_new_menu' );

复制代码

这将为您的主题增加一个新的菜单元置，称为“我的自界说菜单”。要利用分歧的称号，只需变动上面的代码片断即可。
假如您想为您的主题增加多个新的导航菜单，那末只需在您的代码片断中增加一行。例如，我们在此处向主题增加了两个新菜单元置，称为“我的自界说菜单”和“额外菜单”：

1. function wpb_custom_new_menu() {
2.   register_nav_menus(
3.     array(
4.       'my-custom-menu' => __( 'My Custom Menu' ),
5.       'extra-menu' => __( 'Extra Menu' )
6.     )
7.   );
8. }
9. add_action( 'init', 'wpb_custom_new_menu' );

复制代码

在代码框下方，您将看到插入选项。假如尚未挑选，请挑选“自动插入”方式，这样代码段将自动插入并在您的网站上履行。
以后，翻开“位置”下拉菜单并单击“到处运转”。


然后，您便可以转动到屏幕顶部并单击“非活动”开关，使其变成“活动”。
最初，继续并单击“保存”以使该片断生效。


以后，转到表面»菜单并检察“显现位置”地区。
您现在应当看到一个新的“我的自界说菜单”选项。


您现在已预备好将一些菜单项增加到新位置。有关具体信息，请参阅我们关于如作甚初学者增加导航菜单的分步指南。
当您对菜单感应满足时，下一步就是将其增加到您的 WordPress 主题中。
将自界说导航菜单增加到您的 WordPress 主题
大大都网站一切者在网站徽标或题目以后间接在题目部分下方显现他们的导航菜单。这意味着导航菜单是拜候者看到的第一件事。
可是，您可以经过向主题的模板文件增加一些代码来在任何您想要的地方显现您的自界说导航菜单。
在您的 WordPress 仪表板中，转到表面 » 主题文件编辑器。
在右侧菜单中，选摘要编辑的模板。例如，假如您想在网站的页眉中显现自界说导航菜单，那末您凡是需要挑选 header.php 文件。


如需帮助找到正确的模板文件，请参阅我们的指南，领会若何在您的 WordPress 主题中找到要编辑的文件。
挑选模板文件后，您需要增加一个 wp_nav_menu 函数并指定您的自界说菜单的称号。例如，在以下代码片断中，我们将我的自界说菜单增加到主题的题目中：

1. wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

复制代码

增加代码后，单击“更新文件”按钮以保存您的变动。


现在，假如您拜候您的站点，您将看到正在运转的自界说菜单。
默许情况下，您的菜单将显现为普通的项目标记列表。


您可以经过向您的站点增加自界说 CSS 代码来设备自界说导航菜单的款式，以更好地婚配您的 WordPress 主题或公司品牌。
为此，请转到表面 » 自界说。


在 WordPress 定制器中，单击“其他 CSS”。
这将翻开一个小型代码编辑器，您可以在其中输入一些 CSS。


您现在可以利用增加到主题模板的 CSS 类来设备菜单款式。在我们的示例中，这是.custom_menu_class.
鄙人面的代码中，我们增加边距和添补，将文本色彩设备为黑色，并在水平结构中排列菜单项：

1. div.custom-menu-class ul {
2.     margin:20px 0px 20px 0px;
3.     list-style-type: none;
4.     list-style: none;
5.     list-style-image: none;
6.     text-align:right;
7.     display:inline-block;
8. }
9. div.custom-menu-class li {
10.     padding: 0px 20px 0px 0px;
11.     display: inline-block;
12. }
14. div.custom-menu-class a {
15.     color:#000;
16. }

复制代码

WordPress 定制器将自动更新以显现菜单在新款式下的表面。


假如您对菜单的表面感应满足，请单击“公布”以使您的变动生效。
有关更多信息，请参阅我们关于若何设备 WordPress 导航菜单款式的指南。
利用 WordPress 导航菜单做更多工作

利用 WordPress，您可以做的不但仅是在菜单中显现链接。以下是若何从导航菜单中获得更多信息：

• 若何在 WordPress 中增加带有导航菜单的图像图标
  
• 若何向 WordPress 中的菜单增加条件逻辑
  
• 若何在您的 WordPress 主题中增加菜单描写
  
• 若何在 WordPress 中增加全屏响应式菜单
  
• 若何将大型菜单增加到您的 WordPress 网站
  

原文地址：https://zhuanlan.zhihu.com/p/588963810
免责声明：本帖内容由机械人自动收集于互联网，如加害了您的权益，请联系我们【E-Mail:cb@yoyodoc.com】 我们会实时删除侵权内容，给您带来未便，深感歉意！