如何让wordpress主题右下角弹出jquery公告

北京网站建设公司尚品中国：在HotStyle主题在集成了右下角弹出最新公告的功能，此功能可以通过后台主题选项轻松开启关闭，现在就其实现方法做以下描述。

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

1，加载jquery.js.

<script src="https://ajax.googleapis.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 class="focus" id="sitefocus">   
    <div class="bm">   
        <div class="bm_h cl">   
            <a href="#" class="y" title="关闭">关闭</a>   
            <h2>临时公告</h2>   
        </div>   
        <div class="bm_c">   
            <dl class="xld cl bbda">   
                <dt>   
                    <a href="<?php the_permalink(); ?>" class="xi2" 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 class="ptn hm">   
                <a href="<?php the_permalink(); ?>" class="xi2" target="_blank">查看 »</a>   
            </p>   
        </div>   
    </div>   
</div>   
<?php endwhile; ?> 

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