效果展示

演示地址:点击查看

1.前端效果

Riprov2功能教学-公告页面插图

2.后端设置展示

Riprov2功能教学-公告页面插图1

Riprov2功能教学-公告页面插图2

教程开始

1.新建一个文件,注册后台菜单,比如gonggao.php,将以下代码复制进去

隐藏内容

此处内容需要权限查看

  • 普通用户购买价格:不可购买
  • 会员用户购买价格:12.72学习币8折
  • 赞助用户购买价格:免费推荐

2.新建公告gonggao.css文件,将以下内容复制进去,css文件可能有欠缺,可在演示页面f12查看欠缺部分,加进去就行了

隐藏内容

此处内容需要权限查看

  • 普通用户购买价格:不可购买
  • 会员用户购买价格:12.72学习币8折
  • 赞助用户购买价格:免费推荐

3.在ripro-v2/pages中新建页面,比如:gonggao.php

将以下代码复制进去

隐藏内容

此处内容需要权限查看

  • 普通用户购买价格:不可购买
  • 会员用户购买价格:12.72学习币8折
  • 赞助用户购买价格:免费推荐

4.配置后台选项,functions.php中,将以下内容加进去

隐藏内容

此处内容需要权限查看

  • 普通用户购买价格:不可购买
  • 会员用户购买价格:12.72学习币8折
  • 赞助用户购买价格:免费推荐

5.本公告页面可直接调用为小喇叭形式

调用方法,在需要显示的位置添加下面的代码

<div id="site-gonggao">
<div class="site-gonggao-div"><i class="fa fa-bell-o"></i>&nbsp;</div>
<div id="site-gonggao-div2" class="sitediv">
<ul class="list" id="siteul">
<?php $loop = new WP_Query( array( 'post_type' => 'bulletin', 'posts_per_page' => 5 ) );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<li>
<a href="/gonggao" style="color:#fff" target="_blank"><?php mb_strimwidth(the_content(), 0, 70, '…'); ?></a></li>
<?php endwhile; wp_reset_query(); ?>
</ul>
</div>
</div><div id="site-gonggao">
<div class="site-gonggao-div"><i class="fa fa-volume-up"></i>&nbsp;</div>
 <div id="site-gonggao-div2" class="sitediv">
    <ul class="list" id="siteul">
    <?php $loop = new WP_Query( array( 'post_type' => 'bulletin', 'posts_per_page' => 5 ) );
          while ( $loop->have_posts() ) : $loop->the_post();
     ?>
      <li><?php mb_strimwidth(the_content(), 0, 70, '…'); ?></li>
      <?php endwhile; wp_reset_query(); ?>
      </ul>
 </div>
</div>

如果需要调用,请自己配置css,以下是示例css

div#site-gonggao{
    line-height: 25px; 
    height: 30px; 
    background-color: #026eff; 
    width: 1920px; 
    margin: 0 auto 10px; 
    padding-left: 10px; 
    color: #666; 
    /*border-left: 5px solid #3E94D2; */
    /*border-right: 5px solid #3E94D2; */
    -webkit-box-shadow: 0 5px 5px #D3D3D3; 
    box-shadow: 0 5px 5px #D3D3D3;
    margin-bottom: 0px;
    padding-left: 236px;
}
.site-gonggao-div {
    float:left;
    color: #fff;
}
.fa {
    display: inline-block;
   
        font-style: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-variant-east-asian: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: inherit;
    line-height: 1;
    font-family: FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
}

#site-gonggao a{color: #1663B7;}
#site-gonggao a:hover{color: #09F;}
#site-gonggao-div2{overflow: hidden;
height:30px;}
#site-gonggao-div2 .list li{
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    color: #fff;
}

如果需要滚动显示,请复制以下js代码

此JS代码需要jQuery库,如果网站没有加载的还需要添加一个jQuery库

function autoScroll(obj){  
var aa=document.getElementById("siteul").getElementsByTagName("li").length;
if(aa!==1){
    jQuery(obj).find(".list").animate({  
          marginTop : "-30px"  
      },500,function(){  
      jQuery(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  
      })  
      };
      }
   $(function(){   
       setInterval('autoScroll(".sitediv")',4000)  
     })  ;

注:其中,第4行的”.list”是调用代码中,ul标签的class样式;第12行的”.sitediv”是包裹ul的div标签的class样式。

教程结束了,转载请备注出处,谢谢

 

发表评论

后才能评论

评论(1)