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

如何创建WordPress通知栏

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

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

创建 WordPress 通知栏

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

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

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

　　2、添加HTML通知栏代码

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

<div id="topbar" class="hide_on_mobile">Your website message.</div>

　　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通知栏示例

　　推荐：什么是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网站速度慢加载慢