在 HotStyle 主题在集成了右下角弹出最新公告的功能,此功能可以通过后台主题选项轻松开启关闭,现在就其实现方法做以下描述。

这一功能的实现非常简单,其利用 jquery 的 fadeTo 或者 Hide 的功能。

1,加载 jquery.js.

<script src="https://googleajax.admincdn.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

2,加载以下 js 代码:

<script type="text/javascript">  
$(document).ready(function() {  
//$('#sitefocus').hide(0, 0);  
//$('#sitefocus').fadeIn(1800, 0);  
$('.bm_h a').click(function() {  
//$('#sitefocus').hide();  
//$('#sitefocus').fadeTo(500, 0);  
$('#sitefocus').hide(600, 0);  
return false;  
});  
});  
</script> 

3,css 格式。

<style type="text/css">  
.focus {  
position:fixed;  
rightright:5px;  
bottombottom:5px;  
z-index:300;  
overflow:hidden;  
width:250px;  
border:1px solid #AAA;  
padding:0 10px;  
background:white;  
}  
.bm,.bn {  
margin-bottom:10px;  
}  
.bm_h {  
padding:0 10px;  
height:40px;  
border-bottom:4px solid #009AD9;  
line-height:40px;  
whitewhite-space:nowrap;  
overflow:hidden;  
}  
.cl {  
zoom:1;  
}  
.y {  
float:rightright;  
}  
a {  
color:#333;  
text-decoration:none;  
}  
h1,h2,h3,h4,h5,h6 {  
font-size:1em;  
}  
body,ul,ol,li,dl,dd,p,h1,h2,h3,h4,h5,h6,form,fieldset,.pr,.pc {  
margin:0;  
padding:0;  
}  
.bm_c {  
background:white;  
}  
.bbda {  
border-bottom:1px dashed #CDCDCD;  
}  
.cl {  
zoom:1;  
}  
.xld dt {  
padding:8px 0 5px;  
font-weight:700;  
}  
.bm_c h2 a,.bm_c dt a {  
padding-right:10px;  
color:#4A4E52;  
}  
.focus dt a {  
color:#0060A6;  
font-size:12px;  
}  
.xi2,.xi2 a,.xi3 a {  
color:#266CB5;  
}  
.xld dd {  
margin-bottom:8px;  
}  
.hm {  
text-align:center;  
}  
.ptn {  
padding-top:5px!important;  
}  
a:hover,* a:hover {  
color:#F60 !important;  
}  
</style>

4,php 和 html 代码调用最新公告。

<?php   
$loop = new WP_Query( array( 'post_type' => 'bulletin', 'posts_per_page' => 1 ) );while ( $loop->have_posts() ) : $loop->the_post();  
?>  
<div id="sitefocus">  
<div >  
<div >  
<a href="#" title="关闭"> 关闭</a>  
<h2> 临时公告</h2>  
</div>  
<div >  
<dl >  
<dt>  
<a href="<?php%20the_permalink();%20?>" target="_blank">  
<?php the_title(); ?>  
</a>  
</dt>  
<dd>  
<?php echo mb_strimwidth(strip_tags(apply_filters( 'the_content', $post->  
post_content)), 0, 68,"..."); ?>  
</dd>  
</dl>  
<p >  
<a href="<?php%20the_permalink();%20?>" target="_blank"> 查看 »</a>  
</p>  
</div>  
</div>  
</div>  
<?php endwhile; ?> 

这里循环调用最新公告,由于此公告由主题集成,所以不具有统一性,请根据个人实际需要做修改。

原文地址:http://www.icdiary.com/html/2227.html