WP：实现网站公告信息弹窗提示 / WordPress教程

站长帮 · *站长帮* 于 2022-2-21 18:37 发表在 WordPress教程

网站公告信息弹窗提示代码简单好看到爆炸，一天只弹一次，使用cookie记录；可以插入到自己网站，做一个弹窗广告或者说弹窗公告把网页的css资源引入到站点，再把BODY里面的内容粘贴到网站就做成了；效果源码是在网站扒的，做了一个简单的HTML文件，不想做个多修改的可以直接引用文件，只要简单修改一下文字内容即可。

演示截图：
懒人资源.jpg

下面内容是适配了begin主题的文件，并修改了后台框架添加了几项设置项.

/*弹窗广告样式 By：cityed.cn*/* x! _5 S; @. F5 g t% } © 懒人资源 | cityed.cn
#globalAd {5 _" b; j0 G7 K0 e2 e0 o © 懒人资源 | cityed.cn
max-width: 600px;* s2 C% R/ }; K5 O) k' {7 {! d) D © 整站源码 cityed.cn
width: 100%;
flex-basis: 100%;7 K2 j, \ j" G) y- j © 懒人资源 | CITYED.CN
margin: 0 auto;
background: #fff;" E5 ~( w& P& O3 w8 U7 B) w
border-radius: 10px;
box-shadow: 0 0 30px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, .4);
overflow: hidden;2 B, y# |# e4 g6 v$ d
position: fixed;
display: none;& O) l5 Q* n3 K1 s5 t$ z © 懒人资源 | CITYED.CN
z-index: 9999999999;/ ?1 W9 ~( F: a+ N © www.cityed.cn
}
5 W* V0 X T6 b# ]: N8 ` © 懒人资源 | CITYED.CN
.layer {
width: 100%;) d# Q5 l4 ~0 q6 z% t* ^" r: V; d
height: 100%;
& O1 e; ~$ c1 M8 F8 d
position: fixed;
top: 0;
left: 0;9 Q6 c* J# P8 y- Z1 m. V' d+ H! N
filter: alpha(opacity=50);4 }) n, q9 _9 s+ ], D! ]9 o+ V3 x © CITYED.CN 版权所有
opacity: .6;
background: #000;
z-index: 9999999998;
© cityed.cn 1 `) c/ t1 i7 B7 |$ I
display: none;
}0 m( b# _% l+ ~% ^% B" L( Q
#globalAd #hero-img {+ u k; c7 `5 y$ Q& v( U
width: 100%;
height: 100px;
background: #007bff;
}9 M0 k! M* t5 W' h6 I. G2 E © 懒人资源 | CITYED.CN
9 R; v4 ^) }9 {' Q/ n2 g © https://www.cityed.cn
#globalAd #profile-img {( l2 u6 Y2 K. _& |0 v
width: 80px;
height: 80px;" A u# I1 t9 X+ [ © 懒人资源 | CITYED.CN
margin: -60px 0 0 40px;
border: 3px solid #fff;
border-radius: 50%;( H7 g9 a* l7 C: ?. a
box-shadow: 1px 1px 10px 0 rgba(0,90,90,.3);3 P! t( \& j4 ^9 _" h © CITYED.CN 版权所有
}
+ K" B! `- x, R" k+ n, \* X9 n& N* c © 懒人资源
#globalAd #profile-img img {2 X& r- F9 K- N © www.cityed.cn
width: 100%;
, K5 }4 h8 Y/ L0 G/ w* O2 x
height: 100%;. k) ^- g* e8 T, v1 J* ^. h% Y © CITYED.CN 版权所有
background: #fff;" C6 ]- Y! ^1 O* z2 w6 } © 懒人资源
border-radius: 50%;
}
© https://cityed.cn / m5 Z+ f$ B# _) h
' s% m4 p6 l$ S. @ © cityed.cn
#globalAd #pttcontent {3 J1 E" A1 i* m. }3 d" e © www.cityed.cn
width: 80%;
© https://cityed.cn ' e/ q) d+ Q- ^( M
margin: 0 auto;
padding: 0 0 20px;
text-align: center;
}
) M0 l' G/ C6 r2 A, T. {! J © CITYED.CN 版权所有
#globalAd #pttcontent h1 {
font-size: 18px;
line-height: 30px;8 N( d- w; w5 k © 懒人资源
font-weight: 500;3 W2 O* H3 E# j6 P2 o © 懒人资源 | cityed.cn
text-transform: uppercase;
© www.cityed.cn . o5 T: U5 L2 \/ |
position: absolute;/ d! I3 c1 }3 ~ © cityed.cn
top: 60px;
margin-left: 4em;
© cityed.cn 4 C" c8 f. ^# p. ^
color: #fff;
}! b. Z( h i2 @9 M' A © https://cityed.cn
1 e) y4 B( B2 v5 n+ x8 H
#globalAd #pttcontent .title {( Q. c4 p4 U) K# Y © https://cityed.cn
padding: 10px;0 K2 h: u7 h9 \3 J © cityed.cn
font-weight: 400;) }) z; d$ ?2 ] © 懒人资源 | CITYED.CN
text-align: left;5 I2 y& |( O1 ]4 }4 C3 q © www.cityed.cn
}
4 V# ?- t* |8 f+ s) C © cityed.cn
#globalAd #pttcontent .pttcontent {
padding: 10px 10px 20px 40px;
© cityed.cn , m' x% {2 b/ F- {
line-height: 22px;% i* |3 ~8 ^' O+ \0 v! C © cityed.cn
font-weight: 300;
text-align: left; s$ C( | F% [6 i © CITYED.CN 版权所有
}
#globalAd #pttcontent a {
color: #ccc;
font-size: 14px;0 S; _& k, b$ B © www.cityed.cn
margin: 0 10px;
transition: color .3s ease-in-out;6 @# j' p b8 O, y © 懒人资源
-webkit-transition: color .3s ease-in-out;
}- j6 ?7 a! {0 \7 d M/ i$ j © 懒人资源 | CITYED.CN
#globalAd #pttcontent a:hover {7 _( g& |# [. f © 懒人资源
color: #007bff( Y( f9 A4 n2 N © https://www.cityed.cn
}- T/ u4 s+ W' \ © CITYED.CN 版权所有
9 V- H3 P1 s3 Y N © cityed.cn
#globalAd #pttcontent .btn {! c5 ?, f3 w7 E0 T © 懒人资源
background: none repeat scroll 0 0 #1ba1e2;7 f4 x* A* G8 z6 o © CITYED.CN 版权所有
border: 0;; V" n; N% t, w, ~ N. y/ B- Y © www.cityed.cn
border-radius: 10px;6 _' A" E0 x2 N2 n4 J2 B. [& q © 懒人资源 | CITYED.CN
color: #fff!important;/ o/ J8 y5 p7 {* Q$ _! {2 k" U © https://www.cityed.cn
cursor: pointer;0 Q: Z8 ~& ~$ j, F% b2 b © 懒人资源 | CITYED.CN
font-family: open sans, hiragino sans gb, microsoft yahei, wenquanyi micro hei, Arial, Verdana, Tahoma, sans-serif;
© 懒人资源 * G# Q3 E9 f8 A$ |; a
font-size: 14px;9 D: K7 p7 Q/ @3 h5 _0 X2 f9 S- \- h$ v © https://cityed.cn
padding: 6px 10%;
4 ?' P$ C! ? i/ T$ f4 U9 a
}
#globalAd #pttcontent .btn:hover,
© www.cityed.cn & Y: l- \0 m! j9 H
.yanshibtn:hover {
1 {4 j$ e( C; `2 w5 ]
background: none repeat scroll 0 0 #59b68b;% z2 B# m4 _: R3 X6 I6 C © https://cityed.cn
border: 0;, M/ l: ]. l' Q! L% v3 O$ }% C © 懒人资源 | cityed.cn
border-radius: 10px;
color: #fff!important;
cursor: pointer;5 ~/ i) w' k. }& s7 j0 O( p © https://cityed.cn
font-family: open sans, hiragino sans gb, microsoft yahei, wenquanyi micro hei, Arial, Verdana, Tahoma, sans-serif;5 Y) M( R) N- h. i( N% U © https://www.cityed.cn
font-size: 14px;( N0 B" C5 U! { © www.cityed.cn
padding: 8px 10%;; X( @: U3 m5 v8 N8 m; m4 Q
}

复制代码

上面样式添加到主题的style.css文件最后；接下来打开footer.php文件添加下面代码：

<div class="layer"></div>
<div id="hero-img" style="background-color: #1a95ff;background: linear-gradient(to left, #5dadf3 0, #4583ca 100%);"></div>
<?php global $user_identity,$user_level; wp_get_current_user(); if ($user_identity) { ?>; l C- j( K6 \ z0 y © 整站源码 cityed.cn
<?php if (zm_get_option('cache_avatar')) { ?>
<?php global $userdata; wp_get_current_user(); echo begin_avatar($userdata->user_email, 64); ?>
© www.cityed.cn 2 w6 f2 X/ L0 M
<?php } else { ?>
<?php global $userdata; wp_get_current_user(); echo get_avatar($userdata->ID, 64); ?>
<h1><?php echo $user_identity; ?></h1>
<img src="<?php echo zm_get_option('logo_small_b'); ?>" alt="logo">3 y, k3 ?# H# T1 \2 y- @8 x4 a © https://cityed.cn
</div>
<div id="pttcontent">/ Z6 B1 J; S5 J$ J
<?php } ?> V1 [# i# @' u. Y4 X
<div class="title"><?php echo zm_get_option('layer_title'); ?></div>; V2 {% M- R2 u Z* Q
<div class="pttcontent"><?php echo zm_get_option('layer_content'); ?></div>8 V& n/ E3 f% }& P © https://www.cityed.cn
<?php if (zm_get_option('layer_contentlink')) { ?>
<a href="<?php echo zm_get_option('layer_contentlink'); ?>" onclick="redirectUrlToActive();" class="btn btn-default" rel="nofollow">点击访问</a> _" _$ T& g9 x' g! K © 懒人资源 | CITYED.CN
<a href="<?php echo home_url(); ?>" onclick="redirectUrlToActive();" class="btn btn-default" rel="nofollow">点击访问</a>6 c `6 _& @, o4 V+ I" N- t © 懒人资源 | CITYED.CN
jQuery.cookie = function(name, value, options) {
if(typeof value != "undefined") {
value = '';
var expires = '';
if(options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {% y3 \! l, H" ~4 ]$ i © 懒人资源 | CITYED.CN
var totalTime = 24 * 3600;
var hour = date.getHours();
0 K8 C, k5 X) i
var pastTime = 3600 * hour + 60 * minutes + seconds;
var leftTime = totalTime - pastTime;
} else {
date = options.expires;
}
var domain = options.domain ? '; domain=' + (options.domain) : '';8 g7 r& p6 U: t# D1 l8 k4 Y
var secure = options.secure ? '; secure' : '';
! S2 `9 W/ C/ g
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else {$ O: t! h Y& l1 @ E
var cookieValue = null;
if(document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
var cookie = jQuery.trim(cookies[i]);
if(cookie.substring(0, name.length + 1) == (name + '=')) {
break;
}
5 |" _, _! H/ p; ? r& P
};
" o0 U+ V8 E* v$ j; x
$("#globalAd").hide();
} else {
var pttH = $(window).height();
. b8 h) ~. W& o8 _6 V6 y# a. R
var pttW = $(window).width();
$(".layer").show();
'left': pttW / 2 - $("#globalAd").width() / 2
$("#globalAd").slideDown(300, function() {
setTimeout("closeGloableAd()", '300000');
expires: 1 //cookie保存时间
});
}4 O9 o! V2 M% P ~
});
function closeGlobalAd() {
$('.layer').hide();
}
}
<?php } ?>