深圳网站优化推广公司 版权所有

粤ICP备15021922号 XML地图

深圳网站推广公司

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

编辑:深圳网站优化公司 | 日期:2021-06-12 21:28 | 人气:

深圳网站建设公司圣玺网络:在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; ?>

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

深圳市圣玺网络技术有限公司提供营销网站建设、网页设计制作、网站优化外包、网络营销推广、SEO按天按效果付费、百度霸屏包年推广、抖音获客霸屏等关键词SEO排名广告服务!
本文由网上采集发布,不代表本站立场,转载联系作者并注明出处:http://www.amerbiz.com/wzjs/8549.html
X

截屏,微信识别二维码

微信号:15019448256

(点击微信号复制,添加好友)

  打开微信