如何在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 代码,主题定制器就会自动将其应用于您的网站预览,您将能够看到更改生效。

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

注:具体效果设定之后查看

©️李联华的博客网 当前IP地址:44.201.97.224,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/how-to-add-a-button-to-the-wordpress-navigation-menu.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

订阅
提醒
guest

0 评论
内联反馈
查看所有评论
Loading...