WordPress纯代码实现顶部滚动+链接公告功能
不得不说公告栏这个功能非常有实用性,而在具体实现方法却少之又少,所以我将我制作 WordPress 滚动公告栏的经验与大家分享一下,希望能对大家有点帮助。
之前为大家分享了 WordPress 单条公告的实现方法,有需要的童鞋可以看看:
最终要实现的效果大家可以参考本站头部。废话不多说,开始教程。
一、注册公告文章类型
首先,我们要注册一个名为“公告”的文章类型,将以下代码加入到 WordPress 主题 functions.php 最后一个?>前:
/* ** 码云笔记 _ 公告 ** https://mybj123.com */ 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 , '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-gonggao.php,然后再引入 functions.php 文件中:
include("functions-gonggao.php");
请注意引入的 functions-gonggao.php 文件的存放路径,这里的路径是在 functions.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' => 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>
其中的”5″为调用显示条数,”70″为调出内容的字符数,这两个参数可根据自己的情况设置。这里的代码结构因为是来源于本站,所以请另行结合自己的网站做适当的修改。
三、CSS 样式
上面已经将设置的公告显示出来了,那么接下来就要将其 css 美化了:
div#site-gonggao { line-height: 25px; height: 30px; background-color: #FFF; width: 990px; 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; } .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; }
四、滚动代码
首先提醒大家,此 JS 代码需要 jQuery 库,如果网站没有加载的还需要添加一个 jQuery 库。
滚动代码如下:
function autoScroll(obj) { var aa = document.getElementById("siteul").getElementsByTagName("li").length; if (aa !== 1) { $(obj).find(".list").animate({ marginTop: "-30px" }, 500, function() { $(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纯代码实现顶部滚动+链接公告功能