WordPress 主題右下角 jquery 彈出公告

在 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