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

318337

Javin 发布于 2012-12-13 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

真是太有用了！非常感谢！！

诸葛小觉 2012-12-13 登录以回复

20
已经用上效果不错重新给定义了css http://www.cobmw.com/i-say/

记忆碎片 2012-12-13 登录以回复

19
这样一来，发布公告就方便多了！

碎碎念 2012-12-13 登录以回复

18
1. 在这里也看见你~
  
  诸葛小觉 2012-12-13 登录以回复
  1. 我经常到处逛的，一发现哪个博客好就去哪个博客瞧瞧，觉唯这里很多值得学，就常来了。
    
    碎碎念 2012-12-13 登录以回复
    1. 嘿！说到点子上了，支持觉唯，毕竟跟我名字的小觉有同一个字，嘿~~
      
      诸葛小觉 2012-12-13
  2. 话说我发现我网站的头像不清晰啊，怎么破哟
    
    碎碎念 2012-12-13 登录以回复
    1. 不会啊，挺清晰的，感觉不行就到那个G什么的网站重新上传一次图片咯~
      
      诸葛小觉 2012-12-13
那个js放到哪里呢？放到theme里的被页面调用的js里也没有起作用啊

阿道夫 2012-12-13 登录以回复

17
1. 可以新建一个js文件引用到页面或者直接添加到别的js文件里面，保证不冲突就行。
  
  1号 Javin 2012-12-13 登录以回复
  1. 嘿嘿，找了半天，才发现没有引用jquery库，加上就好了，谢谢
    
    阿道夫 2012-12-13 登录以回复
右侧最新评论这一块平滑更新效果是怎么实现的啊？css3吗？

HTML5G 2012-12-13 登录以回复

16
这个公告的样式很漂亮,如果我想把它在侧边栏显示出来,我的主题是侧边栏所有页面都可看到的,那应该把代码怎么调整下呢?

joerh99 2012-12-13 登录以回复

15
太牛叉了，一直想实现这样的功能，我都是手动修改公告，这下好O(∩_∩)O ~~
谢谢楼主的分享了！

正仔 2012-12-13 登录以回复

14
请问公告的链接如何默认为ID？
比如我输入标题《时代发生的发生地方》默认地址则为时代发生的发生地方
我需要输入标题《时代发生的发生地方》默认地址则为 1
这要怎么改呢？

右手 2012-12-13 登录以回复

13
1. 需要伪静态的支持，可以在后台的文章页面修改固定链接。
  
  1号 Javin 2012-12-13 登录以回复
  1. 我已经可以伪静态啦，我的意思就是想，如何让他默认就是数字类型，也不是我输入
    士大夫，地址也是士大夫呢！文章模块就可以做到了，但是公告还是不行，不知道应该要改哪里呢？
    
    右手 2012-12-13 登录以回复
    1. 可以在后台的公告页面修改固定链接。
      
      1号 Javin 2012-12-13
  2. 只能自己手动修改么？不能让他默认文章地址为ID呀？像文章模块一样
    
    我只需要修改一下地址就好了，然后所有文章都会以那个ID为地址去排序！
    
    右手 2012-12-13 登录以回复
    1. 可以去后台修改固定连接的类型，设置为文章的id就行。
      
      1号 Javin 2012-12-13
  3. 可是我已经修改为ID类型的
    固定链接设置为：/%post_id%.html
    可是公告页面没变化
    
    如我添加公告：今天我去了一个好玩的地方
    那么公告的固定地址则为：/bulletin/今天我去了一个好玩的地方
    
    能不能让他默认为/bulletin/1.html 这样子的地址呢？
    
    右手 2012-12-13 登录以回复
    1. 建议还是手动修改吧，一般公告也不多，工作量不大。这个涉及到url重写的问题，比较复杂。
      
      1号 Javin 2012-12-13
  4. OK，麻烦你啦！
    
    右手 2012-12-13 登录以回复
大神，里面有段jiawin的链接，如何变成自己站的啊！？

Kin 2012-12-13 登录以回复

12
1. 直接把我的链接替换成你的就行了。
  
  1号 Javin 2012-12-13 登录以回复
博主，想请问一下您这个博客站点是自己写的吗？还是用的wordpress之类的~

xiaopiu 2012-12-13 登录以回复

11
1. 用WordPress 程度制作的
  
  1号 Javin 2012-12-13 登录以回复
哥们，这个链接<a href="https://www.jiawin.com/bulletin-archive/#bulletin-” title=””>post_content)), 0, 70,”…”); ?>的页面，自己的wordpress上怎么整出来？

Kin 2012-12-13 登录以回复

10
你这个主题不错

小疯子 2012-12-13 登录以回复

9
css借用了一下。。。

大发 2012-12-13 登录以回复

8
1. 给你了，不用借的。
  
  1号 Javin 2012-12-13 登录以回复
照着做，到最后那段滚动代码放function.php中出现错误

牛逼思维 2012-12-13 登录以回复

7
1. 最后一段代码是js代码，不是放到function.php文件中的。
  
  Javin 2012-12-13 登录以回复
  1. 哦，原来如此，伤口有。。
    
    牛逼思维 2012-12-13 登录以回复
  2. @Javin :最后一段代码是js代码，不是放到function.php文件中的。
    
    亲，，随便放哪个js文件都可以吗？
    
    joerh99 2012-12-13 登录以回复
    1. 随便都可以，只要不发生冲突。
      
      1号 Javin 2012-12-13
哈，实现起来还是挺简单的，关键要动手呀，谢谢分享~

TEDLife 2012-12-13 登录以回复

6
写的不错

TuChief 2012-12-13 登录以回复

5
赞一个··

无聊博客网 2012-12-13 登录以回复

4
效果不错~

W3Cshare 2012-12-13 登录以回复

3
感谢老师！

沐 2012-12-13 登录以回复

2
1. 不用客气
  
  1号 Javin 2012-12-13 登录以回复
丫，这个文章类型有点厉害了。

大发 2012-12-13 登录以回复

1