最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

WordPress纯代码实现顶部滚动+链接公告功能

不得不说公告栏这个功能非常有实用性,而在具体实现方法却少之又少,所以我将我制作WordPress滚动公告栏的经验与大家分享一下,希望能对大家有点帮助。

之前为大家分享了WordPress单条公告的实现方法,有需要的童鞋可以看看:

传送阵:WordPress 纯代码实现顶部单条公告方法

最终要实现的效果大家可以参考本站头部。废话不多说,开始教程。

一、注册公告文章类型

首先,我们要注册一个名为“公告”的文章类型,将以下代码加入到WordPress主题functions.php最后一个?>前:

/*
** 码云笔记_公告
** https://www.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文件所在目录的当前目录下,也就是你主题的根目录下。

这时候,登录网站后台,就可以看到如下效果:

WordPress纯代码实现顶部滚动+链接公告功能

二、公告内容调用

接下来,我们要将后台设置的自定义文章类型公告内容显示出来,把下面的代码放到你想要调用公告内容的页面即可,本站是放在了头部模板内,所以整站度可以看到:

<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>

其中的”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纯代码实现顶部滚动+链接公告功能全部内容,希望对大家有用,有什么疑问或错误,欢迎在底部提出。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » WordPress纯代码实现顶部滚动+链接公告功能

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发