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

如何在WordPress顶部导航菜单添加按钮

立即购买

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

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

很多站长都会有这样的需求:在WordPress顶部菜单添加一个按钮,以吸引网站访客的注意和点击。在本教程中,我们详细介绍如何在WordPress站点顶部菜单添加一个可点击按钮。

为什么在WordPress顶部菜单中添加按钮?

WordPress导航菜单通常是纯文本链接,看起来都一样。在设计方面,所有链接都被赋予相同的重要性和权重。

如果您想添加指向在线订单的链接、登录或注册页面链接或立即购买链接,该怎么办?这些重要的号召性用语看起来就像标题菜单中的其余链接一样。

将WordPress导航菜单中的重要链接更改为按钮将使它们更加引人注目。这有助于用户轻松找到它们,从而提高他们在您网站上的参与度和体验。

默认情况下,WordPress可以选择使用按钮区块在WordPress文章和页面中添加按钮。但是,这没有用于在导航菜单中添加按钮的内置选项。

但有一个简单的技巧可以将WordPress导航菜单中的任何链接转换为按钮。

下面,让我们来看看如何在不安装插件的情况下在WordPress顶部菜单中添加按钮。

在WordPress导航菜单中添加一个按钮

首先,您需要将要转换为按钮的链接添加到WordPress导航菜单中。

只需转到WordPress 仪表板中的外观 » 菜单页面,然后将链接添加到导航菜单。

之后,您需要单击顶部的“显示选项”按钮。这将显示一个带有一堆选项的下拉菜单。您需要选中“CSS 类”选项旁边的框。

现在,向下滚动到您的菜单并单击以展开要转换为按钮的菜单项。

您会注意到菜单项设置中有一个新的CSS类选项。在这里,您需要输入一个类名。您可以将此CSS类命名为任何您想要的唯一名称,但在本教程中,我们将其命名为menu-button

输入名称后,单击“保存菜单”按钮以存储更改。

现在我们已经为菜单项添加了我们自己的自定义CSS类,我们可以通过添加我们自己的自定义CSS代码来设计它。

只需转到外观»自定义即可启动WordPress主题定制器。

您现在将在右侧看到您网站的实时预览,并在左侧栏中看到一系列主题设置。

现在您需要单击“额外 CSS”选项卡以展开它。这将显示一个框,您可以在其中添加自定义CSS代码。

在这里,您可以复制并粘贴以下CSS代码作为起点。

.menu-button { 
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a,  .menu-button a:hover, .menu-button a:active { 
color:#fff !important;
}

只要您添加CSS代码,主题编辑器就会自动将其应用于您的网站预览,您将能够看到更改生效。

别担心,在您单击“发布”按钮之前,这些更改不会在您的网站上生效。

随意使用CSS随心所欲,可以更改背景颜色、链接文本颜色、添加边框等。

不要忘记单击“发布”按钮以保存您的更改。

您不仅可以使用此技巧向导航菜单添加按钮,还可以使用它来突出显示WordPress导航菜单中的任何链接。

我们希望本文能帮助你学会如何在WordPress导航菜单中添加按钮。关于菜单方面的技巧,你可能对下面的文章感兴趣:

微海报分享

文章来源于互联网:如何在WordPress顶部导航菜单添加按钮

相关推荐: WordPress建站中FTP使用方法是什么?

吾上云WORDPRESS教程最新“WordPress建站中FTP使用方法是什么?”  要建立一个站点,必须将WordPress网站文件上传到Web服务器,因此站点必须使用FTP软件。WordPress建站中FTP使用方法是什么?   FTP软件是本地计算机和虚…

赞(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

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们