当前位置: 首页 > wordpress > 正文
avatar

在前段时间,本站增加了一个公告的测试功能,旨在让用户更加了解本站的动态,也可以增加用户交流的强度。另一方面也可 […]

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

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是用来保存导航菜单信息。

二、自定义类型

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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,这个函数为注册文章类型函数,通过它可以注册新的文章类型。其基本用法如下∶

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// 觉唯前端公告
function post_type_bulletin() {
register_post_type(
'bulletin',
array( 'public' =&gt; true,
'publicly_queryable' =&gt; true,
'hierarchical' =&gt; false,
'labels'=&gt;array(
'name' =&gt; _x('公告', 'post type general name'),
'singular_name' =&gt; _x('公告', 'post type singular name'),
'add_new' =&gt; _x('添加新公告', '公告'),
'add_new_item' =&gt; __('添加新公告'),
'edit_item' =&gt; __('编辑公告'),
'new_item' =&gt; __('新的公告'),
'view_item' =&gt; __('预览公告'),
'search_items' =&gt; __('搜索公告'),
'not_found' =&gt; __('您还没有发布公告'),
'not_found_in_trash' =&gt; __('回收站中没有公告'),
'parent_item_colon' =&gt; ''
),
'show_ui' =&gt; true,
'menu_position'=&gt;5,
'supports' =&gt; array(
'title',
'author',
'excerpt',
'thumbnail',
'trackbacks',
'editor',
'comments',
'custom-fields',
'revisions' ) ,
'show_in_nav_menus' =&gt; true ,
'taxonomies' =&gt; array(
'menutype',
'post_tag')
)
);
}
add_action('init', 'post_type_bulletin');

function create_genre_taxonomy() {
$labels = array(
'name' =&gt; _x( '公告分类', 'taxonomy general name' ),
'singular_name' =&gt; _x( 'genre', 'taxonomy singular name' ),
'search_items' =&gt; __( '搜索分类' ),
'all_items' =&gt; __( '全部分类' ),
'parent_item' =&gt; __( '父级分类目录' ),
'parent_item_colon' =&gt; __( '父级分类目录:' ),
'edit_item' =&gt; __( '编辑公告分类' ),
'update_item' =&gt; __( '更新' ),
'add_new_item' =&gt; __( '添加新公告分类' ),
'new_item_name' =&gt; __( 'New Genre Name' ),
);
register_taxonomy('genre',array('bulletin'), array(
'hierarchical' =&gt; true,
'labels' =&gt; $labels,
'show_ui' =&gt; true,
'query_var' =&gt; true,
'rewrite' =&gt; array( 'slug' =&gt; 'genre' ),
));
}
add_action( 'init', 'create_genre_taxonomy', 0 );

可以将这段代码直接加到functions.php文件中,或者为了方便管理代码也可以把上面的代码复制下来然后保存文件为bulletin-post-types.php,然后再引入functions.php文件中:

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

请注意引入的bulletin-post-types.php文件的存放路径,这里的路径是在functions.php文件所在目录的当前目录下。
二、显示自定义文章类型内容

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="announcement_box" class="ption_a">
<div id="announcement">
<ul style="margin-top: 0px;">
<ul style="margin-top: 0px;"><!--?php $loop = new WP_Query( array( 'post_type' =&gt; 'bulletin', 'posts_per_page' =&gt; 5 ) );&lt;br ?--> while ( $loop-&gt;have_posts() ) : $loop-&gt;the_post();</ul>
</ul>
<ul style="margin-top: 0px;">
<ul style="margin-top: 0px;">?&gt;
     <li><span class="mr10">
<!--?php the_time('Y-n-j H:i') ?-->
</span><!--?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post-&gt;post_content)), 0, 70,"…"); ?--></li>
</ul>
</ul>
&nbsp;

</div>
<div class="announcement_remove"><a title="关闭" rel="external nofollow"><span id="announcement_close">×</span></a></div>
</div>

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

1
2
3
4
5
6
7
8
9
#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;}

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

1
2
3
4
5
6
7
8
9
10
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)
});

文章转载:觉唯设计

分享:
---------WwW.13qing.com---------
猜你也喜欢的:

wordpress添加公告功能:等您坐沙发呢!

发表评论