1. 首页
  2. Wordpress教程

实战WordPress自定义文章类型(1)配置一个自定义文章类型

今天打算给公司的一个Wordpress网站配置一个自定义文章类型,花了一天时间,记录一下步骤。

WordPress网站原来的文章叫Post,我需要给网站添加一个有别于Post的文章类型,名叫Hotel,目的是把所有的酒店页面归类方便管理。在这些酒店页面上要用自定义字段实现一些特定的格式,展现特定的内容…总之就是折腾出一个新的文章类别,让别人添加内容操作简单化,我自己管理起来也简单化…

首先打开所用theme的function.php,添加如下代码:

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
register_post_type('hotels', array( //这里的‘hotels’就是在后续程序中的引用类别ID
'label' => 'Hotels', //显示在后台菜单上的文章类名
'description' => '',
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => array('slug' => ''),
'query_var' => true,
'supports' => array('title','editor',),
'labels' => array ( //设置后台这一块相关的按钮、链接显示名称
'name' => 'All hotels',
'singular_name' => 'hotel',
'menu_name' => 'Hotels',
'add_new' => 'Add Hotel',
'add_new_item' => 'Add Hotel',
'edit' => 'edit',
'edit_item' => 'Edit Hotel',
'new_item' => 'New Hotel',
'view' => 'View',
'view_item' => ' View Hotel',
'search_items' => 'Search Hotel',
'not_found' => 'not found hotel',
'not_found_in_trash' => 'not found in trash',
'parent' => 'parent hotel',),
)
);

保存并上传文件,刷新WP后台,发现Hotel菜单已经加上了。

这时随便添加一篇hotel文章,发现在前台浏览404报错,在后台文章是实实在在添加上了的。反复验证,原来先要去刷新一下伪静态,这是一个小小的坑…

光添加了hotel的分类,其实和post本质上没有什么区别,我要对hotel页面进行一些定制,在页面实现这样的格式:

这样就需要做几个自定义字段:

给function.php添加代码:

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
<pre class="php">add_action( 'admin_init', 'my_admin' );
function my_admin() {
    add_meta_box( 'hotel_meta_box',
        'Hotel Data',
        'display_hotel_meta_box',
        'hotels', 'normal', 'high'
    );
}
function display_hotel_meta_box( $hotel ) {
    $hotel_desc =  get_post_meta( $hotel-&gt;ID, 'hotel_desc', true );
    $hotel_address = esc_html( get_post_meta( $hotel-&gt;ID, 'hotel_address', true ) );
    $hotel_zipCode = esc_html( get_post_meta( $hotel-&gt;ID, 'hotel_zipCode', true ) );
    $hotel_tel = esc_html( get_post_meta( $hotel-&gt;ID, 'hotel_tel', true ) );
    $hotel_fax = esc_html( get_post_meta( $hotel-&gt;ID, 'hotel_fax', true ) );
    $hotel_website = esc_html( get_post_meta( $hotel-&gt;ID, 'hotel_website', true ) );
    $hotel_email = esc_html( get_post_meta( $hotel-&gt;ID, 'hotel_email', true ) );
    $hotel_starRating = intval( get_post_meta( $hotel-&gt;ID, 'hotel_starRating', true ) );
    ?&gt;</pre>
&nbsp;
<table>
<tbody>
<tr>
<td style="width: 200px;" valign="top">Hotel Basic Description</td>
<td><textarea id="hotel_desc" style="width: 500px; height: 80px;" name="hotel_desc">&lt;?php echo $hotel_desc; ?&gt;</textarea></td>
</tr>
<tr>
<td>Hotel Address</td>
<td><input style="width: 500px;" name="hotel_address" type="text" value="&lt;?php echo $hotel_address; ?&gt;" /></td>
</tr>
<tr>
<td>Hotel Zip Code</td>
<td><input style="width: 500px;" name="hotel_zipCode" type="text" value="&lt;?php echo $hotel_zipCode; ?&gt;" /></td>
</tr>
<tr>
<td>Hotel Telephone</td>
<td><input style="width: 500px;" name="hotel_tel" type="text" value="&lt;?php echo $hotel_tel; ?&gt;" /></td>
</tr>
<tr>
<td>Hotel Fax</td>
<td><input style="width: 500px;" name="hotel_fax" type="text" value="&lt;?php echo $hotel_fax; ?&gt;" /></td>
</tr>
<tr>
<td>Hotel Website</td>
<td><input style="width: 500px;" name="hotel_website" type="text" value="&lt;?php echo $hotel_website; ?&gt;" /></td>
</tr>
<tr>
<td>Hotel Email</td>
<td><input style="width: 500px;" name="hotel_email" type="text" value="&lt;?php echo $hotel_email; ?&gt;" /></td>
</tr>
<tr>
<td>Hotel Star Rating</td>
<td><select style="width: 100px;" name="hotel_starRating"><!--?php // Generate all items of drop-down list for ( $rating = 5; $rating &gt;= 1; $rating -- ) {
                ?-->
<option selected="selected" value="&lt;?php echo $rating; ?&gt;">&gt; <!--?php echo $rating; ?--> stars <!--?php } ?--></option>
</select></td>
</tr>
</tbody>
</table>
&lt;?php }

至此,刷新后台,我需要的自定义字段面板就出现了,满有成就感的:P 如果有时间还可以给上面的HTML部分美化一下:

表面文章做完,还需要保存这些字段,继续添加代码:

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
add_action( 'save_post', 'add_hotel_fields', 10, 2 );
function add_hotel_fields( $hotel_id, $hotel ) {
    //保存每个自定义字段
    if ( $hotel->post_type == 'hotels' ) {
        // Store data in post meta table if present in post data
        if ( isset( $_POST['hotel_desc'] ) ) {
            update_post_meta( $hotel_id, 'hotel_desc', $_POST['hotel_desc'] );
        }
        if ( isset( $_POST['hotel_address'] ) ) {
            update_post_meta( $hotel_id, 'hotel_address', $_POST['hotel_address'] );
        }
        if ( isset( $_POST['hotel_zipCode'] )  ) {
            update_post_meta( $hotel_id, 'hotel_zipCode', $_POST['hotel_zipCode'] );
        }
        if ( isset( $_POST['hotel_tel'] ) ) {
            update_post_meta( $hotel_id, 'hotel_tel', $_POST['hotel_tel'] );
        }
        if ( isset( $_POST['hotel_fax'] )   ) {
            update_post_meta( $hotel_id, 'hotel_fax', $_POST['hotel_fax'] );
        }
        if ( isset( $_POST['hotel_website'] )   ) {
            update_post_meta( $hotel_id, 'hotel_website', $_POST['hotel_website'] );
        }
        if ( isset( $_POST['hotel_email'] )   ) {
            update_post_meta( $hotel_id, 'hotel_email', $_POST['hotel_email'] );
        }
        if ( isset( $_POST['hotel_starRating'] ) && $_POST['hotel_starRating'] != '' ) {
            update_post_meta( $hotel_id, 'hotel_starRating', $_POST['hotel_starRating'] );
        }
    }
}

到这里为止,function.php所需的后端代码添加完毕。

完成了后端,接下来就是前端了。Wordpress默认展示文章的模板是theme目录下simple.php。我们的新文章类别是“hotels”,只要把single.php复制一份,命名为single-hotels.php,这个hotels类别下的文章显示的时候就会自动读取single-hotels.php,那么所有的工作只需要修改single-hotels.php就行了,真够神奇!
前端的代码简单的多,只需要在想要显示这些自定义字段的地方添加如下代码即可,不想篇幅拉得太长,只写一个hotel_zipCode自定义字段的例子:

1
2
3
4
5
6
<?php
$hotel_zipCode = get_post_meta( get_the_ID(), 'hotel_zipCode', true );
if (!empty ( $hotel_zipCode ) ) {
    echo "<strong>Zip Code:</strong> ".$hotel_zipCode."</br>";
}
?>

至此就算完成了,代码大部分是从这里搬的,做了一些小修改。了解了以上几个步骤,以后定制Wordpress后台自由度就大多了。

本文来自,经授权后发布,本文观点不代表懒咪博客立场,转载请联系原作者。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据