• 注册
  • WordPress建站 WordPress建站 关注:0 内容:23

    WordPress添加上下滚动的公告

  • 查看作者
  • 打赏作者
  • Lv.1
    青铜会员 VIP 1
    靓号:123
    官方

    知鹅曾经推荐过一款插件:WordPress 插件推荐:News announcement scroll,可以很方便的给 wordpress 添加公告,今天教大家添加一款简单的可以上下滚动的公告(感觉自定义文章类型添加公告的那篇太复杂,也没必要那么麻烦,故替换之,如有需要,请移步这里)。

    WordPress添加上下滚动的公告

        

    一、功能代码

    <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>
    <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>

    二、代码使用说明

    可以将上述代码保存为 notice.php,放到主题根目录,然后在需要显示公告的位置用下面代码调用即可

    <?php include (TEMPLATEPATH . '/notice.php'); ?>

    代码中的结构

     <li><span class="mr10"> 2015-4-25</span>友情提示:可以使用键盘左右方向键来浏览上一篇和下一篇文章</li>
    <li><span class="mr10"> 2015-4-24</span>老师上生物课,说到精子的结构和成分,老师说精子的主要成分是蛋白质,一女 生提问老师为什么不是甜的呢?全班爆笑,女生脸红跑出教室。</li>

    需要自己手动添加修改。

    请登录之后再进行评论

    登录
  • 偏好设置
  • 做任务
  • 实时动态
  • 帖子间隔 侧栏位置: