怎么给网站添加顶部通知栏? - wordpress开发

一款贴心的wordpress主题如果准备有通知栏,那就会让用户感到更加的舒适,来看看这个wordpress卡覅方法,给网站添加顶部通知栏

一款贴心的wordpress主题如果准备有通知栏,那就会让用户感到更加的舒适,来看看这个wordpress开发方法,给网站添加顶部通知栏。

方法:

制作了一段函数,放在functions.php的<?php下面:

//顶部通知栏
if ( ! function_exists( 'lifet_function_notice' ) ) :
	/**
	 * 简单的通知栏
	 */
	function lifet_function_notice() {
		 if (!isset($_COOKIE['close_top_notice'])){ ?>
			<div id="top_notice" class="black">
				<div class="top_notice_close" onclick="pushdownclose();"></div>
				<div class="top_notice_text_box">
					<span class="top_notice_txt" onclick="pushdownyes();">
						简单的通知
					</span>
				<div class="header_button">
					<!--关闭按钮-->
					<button class="top_notice_button" onclick="pushdownclose();"> X </button>
				   <!--了解按钮-->	
					<button class="top_notice_button">
						<a href="#">
						关闭
						</a>
					</button>
					</div><!--.header_button-->
				</div>
			</div>
				
			<script>
			//Set Cookies
			function setCookie(c_name,value,expiredays){
				var exdate=new Date()
				exdate.setDate(exdate.getDate()+expiredays)
				document.cookie=c_name+ "=" +escape(value)+
				((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
			}
			 
			function pushdownyes(){
				setCookie("close_top_notice", true, 30);
				window.location = "#";
			}
			function pushdownclose(){
				setCookie("close_top_notice", true, 5);
				document.getElementById('top_notice').style.display="none"; 
			}
			</script>
			
			<?php } 

			echo "
			<style type='text/css'>
			/** 顶部通知栏 **/
            #top_notice{
            	font-weight: bold;
            	font-size: 12px;
            	padding: 16px;
            	color: #fff;
            	background-color: #444
            }
            .top_notice_text_box{
                max-width: 980px;
                margin: 0 auto;
            	padding: 0 6px;
            }
            
            .top_notice_close{
            	cursor: pointer;
            	float: right;
            	font-size: 18px;
            	margin-right: 13px;
            	padding: 5px 0 3px;
            }
            
            .header_button{
            	float:right;
            }
            .top_notice_button{/*通告栏按钮样式*/
            	margin-left: 10px;
            	padding: 4px 16px;;
            	float: right;
            	background-color: #f5f5f5;
            	cursor:pointer
            }
            .top_notice_button a{
            	text-decoration:none;
            }
            
            .top_notice_txt a{
            	color:#fff;
            }
            			
            </style>";
            	}endif;

如何使用?

在你需要的地方,例如在主题根目录下header.php</body>下面添加以下代码即可调用。

<?php lifet_function_notice();//通知?>
怎么给网站添加顶部通知栏? - wordpress开发-Npcink

开始介绍:

网站有时需要一些通知来给所有访客,所以我就参考了Google的“隐私条款变更通知”来制作了一个适用于任何网页(包括 WordPress )的“ 通知栏 ”

1、首先当然先添加一下外观样式,将下列代码添加至网页的  <style>  或CSS文件内(也就是Wordpress主题目录下的“样式表 (style.css)”)(所有样式均提取于Google)

/** 顶部通知栏 **/
#top_notice{
	font-weight: bold;
	font-size: 13px;
	zoom: 1;
	background-color: rgb(66, 114, 219);
}
 
.top_notice_text_box{
	margin-left: 12px;
}
 
.top_notice_text{
	padding: 8px 12px 6px 0;
	zoom: 1;
	color: #fff;
}
 
.top_notice_close{
	cursor: pointer;
	float: right;
	font-size: 18px;
	margin-right: 13px;
	padding: 5px 0 3px;
	float: right;
	color: #bcc9e8;
}
.top_notice_button{
	cursor: pointer;
	display: inline-block;
	margin-left: 10px;
	padding: 8px 12px 6px;
	zoom: 1;
	color: rgb(188, 201, 232);
	background-color: rgb(34, 85, 203);
}
 
.top_notice_button:hover{
	color: #fff;
}


2、现在就需要添加HTML代码了,我制作的代码是先使用 PHP 判断用户是否存在已阅读的Cookie,如果没有就显示通告,只需要把如下代码加入网页(也就是“header.php”文件)的  <body>  后方就行啦!(注意把内容修改为你自己需要通知的内容)

<?php if (!isset($_COOKIE['close_top_notice'])){ ?>
<div id="top_notice">
	<div class="top_notice_close" onclick="pushdownclose();"> × </div>
	<div class="top_notice_text_box">
		<span class="top_notice_text">通知内容</span>
		<div class="top_notice_button" onclick="pushdownyes();">“立刻阅读”按钮Value</div>
		<div class="top_notice_button" onclick="pushdownclose();">关闭</div>
	</div>
</div>
 
<script>
//Set Cookies
function setCookie(c_name,value,expiredays){
	var exdate=new Date()
	exdate.setDate(exdate.getDate()+expiredays)
	document.cookie=c_name+ "=" +escape(value)+
	((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
 
function pushdownyes(){
	setCookie("close_top_notice", true, 30);
	window.location = "“立即阅读”跳转的链接";
}
function pushdownclose(){
	setCookie("close_top_notice", true, 5);
	document.getElementById('top_notice').style.display="none"; 
}
</script>
<?php } ?>

总结

1、其实这个通知栏发挥空间可以很大,例如做成“最新文章”或“警告栏”等 :idea:

2、有问题可以回复哦 :razz:

在CSS #top_notice{ 加入 position: fixed; 应该就可以固定在顶部啦~

© 版权声明:本文章采用“姓名标示-非商业性-相同方式分享 4.0 国际(CC BY-NC-SA 4.0)”于“畅想资源”发布,转载时须以相同方式发布并注明“原文链接”!

本文固定链接:https://www.arefly.com/zh-cn/wordpress-top-notice/

题外:

将部分代码改成下方形式,可实现:

关闭浏览器后打开显示

function pushdownyes(){
	setCookie("close_top_notice", true);
	window.location = "“立即阅读”跳转的链接";
}
function pushdownclose(){
	setCookie("close_top_notice", true);
	document.getElementById('top_notice').style.display="none"; 
}


参考链接:

PHP setcookie() 函数

怎么给网站添加顶部通知栏? - wordpress开发-Npcink
怎么给网站添加顶部通知栏? - wordpress开发-Npcink

setcookie()函数

PHP PDO使用fetchAll()方法获取结果集 fetchAll()方法获取结果集中的所有行数据记录。

别怕,有我,获取免费且迅速的帮助

QQ
19:00至24:00


24小时
提问
WP开发

怎么添加文章形式? - WordPress开发

2019-5-28 19:49:37

WP开发

怎么解决主题中路径的问题(图片,css) - wordpress开发

2019-5-30 11:26:31

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索