wordpress主题右下角jquery弹出公告

2019-03-25 08:22:31来源： icdiary.com 阅读 ()

在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; ?>