专注国内外云服务器
分享建站技术教程

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

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

%title插图%num

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

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

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

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

剖析WordPress的菜单

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

%title插图%num

WordPress网站菜单示例

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

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

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

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

WordPress菜单结构的不同类型

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

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

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

%title插图%num

SAU/CAL网站飞入式菜单

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

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

%title插图%num

吾上云底部菜单

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

%title插图%num

一个侧边栏导航的例子

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

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

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

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

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

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

%title插图%num

WordPress的菜单界面

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

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

%title插图%num

WordPress的菜单链接

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

%title插图%num

菜单选择下拉

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

%title插图%num

菜单设置选项

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

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

%title插图%num

菜单项的手风琴式菜单

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

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

%title插图%num

在菜单结构部分拖放项目

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

%title插图%num

展开一个菜单项

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

%title插图%num

显示选项面板

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

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

%title插图%num

自定义链接框

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

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

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

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

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

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

%title插图%num

Max Mega Menu插件

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

%title插图%num

WordPress内的Menu Locations链接

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

%title插图%num

Max Mega Menu的菜单位置屏幕

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

%title插图%num

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

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

3. 编写代码来创建你的自定义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

%title插图%num

在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菜单

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

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

%title插图%num

WordPress插件模板生成器

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

%title插图%num

在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 slug) 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参数将强制WordPress查询数据库中具有写作权限的用户。

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

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

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

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

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

%title插图%num

作者元框内未填入的标签

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

为Meta Box标签建立HTML内容

您需要在 custom_menu_meta_box() 函数中遵循上一节中的代码。要构建内容,请在上一节中编写的 

 标记中使用以下内容:

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

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

%title插图%num

用户列表添加至作者meta框

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

添加一个提交按钮

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

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

class="button-secondary submit-add-to-menu right" value="" name="add-authorarchive-menu-item" id="submit-authorarchive" />

<?php }

%title插图%num

在WordPress内完成的作者元框

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

小结

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

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

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

评论收藏微海报

分享

分享到
WordPress菜单导航菜单自定义菜单

评论交流

取消回复



document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );

文章来源于互联网:创建和定制WordPress导航菜单的深入浅出教程

相关推荐: 如何使用myCred为WordPress中添加奖励系统

积分系统可以奖励那些经常与你的内容互动或从你的网上商店购买物品的忠诚客户。它们是游戏化和忠诚度计划的最佳选择。然而,WordPress并不支持这一功能。因此,你可能想知道myCred WordPress插件是否是实施奖励计划的一个可行的解决方案。 在今天的文章…

赞(0)
未经允许不得转载:吾上云 » 创建和定制WordPress导航菜单的深入浅出教程
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们