WordPress知识分享

WordPress浮动通知栏 粘性标题菜单插件 myStickymenu

myStickymenu是一款 WordPress浮动通知栏、粘性标题菜单插件。为网站创建一个通知栏、粘性标题菜单、公告、促销等置顶信息栏。这个轻量级插件还可以按需更改 CSS 样式。

1、myStickymenu插件安装启用

在 WordPress后台 > 插件 > 安装插件,搜索 myStickymenu,安装并启用。

myStickymenu插件安装启用

国内服务器如果下载不顺利,可以去 WordPress 官网下载,手动ftp上传到网站的插件目录。

2、myStickymenu插件设置

安装后会提示你注册他们的账号,用来接收最新功能通知、优惠等信息,可以选择跳过,不注册账号也能用。

插件有两种使用方法,一是置顶浮动通知栏,二是粘性标题菜单。

3、myStickymenu浮动通知栏

进入插件设置后,启用 welcome bar,然后浮动通知栏就能生效了。

下面开始设置一些相关参数。

  • Position:只能选择 top,bottom是付费插件用。
  • Height:付费插件可以修改。
  • Background Color和 text颜色:可以自定义修改,老魏建议改成比较抢眼的背景色。
  • Font:提供很多种字体可选。
  • Font Size:自定义字体大小。
  • Bar Text:浮动通知栏内容。
  • Show X:默认在桌面和移动端都显示。
  • Button:桶上面类似可选显示位置、按钮颜色、文字颜色、文字内容、动画特效。
  • Button Submission:按钮提交后可选重定向到URL、关闭通知栏、弹窗等。一般可以选择重定向到活动页面url。
  • After Submission:提交后可选不显示通知栏、下次访问再显示、在每个页面显示。
  • Entry effect:显示进入页面效果。
  • 最后 reset是恢复默认,save保存。

让我们看看显示效果,如下图所示:

老魏设置了点击按钮就跳转到某个活动页面的url,非常好用。

myStickymenu插件浮动通知栏效果

4、myStickymenu粘性标题菜单

实现这个功能需要借助一个 Chrome浏览器插件 CSS Peeper,在 myStickymenu粘性标题菜单的页面中有提供直接安装方法。

如果你对 WordPress主题源代码比较熟悉也可以手动从源代码中查找。

老魏更推荐用 CSS Peeper,点击一下就可以迅速提供 CSS名,如下图所示是整个 header页眉的样式表名。

如何制作粘性菜单?

把粘性菜单标题添加插件的粘性类当中,也可以使用 div id名。

经过老魏实测如果使用菜单名,会出现自定义的粘性背景色和粘性文本颜色设置无效的情况,所以还是推荐选择其他类或ID,再输入上面 CSS Peeper 获取到的样式表名。

如果你愿意,也可以用 CSS Peeper 获取菜单的 div名,这样混动时就不显示网站logo和网站名,只显示菜单了,显示效果会更专一。

把粘性菜单标题添加插件的粘性类当中,也可以使用 div id名。

可选粘性z-index,淡入淡出或滑动效果,是否在小屏幕尺寸下禁用,是否在滚动时可见,在主页滚动可见,粘性背景色,粘性文本颜色,粘性过渡时间,粘性不透明度等。

老魏更换了粘性背景色和粘性文本颜色后,未滚动和滚动后的对比效果如下图所示:

老魏更换了粘性背景色和粘性文本颜色后,未滚动和滚动后的展示效果如下图所示:
赞(1)
文章名称:《WordPress浮动通知栏 粘性标题菜单插件 myStickymenu》
文章链接:https://www.vpsss.net/27512.html
版权声明:本站资源仅供个人学习交流,禁止转载,不允许用于商业用途,否则法律问题自行承担。
图片版权归属各自创作者所有,图片水印出于防止被无耻之徒盗取劳动成果的目的。