wordpress程序begin主题显示导航栏增加角标美化教程

标签:

  • 2
  • 125 views
  • A+
所属分类:网站建设

WordPress程序想要在导航上显示一个个性的角标,用户直接在看到导航栏上的特殊颜色或者文字提示的时候,显示优惠提示信息,二是导航栏美观,worpress有些主题需要手动的更改,以下以知更鸟Begin主题导航栏增加角标的操作记录。

begin主题显示导航栏增加角标前端显示样式

展现样式

知更鸟begin主题显示导航栏增加角标后操作设置

后太打开外观→菜单→菜单结构(可选),找到需修改的菜单栏下方的选项卡,如发现主题没显示下方的菜单栏,需知道后台顶部有右上角的【显示选项】勾选上即可显示,后台修改操作

后台菜单

以上效果的加入这样的字样:在导航标签后面 加上 <span class="mytips">VIP</span> 标签字体可自定义更改,以上完成前端显示字样。

知更鸟begin主题导航栏增加角标后前端样式css代码增加

完成后台添加后需要为他们添加css控制他们的样式,此时的css样式带啊吗才是我们可以需要根据需求操作的主要地方,颜色更改 ,样式更改 均在该css文件完成。

打开主题文件,找到主题header.php头部模板文件(修改前建议备份文件),为啥不是css样式表?考虑到这一块并不是一个长期的需求存在,二者是css样式加载的优先级,我们可以选择直接在header.php文件的<head>……</head>间增加如下代码:

  1. <style>
  2. @media screen and (min-width1025px) {
  3.     .mytips {
  4.         floatrightright;
  5.         font-size12px;
  6.         color#fff !important;
  7.         line-height14px !important;
  8.         margin21px 0 0 0;
  9.         padding3px;
  10.         border-radius: 50%;
  11.         background#c40000;
  12.     }
  13. }
  14. </style>

以上代码可以直接复制使用,需注意上style中Class类名的须和以上后台中添加 <span class="mytips">VIP</span>标签内容保持一致里面color background 等颜色 以及border-radius 均可以根据需求进行调整。

以上是对于知更鸟begin主题导航栏增加角标的修改步骤,当然对于不是该主题的wordpress程序主题来说一样是可以使用该方式的,不同的是需要我们定于导航中 想要展现的角标进行一个开发者工具定位,然后追加该添加内容的css样式加入控制即可完成需求效果!

weinxin
◀◁◀关注公众号
专业免费的SEO、SEM教程,分享实用的建站工具。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  1   博主  1

    • avatar 医疗器械注册

      自从搞公司网站,博客都不更新了,现在都成菠菜网站了。。。。

        • avatar 郑州seo阿伟 Admin

          @医疗器械注册 菠菜站不可怕,重新 拾到一下就好