如何创建WordPress通知栏

如何创建WordPress通知栏(无插件)

如何创建WordPress通知栏

  在 WordPress CMS中使用通知栏是发布消息、提高点击率和参与度的好方法,对于联盟营销来说非常棒。许多第 3 方通知栏插件和服务的一个大问题是它们在 Web 性能方面很糟糕。因此,请按照下面的教程了解如何在不使用插件的情况下创建 WordPress 通知栏,从而不会影响您的性能!本文晓得博客为你介绍如何创建WordPress通知栏。

  推荐:10个好用的WordPress网站推送通知插件

创建 WordPress 通知栏

  以下是在没有插件的情况下创建 WordPress 通知栏的简单步骤。这只是简单的 HTML,但效果很好,因为没有关闭按钮,所以没有放置 cookie。这是它更快的原因之一。

  1、编辑子主题header.php文件

  强烈建议使用子主题来添加代码,防止主题更新后编辑的内容被覆盖,根据 WordPress 主题而有所不同,但对于大多数人来说,可以简单地编辑的header.php文件。

编辑子主题header.php文件

  2、添加HTML通知栏代码

  这是用于通知栏的 HTML,需要将其放在</head>后面,可以更改内容以展示出您想要的任何内容。

<div id="topbar" class="hide_on_mobile">Your website message.</div>
添加HTML通知栏代码

  3、使用CSS美化HTML通知栏

  接下来,就需要添加自定义 CSS 以使其看起来不错,可以根据自己的喜好调整颜色和字体颜色,只需将其添加到自定义中的“额外CSS”中。

#topbar{
background: #2c3644;
color: #fff;
font-size:16px;
top: 0px;
left: 0px;
width: 100% !important;
padding: 10px 0px;
text-align: center;}
#topbar a {color: #ffffff; border-bottom: 1px dotted;}

  默认情况下,该WordPress通知栏是静态的,并在您向下滚动时消失。但是也可以将通知栏固定并在访问者向下滚动时停留在那里,只需使用下面修改后的 CSS 以即可。

#topbar{
background: #2c3644;
color: #fff;
font-size:16px;
position: fixed;
z-index:1;
top: 0px;
left: 0px;
width: 100% !important;
padding: 10px 0px;
text-align: center;}
#topbar a {color: #ffffff; border-bottom: 1px dotted;}

  推荐:WordPress性能优化wp_head.php中删除不必要的代码

WordPress通知栏示例

WordPress通知栏示例

  推荐:什么是Web浏览器推送通知

在手机上隐藏WordPress通知栏

  可能已经注意到,在 HTML 中我有一个名为 hide_on_mobile的tag, 这允许我隐藏它的移动设备,只需添加以下的CSS。

@media only screen and (max-width:480px) {
.hide_on_mobile {
display: none !important;}
}

  推荐:WordPress网站如何在移动设备隐藏小部件

总结

  以上是晓得博客为你介绍的怎么创建WordPress通知栏的全部内容,现在可以享受超快的通知栏,而无需第三方的脚本或动画,希望本文对你的WordPress建站有所帮助,如果有问题请联系我们。

  推荐:如何手动清理WordPress数据库

  推荐:WordPress优化修复WordPress网站速度慢加载慢

滚动至顶部