WordPress滚动公告怎么做

WordPress滚动公告怎么做

1、添加公告文章类型

首先,注册一个公告的文章类型,包括公告的新建,添加,编辑与删除。在functions.php的同级目录下新建一个 gonggao.php ,代码如下:

<?php function post_type_bulletin() {  register_post_type(  &#39;bulletin&#39;,  array( &#39;public&#39; => true,         'publicly_queryable' =&gt; true,         'hierarchical' =&gt; false,         'labels'=&gt;array(         'name' =&gt; _x('公告', 'post type general name'),         'singular_name' =&gt; _x('公告', 'post type singular name'),         'add_new' =&gt; _x('添加新公告', '公告'),         'add_new_item' =&gt; __('添加新公告'),         'edit_item' =&gt; __('编辑公告'),         'new_item' =&gt; __('新的公告'),         'view_item' =&gt; __('预览公告'),         'search_items' =&gt; __('搜索公告'),         'not_found' =&gt;  __('您还没有发布公告'),         'not_found_in_trash' =&gt; __('回收站中没有公告'),         'parent_item_colon' =&gt; ''         ),         'show_ui' =&gt; true,         'menu_position'=&gt;5,         'supports' =&gt; array(         'title',         'author',         'excerpt',         'thumbnail',         'trackbacks',         'editor',         'comments',         'custom-fields',         'revisions' ) ,         'show_in_nav_menus' =&gt; true ,         'menu_icon' =&gt; 'dashicons-megaphone',         'taxonomies' =&gt; array(         'menutype',         'post_tag')  )  );}add_action('init', 'post_type_bulletin');  function create_genre_taxonomy() {  $labels = array(  'name' =&gt; _x( '公告分类', 'taxonomy general name' ),  'singular_name' =&gt; _x( 'genre', 'taxonomy singular name' ),  'search_items' =&gt;  __( '搜索分类' ),  'all_items' =&gt; __( '全部分类' ),  'parent_item' =&gt; __( '父级分类目录' ),  'parent_item_colon' =&gt; __( '父级分类目录:' ),  'edit_item' =&gt; __( '编辑公告分类' ),  'update_item' =&gt; __( '更新' ),  'add_new_item' =&gt; __( '添加新公告分类' ),  'new_item_name' =&gt; __( 'New Genre Name' ),  );  register_taxonomy('genre',array('bulletin'), array(  'hierarchical' =&gt; true,  'labels' =&gt; $labels,  'show_ui' =&gt; true,  'query_var' =&gt; true,  'rewrite' =&gt; array( 'slug' =&gt; 'genre' ),  ));}add_action( 'init', 'create_genre_taxonomy', 0 );

在functions.php中引用该公告的gonggao.php文件,在functions.php的底部加上如下代码:

include ("gonggao.php");

之后,再登录到WordPress网站的后台,就可以看到在文章的下面多了一个公告标签。
上述代码中的

'menu_icon' =&gt; 'dashicons-megaphone',

就是我们设定的 Dashicons 图标,效果如下图。如果去掉这行的话,图标默认和文章的图标一样。

2. 添加公告样式

将下面的公告内容代码放在 index.php 自己想要显示的位置:

<div> <div> <i></i> </div>  <div>     <ul>     <?php  $loop = new WP_Query( array( &#39;post_type&#39; => 'bulletin', 'posts_per_page' =&gt; 3 ) );           while ( $loop-&gt;have_posts() ) : $loop-&gt;the_post();      ?&gt;       <li><?php  mb_strimwidth(the_content(), 0, 70, &#39;…&#39;); ?></li>       <?php  endwhile; wp_reset_query(); ?>       </ul>  </div> </div>

其中 3 代表有 3 条公告, 70 则表示每个公告显示 70 个字符。这个可以根据你自己的情况设置。

3. 添加 css 代码

将下面代码复制到 main.css 文件当中即可:

div#site-gonggao {     line-height: 25px;     height: 30px;     background-color: #FFF;     padding-left: 10px;     color: #666;     -webkit-box-shadow: 0 5px 5px #D3D3D3;     box-shadow: 0 5px 5px #D3D3D3;}  #site-gonggao .list {     padding-left: 5px;}  .site-gonggao-div {     float: left;}  .fa-volume-up:before {     content: "f028";     color: #428bca;}  #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;}  #site-gonggao-div2 .list li p {     display: inline;     overflow: hidden;     white-space: nowrap;     text-overflow: ellipsis;}

4. 添加滚动公告 JS 代码

添加公告的滚动代码,需要 jquery 库,当然 DUX 主题是已经加载了的,直接将下面代码复制到 header.php 中即可

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 样式。

更多wordpress相关技术文章,请访问wordpress教程栏目进行学习!

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享