因为网上流传很多纯代码给 WordPress 添加一些文字,这里我就不多评价了,不过确实给了我一些想法,具体实施看一下说明:
1. 添加公告文章类型
首先,注册一个公告的文章类型,包括公告的新建,添加,编辑与删除。在 functions.php 的同级目录下新建一个 gonggao.php ,代码如下:
<?php function 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 图标,效果如下图。如果去掉这行的话,图标默认和文章的图标一样。
想获取其他的 Dashicons 图标?前往 Dashicons 主页:https://developer.wordpress.org/resource/dashicons/#editor-customchar 选取自己喜欢的图标!
2. 添加公告样式
将下面的公告内容代码放在 index.php 自己想要显示的位置:
<div id="site-gonggao"> <div class="site-gonggao-div"><i class="fa fa-volume-up"></i> </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' => 3 ) ); while ( $loop->have_posts() ) : $loop->the_post(); ?> <li><?php mb_strimwidth(the_content(), 0, 70, '…'); ?></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 样式。
5. 后记
代码某些方面还是有些欠缺的,不过这个版本的滚动公告栏确实要显得正式一些!只是这个版本还有些不完美,比如缺少一个滚动公告的开关,比如,想直接关闭公告这个功能,对于这个功能我也折腾了很久,可惜的是有些 bug ,就直接放弃了,如果有大神写出来了,欢迎分享你的代码!
评论0