在WordPress中添加公告功能

在WordPress中创建一个公告系统，允许用户发布和管理公告，可以提升网站的信息传播效率。本文将详细介绍如何实现这一功能。

1. 添加公告文章类型

首先，需要在WordPress中注册一个新的文章类型，用于创建公告。创建公告类型需要通过编写自定义的函数，并在functions.php中注册。

function post_type_bulletin() {    register_post_type('bulletin', array(        'public' => true,        'publicly_queryable' => true,        'hierarchical' => false,        'labels' => array(            'name' => __( '公告', 'post type general name' ),            'singular_name' => __( '公告', 'post type singular name' ),            'add_new' => __( '添加新公告', '公告' ),            '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'    ));}add_action('init', 'post_type_bulletin');

2. 添加公告样式

在index.php中插入公告内容，根据需求设置显示位置和样式。


       
            
                 
       'bulletin', 'posts_per_page' => 3)); ?>            while ($loop->have_posts()) : $loop->the_post();

3. 添加CSS样式

将以下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;}.site-gonggao-div2 {    overflow: hidden;    height: 30px;}#site-gonggao a {    color: #1663B7;}#site-gonggao a:hover {    color: #09F;}#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代码

在header.php中添加以下jQuery代码，使公告内容滚动显示。

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);});

以上代码需在WordPress主题的header.php中插入，确保已加载jQuery库。

通过以上步骤，可以在WordPress中自定义公告功能，实现公告的创建、分类、显示和滚动效果。

转载地址：http://dxtfk.baihongyu.com/

你可能感兴趣的文章