给WordPress默认编辑器增强添加h1h2h3等常用标签
摘要:如果你需要长时间运营一个wp网站,那你真的很需要一款主题带有公告功能,你需要把一些最新的消息传达给你的访…
摘要:如果你需要长时间运营一个wp网站,那你真的很需要一款主题带有公告功能,你需要把一些最新的消息传达给你的访客,这个时候我能…
如果你需要长时间运营一个wp网站,那你真的很需要一款主题带有公告功能,你需要把一些最新的消息传达给你的访客,这个时候我能解决公告栏功能的最简单最有效的方式就是使用wp插件,来实现我们的需求,但是插件有太多的操作局限,比如不能调整展示的位置,只能放在小工具里,或是某个角落位置上,而且设置起来成本高,自定义属性太弱,往往达不成我们想要的效果,我们只是是想要一个简单的滚动公告功能,为什么让我承受这么多???那这个时候我们就要尝试自己来写一个插件,但是对于小白来讲,公告功能很难实现,下面大挖就给大家分享出了一组简单实现wordpress主题公告功能的代码,而且操作起来也很十分容易,只需要有简单的html基础就可以上手操作,可以说是wordpress站长的福利之选。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<style>
#announcement_box {background-color: rgba(240, 239, 215, 0.5);background-color: #E3DEC0 9;padding-left: 15px;width: 100%;height: 30px;border: 1px dashed #C1C0AB;border-radius: 2px;}
/*图片地址需要替换*/
#announcement {background:url(/*图片地址*/) left center no-repeat scroll; height:25px; line-height:25px; overflow: hidden;float:left;}
#announcement a {color:#000;}
#announcement a:hover {color:#94382B;}
.announcement_remove {padding:1px 10px; float:right; font-size:14px;}
.announcement_remove a {height:18px; width:18px; display:block; line-height:16px; margin:4px 0 3px 0; margin:10px 0 3px 0 9; text-align:center;}
.announcement_remove a:hover {background-color:#cdc8a0; box-shadow:1px 1px 1px #66614c inset; -webkit-box-shadow:1px 1px 1px #666 inset; -moz-box-shadow:1px 1px 1px #666 inset; border-radius:3px;}
#announcement_close {color:#666;}
#announcement span {color:#666;}
#announcement ul {list-style-type:none}
</style>
<div id=“announcement_box” class=“ption_a”>
<div id=“announcement”>
<ul style=“margin-top: 0px;”>
<!—以下的公告内容代码需要手动复制/修改内容—>
<li><span class=“mr10”> 2015–4–25</span>友情提示:可以使用键盘左右方向键来浏览上一篇和下一篇文章</li>
<li><span class=“mr10”> 2015–4–24</span>老师上生物课,说到精子的结构和成分,老师说精子的主要成分是蛋白质,一女 生提问老师为什么不是甜的呢?全班爆笑,女生脸红跑出教室。</li>
</ul>
</div>
<div class=“announcement_remove”><a title=“关闭” href=“javascript:void(0)” rel=“external nofollow” onClick=“$(‘#announcement_box’).slideUp(‘slow’);”><span id=“announcement_close”>×</span></a></div>
</div>
<script>
function AutoScroll(obj){
$(obj).find(“ul:first”).animate({
marginTop:“-25px”
},500,function(){
$(this).css({marginTop:“0px”}).find(“li:first”).appendTo(this);
});
}
$(document).ready(function(){
setInterval(‘AutoScroll(“#announcement”)’,4000)
});
</script>
|
worpdress滚动公告栏代码使用说明
将以上代码复制并新建一个PHP文件,如命名为 wanote.php,将文章上传到你的主题文件夹目录内,然后在需要显示公告的位置用下面代码调用即可。
1
|
<?php include (TEMPLATEPATH . ‘/wanote.php’); ?>
|
类别:WordPress教程、
本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。
还没有任何评论,赶紧来占个楼吧!