wordpress自定义文章类型∶添加公告功能

分类栏目:用户体验 - 前端开发

317219

发布于 65 条评论

在前段时间,本站增加了一个公告的测试功能,旨在让用户更加了解本站的动态,也可以增加用户交流的强度。另一方面也可以记录本站的一些点点滴滴,某年某月某时还能感慨一下,哈哈……最近也发现有些用户反映表示需要添加公告功能的一个教程。那今天就出一个分享教程,其实网上已经有不少相关的教程了,甚至有些wordpress主题早已经内置了这个功能,然而大多数只是贴出代码出来却没有怎么讲到原理,所以今天主要为大家讲讲在wordpress实现自定义文章类型的原理以及以添加公告功能为说明示例。

wordpress-bulletin

Post Types文章类型

首先我们先认识一下wordpress的文章类型。除了在wordpress中已经被使用的保留文章类型,那我们也可以自定义类型,wordpress强大之处就在这里,扩展性超强。

一、保留文章类型

以下文章类型被保留,因为已经被WordPress使用了。

  • post(文章)∶在WordPress的博客使用的主要类型,通常按时间的倒序来排序。文章也用来生成feed。
  • page(页面)∶和post有向类似,只不过是独立的,有自己的url地址,在wordpress常用来制作一些特殊的页面。
  • attachment(附件)∶attachment是通过上传然后引用到post或者page的一些多媒体。
  • revision(校订)∶revision的作用是用来保存文章草稿以及一些修改过的文章版本。
  • nav_menu_item(导航菜单项)∶nav_menu_item是用来保存导航菜单信息。

二、自定义类型

除了以上的保留文章类型外,为了满足多样化需求,我们可以自定义一些文章类型,例如:公告、视频、专题等等。自定义文章类型的实际用途很广,可以制作出复杂多变的表现形式。先来看看一个简单自定义类型的例子:

add_action( 'init', 'create_post_type' );
function create_post_type() {
	register_post_type( 'acme_product',
		array(
			'labels' => array(
				'name' => __( 'Products' ),
				'singular_name' => __( 'Product' )
			),
		'public' => true,
		'has_archive' => true,
		)
	);
}

在这个例子中我们创建了一个名为acme_product的文章类型。从上面可知道自定义文章类型主要是用了一个函数register_post_type,这个函数为注册文章类型函数,通过它可以注册新的文章类型。其基本用法如下∶

  <?php register_post_type( $post_type, $args ); ?>

其中的$post_type为必需项,定义文章类型的名称;$args为可选项,用来配置一些数组。关于$args的数组,参数非常多,大家到wordpress register post type查阅详情,具体的参数都有详细的说明。在这里就不一一介绍了。

为博客添加公告功能

通过上面的了解,我们已经知道了怎么去自定义一个新的文章类型,那我们就来制作一个公告功能,自定义注册好后,就可以在后台像发布文章一样的发布公告。

一、注册公告文章类型

仿照上面的例子以及参考官方的参数说明,我们可以制作出名为”公告”的文章类型,以下代码来自本站(觉唯前端),具体效果可以到首页查看。

// 觉唯前端公告
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.php文件中,或者为了方便管理代码也可以把上面的代码复制下来然后保存文件为bulletin-post-types.php,然后再引入functions.php文件中:

include("bulletin-post-types.php");

请注意引入的bulletin-post-types.php文件的存放路径,这里的路径是在functions.php文件所在目录的当前目录下。

二、显示自定义文章类型内容

接下来我们就把刚刚自定义的公告显示出来,把下面的代码放到你想要调用公告内容的页面即可:

<div id="announcement_box"  class="ption_a">
  <div id="announcement">
    <ul style="margin-top: 0px;">
      <?php
                $loop = new WP_Query( array( 'post_type' => 'bulletin', 'posts_per_page' => 5 ) );
                while ( $loop->have_posts() ) : $loop->the_post();
            ?>
      <li><span class="mr10">
        <?php the_time('Y-n-j H:i') ?>
        </span><a href="http://www.jiawin.com/bulletin-archive/#bulletin-<?php%20the_ID();%20?>" rel="external nofollow"  title="<?php the_title(); ?>"><?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 70,"…"); ?></a></li>
      <?php endwhile; wp_reset_query(); ?>
    </ul>
  </div>
  <div class="announcement_remove"><a title="关闭" href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  onClick="$('#announcement_box').slideUp('slow');"><span id="announcement_close">×</span></a></div>
</div>

其中的”5″为调用显示条数,”70″为调出内容的字符数,这两个参数可根据自己的情况设置。这里的代码结构因为是来源于本站(觉唯前端),所以请另行结合自己的网站做适当的修改。
接下来是美化css样式,这是必须的∶

#announcement_box {background-color:rgba(240, 239, 215, 0.5); background-color:#E3DEC0 \9; margin:0 0 0 40px; border:1px dashed #C1C0AB; border-radius:2px; padding-left:10px; top:42px; width:674px;}
#announcement {background:url(images/notice_icon.png) left center no-repeat scroll; height:25px; line-height:25px; overflow: hidden; padding: 5px 10px 5px 20px; float:left;}
#announcement a {color:#000;}
#announcement a:hover {color:#94382B;}
.announcement_remove {padding:5px 10px; float:right; font-size:14px;}
.announcement_remove a {height:18px; width:18px; display:block; line-height:16px; margin:4px 0 3px 0; margin:10px 0 3px 0 \9; text-align:center;}
.announcement_remove a:hover {background-color:#cdc8a0; box-shadow:1px 1px 1px #66614c inset; -webkit-box-shadow:1px 1px 1px #666 inset; -moz-box-shadow:1px 1px 1px #666 inset; border-radius:3px;}
#announcement_close {color:#666;}
#announcement span {color:#666;}

最后给公告加个上下滚动的效果:

function AutoScroll(obj){ 
	$(obj).find("ul:first").animate({ 
		marginTop:"-25px" 
	},500,function(){ 
		$(this).css({marginTop:"0px"}).find("li:first").appendTo(this); 
		}); 
} 
$(document).ready(function(){ 
	setInterval('AutoScroll("#announcement")',4000) 
});

关于自定义文章类型的分页列表显示问题

自定义文章类型发现分页列表无法显示,解决方案请前往《WORDPRESS自定义文章类型的分页列表调用问题》。

—— 更新时间2013-6-17

全部评论 / 65

  1. 刚烈哥   

    博主你好! 我的公告基本实现了,但是点击公告进不了公告文章详情404了 我的博客开了WordPress伪静态链接!求解!!! :cry:

    刚烈哥    2012-12-13
    20
    1. Javin

      进入后台 – 固定链接,点击保存更新,就可以刷新伪静态规则。

      1号 Javin 2012-12-13
  2. 刚烈哥   

    博主,为什么我在functions.php中include(“bulletin-post-types.php”);之后首页直接出现了未编译的php代码?

    刚烈哥    2012-12-13
    19
    1. Javin

      创建bulletin-post-types.php文件了没?请仔细阅读上文。

      1号 Javin 2012-12-13
      1. 刚烈哥   

        创建了 跟functions.php同级目录的

        刚烈哥    2012-12-13
      2. 刚烈哥   

        博主能提供个解决方案不?

        刚烈哥    2012-12-13
  3. 请教下修改哪里可以出现如贵站一样的虚线框,已经整个公告栏距离导航的距离;还有公告列表页面怎样如同文章列表!多谢…

    柒月 2012-12-13
    18
  4. 我按照你的方法是在首页是调用出来了。但我查看全部文章时是空白页面

    spx067161 2012-12-13
    17
  5. 站长你好同,如果我想让这个文章类型也像通常的文章一样能设置标签应该怎么弄呢

    16
    1. Javin

      查阅下官网的函数就可以了解清楚了了。

      1号 Javin 2012-12-13
      1. 谢谢,明天再去看,睡觉了,祝晚安

  6. 博主您好,我想问一下您博文里引用那个框框,是通过什么实现的呀?我博文里引用的都是斜体的,麻烦告知,谢谢。如下面的效果:

    博主您好,我想问一下您博文里引用那个框框,是通过什么实现的呀?我博文里引用的都是斜体的,麻烦告知,谢谢。

    210 2012-12-13
    15
    1. jquery怎么添加进去?我网站有jquery了的 但是还是报错。 (ps:本地环境下的,线上主题不一样)

      没用。。。好似默认就有了,但是写的时候报错。

  7. 学习了,不过这个好像对于换主题有影响,还是直接用自带的几种了。

    14
  8. 很好啊,又学习了

    13
  9. 发现这段代码在加入到.js后没有效果,原因是没有把&改为jQuery,觉唯老师你查看下是不是这么个情况。
    function AutoScroll(obj){jQuery(obj).find("ul:first").animate({marginTop:"-25px"},500,function(){jQuery(this).css({marginTop:"0px"}).find("li:first").appendTo(this);});}
    jQuery(document).ready(function(){setInterval('AutoScroll("#announcement")',4000)});
    ;-) ;-)

    12
    1. Javin

      用这对代码包围起来就行。jQuery(function($){
      ……
      });

      1号 Javin 2012-12-13
      1. :idea: 两个办法都可以了,嘿嘿,感谢呀