当前位置:首页>WordPress教程>WordPress开发>创建和定制WordPress导航菜单的深入浅出教程

创建和定制WordPress导航菜单的深入浅出教程

创建和定制WordPress导航菜单的深入浅出教程

一个WordPress网站如果没有菜单和子菜单,就不算什么了。在WordPress内根据你的喜好定制这些菜单也是很简单的。因此,你的WordPress菜单是一个 “front line”工具,以获得一个高的,并保持访问者在网站上。

WordPress内部的专用屏幕掩盖了你的菜单可以有多复杂。你也能够在你的网站上的几个位置显示菜单。如果你有编码技能,你可以定制你的WordPress菜单,几乎有无限的可能性。

在这篇文章中,我们将给你一个创建WordPress菜单的深入指南。我们还将向你展示如何利用该功能并以几种不同的方式增强它。

  1. 剖析WordPress的菜单
  2. WordPress菜单结构的不同类型
  3. 如何创建一个自定义的WordPress菜单(3种方法)
  4. 如何加强你的WordPress菜单

剖析WordPress的菜单

对于不熟悉的人来说,WordPress菜单通常是一个链接(包括下拉)的集合。它是一个直接的功能,只是你的网站骨架中的一个 “椎体”。

创建和定制WordPress导航菜单的深入浅出教程

WordPress网站菜单示例

我们将在下一节中更详细地讨论在网站上看到的菜单。现在,你要知道,它们可以放在你想显示的任何地方。你可能只有几个预选的选项(基于小部件的区域)。不过,从技术上讲,菜单可以放在任何地方。

当然,WordPress的菜单对于导航网站是最重要的。如果你有一个清晰明确的导航菜单,这将有助于用户在你的网站上浏览,它将使你的跳出率下降。

它们也有另一个目的:你的菜单有助于你的搜索引擎优化(SEO)。优化WordPress菜单以利于SEO,更多的是关于舍弃什么,而不是放进什么。对于初学者来说,你可以取消一些元素–如标签云–并保持你所包含的链接的数量较少。

虽然谷歌允许你在一个页面上最多添加250个链接,但保持你的 “链接价值“是至关重要的。因此,减少外部链接的数量从长远来看对你有好处。

WordPress菜单结构的不同类型

你可能已经明白,根据你的应用程序的需要,你可以选择不同的WordPress菜单结构。

例如,标题菜单是最常见的,因为它们处理的是主要的网站导航。你也会经常看到主导航上方的小菜单,因为这是社交媒体图标、搜索栏等的绝佳位置。

SAU/CAL的网站有一个 “飞入 “菜单,包括导航和社交链接:

创建和定制WordPress导航菜单的深入浅出教程

SAU/CAL网站飞入式菜单

这个菜单表明,WordPress的菜单有比导航网站更多的使用情况。使用WordPress的内置功能(后面会详细介绍),你可以为你需要的几乎任何东西创建一个菜单。

与页眉导航一样流行的是页脚。你经常会用这个区域为向下滚动的用户重复你的主要导航。此外,它也是为你的产品和服务提供更多基于上下文的链接的绝佳场所:

创建和定制WordPress导航菜单的深入浅出教程

闪电博底部菜单

如果网站使用侧边栏,你还会看到侧边栏内的菜单:

创建和定制WordPress导航菜单的深入浅出教程

一个侧边栏导航的例子

虽然在很多情况下你不会在这里看到主要导航,但它是一个传统的社交链接、博客文章档案和更多内容的地方。

如何创建一个自定义的WordPress菜单(3种方法)

创建一个WordPress菜单是一个简单的过程,不管你的专业水平如何。有三种主要的方法来完成这项工作:使用WordPress的内置功能;安装一个合适的插件或用代码来弄脏你的手。

接下来,我们将向你展示如何使用这三种方法创建一个WordPress菜单。

1. 使用WordPress的内置功能来创建你的菜单

WordPress有内置的工具来帮助你创建一个菜单。除了最新的用户之外,WordPress管理中的一个专门屏幕对所有的用户来说都是熟悉的。

创建和定制WordPress导航菜单的深入浅出教程

WordPress的菜单界面

当然,使用本地功能来创建你的WordPress菜单有许多好处。首先,你与你的网站有完全的兼容性。而且,你可以使用一个熟悉的界面和本地工具来建立你的菜单。

要达到这个目的,请前往WordPress内的外观>菜单页面:

创建和定制WordPress导航菜单的深入浅出教程

WordPress的菜单链接

这个屏幕分为几个不同的部分。在顶部,你会发现选择当前菜单或创建一个新菜单的选项:

创建和定制WordPress导航菜单的深入浅出教程

菜单选择下拉

如果你决定建立一个新的菜单,给它起个名字,并查看菜单设置部分。

创建和定制WordPress导航菜单的深入浅出教程

菜单设置选项

这里有很多复选框,但你有两个主要决定要做:

  • 自动添加顶级页面到菜单中。 这里的 “顶级 “是指你在WordPress中创建的不是其他页面的的页面。例如,一篇博客文章不是一个顶级页面,因为在许多情况下它会有一个父级档案页(例如/blog)。另一方面,一个联系页面通常是顶级的,因为它通常不会有一个父页面。
  • 菜单位置。 每个主题都会有它的菜单位置。除非你改变了主题的核心文件,否则者已经硬编码了这些菜单位置。有些主题可能允许你通过其设置来定制它们。

一旦你准备好了,点击创建菜单按钮。屏幕将刷新,并将显示你在你的新菜单中。接下来,看一下屏幕的左侧:

创建和定制WordPress导航菜单的深入浅出教程

菜单项的手风琴式菜单

这个屏幕列出了你网站上所有的帖子、页面、分类法和其他可链接的资产。你通过勾选左边的方框来建立你的菜单,然后点击添加到菜单按钮。

这将把它们移到菜单屏幕的中央部分:

创建和定制WordPress导航菜单的深入浅出教程

在菜单结构部分拖放项目

在这里,你可以把菜单项目拖到合适的位置。如果你点击每个项目旁边的扩展箭头,你还可以为你的菜单项目设置一个标签,或者删除它。

创建和定制WordPress导航菜单的深入浅出教程

展开一个菜单项

一旦你点击了保存菜单,你就可以开始了。不过,如果你展开屏幕顶部的屏幕选项菜单,你可以对你的WordPress菜单做更多事情:

创建和定制WordPress导航菜单的深入浅出教程

显示选项面板

显示元素组可以让你在左边的侧边栏显示菜单元框。相比之下,显示高级菜单属性组可以显示列表项的链接目标、描述和类。

菜单屏幕还有一个值得注意的方面。自定义链接框让你设置一个你选择的链接,而不是你网站上预定义的页面:

创建和定制WordPress导航菜单的深入浅出教程

自定义链接框

这个选项是你如何将社交媒体链接添加到你的WordPress菜单中。该平台将根据你选择的网站为你拉出正确的图标,让你有机会为你选择的网站提供显示良好的标识。

2. 使用一个插件来创建你的自定义WordPress菜单

为WordPress添加功能的直接解决方案是通过插件。上一节已经介绍了为什么WordPress的原生选项几乎是你所需要的全部,但是插件可以扩展这个功能。

有一个问题是,你是否需要一个专门的(和额外的)插件来创建一个WordPress菜单,尽管这样做有很多好的理由。对于初学者来说,你经常会根据你在默认设置下无法访问的风格来制作一个菜单。特定的、”巨型菜单 “等等,都可以通过插件来实现。

更重要的是,你可以使用一个专门的编辑器建立菜单,并在很多情况下从预设模板中选择。再加上广泛的定制选项,你有一个 “ “解决方案,将提供一个适合你的网站的WordPress菜单。

例如,Max Mega Menu插件在你能实现的方面没有任何意外:

创建和定制WordPress导航菜单的深入浅出教程

Max Mega Menu插件

一旦它被安装和激活,你会在WordPress内发现一个新的Mega Menu面板:

创建和定制WordPress导航菜单的深入浅出教程

WordPress内的Menu Locations链接

如果你看一下Menu Locations屏幕,你会发现有更多的自定义功能供你使用:

创建和定制WordPress导航菜单的深入浅出教程

Max Mega Menu的菜单位置屏幕

你还可以应用菜单主题,并以类似于市场上一些最好的页面生成器的范围来编辑它们:

创建和定制WordPress导航菜单的深入浅出教程

Max Mega Menu中的 “菜单主题 “屏幕

我们可以在这里挖掘更多的东西,尽管我们会重复自己。我们鼓励你查看我们以前关于WordPress菜单插件的文章。我们详细介绍了如何选择适合你的插件以及如何使用它。

3. 编来创建你的自定义WordPress菜单

为你自己的WordPress菜单编码是一个可靠的方法,可以实现你的勇敢者的目标(或者如果你是一个创建新的WordPress主题的开发者)。当然,你不会每天都打开一个器来添加一个菜单。为此,你会使用本地的WordPress工具(或者可能是一个插件)。

也就是说,如果你想开发主题,学习如何为WordPress菜单编码是一个重要的要求。成功有四个部分:

  • 注册你的菜单。
  • 在前端显示WordPress的菜单。
  • 在你的菜单或其项目中显示额外的内容。
  • 定义一个回调。

我们假设你对代码编辑器很顺手,你有一个可以工作的开发环境,而且你的技能很敏锐。如果你还没有一个主题可以使用,你可以使用WordPress的默认选项,或者从我们的最快WordPress主题列表中挑选一个。

当你准备好的时候,你要打开主题的 functions.php 文件。注意,这与一般WordPress的同名文件不同。在这里,你需要注册你的菜单。换句话说,你必须告诉WordPress在外观>菜单页面上显示什么。要做到这一点,你需要使用register_nav_menus()函数。

function register_my_menus() {
register_nav_menus(
array(
'header' => __( 'Header Menu' ),
'other' => __( 'Other Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );

这段代码告诉WordPress内的Manage Locations标签显示两个菜单:Header MenuOther Menu

创建和定制WordPress导航菜单的深入浅出教程

在WordPress中注册菜单

接下来,你必须使用wp_nav_menu()函数来显示你的菜单。你要把它添加到与你想显示菜单的地方相对应的模板文件中。在我们的例子中,我们要用头,所以我们要在主题的header.php文件中添加以下代码:

wp_nav_menu( array( 'theme_location' => 'header' ) );

可能是这段代码被包裹在 if 语句中,和你的其他一些菜单一起,所以你要遵循你发现的惯例。

在这一点上,你可以像其他的菜单一样在WordPress中工作。虽然,你可能也想考虑为你的菜单项添加额外的内容。例如,你可以扩大定义的数组,以包括将在输出时呈现的HTML标签:

wp_nav_menu(
array(
'menu' => 'primary',
'link_before' => '',
'link_after' => '',
)
);

你在这里的最后一项任务是定义一个回调。默认情况下,当没有找到指定的菜单时,WordPress会显示一个填充的菜单。作为一种选择,当没有选择自定义菜单时,WordPress会显示一个页面的菜单。如果这不是你想要的动作,你可以为 theme-location 参数设置一个不同的参数,也可以添加一个 fallback_cb 参数:

wp_nav_menu(
array(
'menu' => 'primary',
// do not fall back to first non-empty menu
'theme_location' => '__no_such_location',
// do not fall back to wp_page_menu()
'fallback_cb' => false
)
);

一旦你理解了如何创建一个WordPress菜单,你就可以开始增强其功能。我们将在最后一节看一下这个问题,为WordPress创建一个自定义的菜单元框。

如何增强你的WordPress菜单

因为这一部分是高级的,我们在继续之前会做一些假设:

  • 你知道如何用PHP创建一个WordPress菜单。
  • 你的PHP技能足够好,可以跟随一些高级主题。
  • 你知道如何注册和初始化一个WordPress插件。

这超出了本文的范围,但你可以使用WordPress插件模板生成器来创建一个新的、标准化的插件模板。

创建和定制WordPress导航菜单的深入浅出教程

WordPress插件模板生成器

当你准备好了,创建并上传你的插件到WordPress:

创建和定制WordPress导航菜单的深入浅出教程

在WordPress内安装的一个新插件

接下来,导航到该插件的文件夹,打开主文件。在这里,添加以下代码:

/**
* Add menu meta box
*
* @param object $object The meta box object
* @link https://developer.wordpress.org/reference/functions/add_meta_box/
*/
function custom_add_menu_meta_box( $object ) {
add_meta_box( 'custom-menu-metabox', __( 'Authors' ), 'custom_menu_meta_box', 'nav-menus', 'side', 'default' );
return $object;
}
add_filter( 'nav_menu_meta_box_object', 'custom_add_menu_meta_box', 10, 1);

WordPress的add_meta_box()函数将在WordPress管理中注册一个元数据框。在官方文档中,有几个参数你要参考。我们也使用nav_menu_meta_box_object()过滤器,因为nav-menus.php文件中没有动作可以挂接。这个语句决定了该函数是否为一个对象类型添加菜单项的元框。当过滤器运行时,add_meta_box 注册了自定义元框。

定义一个回调函数

接下来,我们可以定义一个回调函数来产生元框的HTML内容:

/**
* Displays a metabox for an author menu item.
*
* @global int|string $nav_menu_selected_id (id, name or ) of the currently-selected menu
*/
function custom_menu_meta_box(){
global $nav_menu_selected_id;
$walker = new Walker_Nav_Menu_Checklist();
...
}

全局变量记住了当前的菜单ID,而 $walker 存储了 Walker_Nav_Menu_Checklist 对象的一个新实例。这将建立菜单项的HTML列表。

从这里,我们必须确定自定义元框中的活动标签。要做到这一点,我们设置 $current_tab 的值,在前面代码块中设置的省略号内工作。

我们在这里使用两个标签,但你可以根据你的需要添加更多的标签:

$current_tab = 'all';
if ( isset( $_REQUEST['authorarchive-tab'] ) && 'admins' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'admins';
} elseif ( isset( $_REQUEST['authorarchive-tab'] ) && 'all' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'all';
}

The following line will get all users with write privileges and add many properties to the $authors object:

下面一行将获得所有具有写权限的用户,并向 $authors 对象添加许多属性:

$authors = get_users( array( 'orderby' => 'nicename', 'order' => 'ASC', 'who' => 'authors' ) );
$admins = array();
/* set values to required item properties */
foreach ( $authors as &$author ) {
$author->classes = array();
$author->type = 'custom';
$author->object_id = $author->nickname;
$author->title = $author->nickname . ' - ' . implode(', ', $author->roles);
$author->object = 'custom';
$author->url = get_author_posts_url( $author->ID ); 
$author->attr_title = $author->displayname;
if( $author->has_cap( 'edit_users' ) ){
$admins[] = $author;
}
}
$removed_args = array( 'action', 'customlink-tab', 'edit-menu-item', 'menu-item', 'page-tab', '_wpnonce' );
?>

这里,get_users 返回一个由指定参数选择的 $user 对象的数组。 who参数将强制数据库中具有写作权限的用户。

另外, $admins 数组将存储一个作者数组,而 $removed_args 将存储一个要删除的查询变量的列表。

现在你可以打印元框的标记了。要做到这一点,让我们建立标签和链接。


记住要给元框元素分配正确的类名、ID和数据属性;否则,菜单就不能按预期工作。

add_query_arg 和 remove_query_arg 函数都是为 authorarchive-tabs 变量设置特定的标签值,并删除不必要的变量。

在这一点上,我们有一个定义了标签的元组框:

创建和定制WordPress导航菜单的深入浅出教程

作者元框内未填入的标签

我们的下一步是建立标签的HTML内容。

为Meta Box标签建立HTML内容

您需要在 custom_menu_meta_box() 函数中遵循上一节中的代码。要构建内容,请在上一节中编写的  标记中使用以下内容:


简而言之,每个标签都包含一个复选框的列表。walk_nav_menu_tree()函数使用三个参数来打印这个列表。  $items$depth, 和 $r  – 都是必须的。

$items 数组存储了一个管理用户的数组。 array_map() 函数将wp_setup_nav_menu_item()函数应用于 $admins,并为数组元素添加菜单项属性。

创建和定制WordPress导航菜单的深入浅出教程

用户列表添加至作者meta框

到这里,我们可以完成最后的步骤。

添加一个提交按钮

自定义元框的大部分内容已经完成,尽管我们仍然需要添加一个提交按钮和一个处理 “旋转 “图标。

这里有一段简短的代码,你可以直接放在前面的区块之后:


创建和定制WordPress导航菜单的深入浅出教程

在WordPress内完成的作者元框

有了这些知识,你可以为你的菜单添加几乎所有的功能!请注意,GitHub上也有一个公开的插件Gist,可以免费下载。

小结

WordPress菜单是你网站的一个重要方面。正因为如此,该平台提供了一个原生的、强大的面板,可以让你定制你网站上的每个菜单。然而,它不会默认提供你所需要的一切。

几个屏幕选项可以帮助你添加CSS标签和更多。此外,安装一个插件将让你把你的本地菜单变成巨型菜单,并使用增强的功能,使你的菜单更具响应性(以及其他方面)。编码也是一种可能性,虽然这对一个编码新手来说是一项具有挑战性的任务,但你可以在一个下午的时间里把它放在一起。

你想定制你的WordPress菜单吗,如果是的话,你打算用什么方法?请在下面的评论区分享你的想法和意见。

原文地址:https://www.wbolt.com/wordpress-custom-menu.html

WordPress开发

网络开发中的Git:了解一个项目的典型工作流程

2024-1-22 0:27:19

WordPress开发

最常见的WordPress函数

2024-1-22 0:27:21

个人中心
今日签到
有新私信 私信列表
搜索