Wordpress滚动公告怎么做

1、添加公告文章类型

首先，注册一个公告的文章类型，包括公告的新建，添加，编辑与删除。在functions.php的同级目录下新建一个 gonggao.php ，代码如下：<?phpfunction post_type_bulletin() { register_post_type( 'bulletin', array( 'public' => true,'publicly_queryable' => true,'hierarchical' => false,'labels'=>array('name' => _x('公告', 'post type general name'),'singular_name' => _x('公告', 'post type singular name'),'add_new' => _x('添加新公告', '公告'),'add_new_item' => __('添加新公告'),'edit_item' => __('编辑公告'),'new_item' => __('新的公告'),'view_item' => __('预览公告'),'search_items' => __('搜索公告'),'not_found' =>__('您还没有发布公告'),'not_found_in_trash' => __('回收站中没有公告'),'parent_item_colon' => ''),'show_ui' => true,'menu_position'=>5,'supports' => array('title','author','excerpt','thumbnail','trackbacks','editor','comments','custom-fields','revisions' ) ,'show_in_nav_menus' => true ,'menu_icon' => 'dashicons-megaphone','taxonomies' => array('menutype','post_tag') ) );}add_action('init', 'post_type_bulletin'); function create_genre_taxonomy() { $labels = array( 'name' => _x( '公告分类', 'taxonomy general name' ), 'singular_name' => _x( 'genre', 'taxonomy singular name' ), 'search_items' =>__( '搜索分类' ), 'all_items' => __( '全部分类' ), 'parent_item' => __( '父级分类目录' ), 'parent_item_colon' => __( '父级分类目录:' ), 'edit_item' => __( '编辑公告分类' ), 'update_item' => __( '更新' ), 'add_new_item' => __( '添加新公告分类' ), 'new_item_name' => __( 'New Genre Name' ), ); register_taxonomy('genre',array('bulletin'), array( 'hierarchical' => true, 'labels' => $labels, 'show_ui' => true, 'query_var' => true, 'rewrite' => array( 'slug' => 'genre' ), ));}add_action( 'init', 'create_genre_taxonomy', 0 );在functions.php中引用该公告的gonggao.php文件，在functions.php的底部加上如下代码：include ("gonggao.php");之后，再登录到wordpress网站的后台，就可以看到在文章的下面多了一个公告标签。上述代码中的'menu_icon' => 'dashicons-megaphone',就是我们设定的 Dashicons 图标，效果如下图。如果去掉这行的话，图标默认和文章的图标一样。

2. 添加公告样式

将下面的公告内容代码放在 index.php 自己想要显示的位置：<div id="site-gonggao"><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教程栏目进行学习！以上就是Wordpress滚动公告怎么做的详细内容，更多请关注小潘博客其它相关文章！