实战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菜单已经加上了。
wp140728
这时随便添加一篇hotel文章,发现在前台浏览404报错,在后台文章是实实在在添加上了的。反复验证,原来先要去刷新一下伪静态,这是一个小小的坑…

光添加了hotel的分类,其实和post本质上没有什么区别,我要对hotel页面进行一些定制,在页面实现这样的格式:
wp140728_2
这样就需要做几个自定义字段:
wp140728_3
给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
60
61
62
63
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->ID, 'hotel_desc', true );
	$hotel_address = esc_html( get_post_meta( $hotel->ID, 'hotel_address', true ) );
	$hotel_zipCode = esc_html( get_post_meta( $hotel->ID, 'hotel_zipCode', true ) );
	$hotel_tel = esc_html( get_post_meta( $hotel->ID, 'hotel_tel', true ) );
	$hotel_fax = esc_html( get_post_meta( $hotel->ID, 'hotel_fax', true ) );
	$hotel_website = esc_html( get_post_meta( $hotel->ID, 'hotel_website', true ) );
	$hotel_email = esc_html( get_post_meta( $hotel->ID, 'hotel_email', true ) );
	$hotel_starRating = intval( get_post_meta( $hotel->ID, 'hotel_starRating', true ) );	
	?>
	<table>
		<tr>
			<td valign="top" style="width: 200px">Hotel Basic Description</td>
			<td><textarea name="hotel_desc" id="hotel_desc"  style="width:500px; height:80px" /><?php echo $hotel_desc; ?></textarea></td>
		</tr>
		<tr>
			<td >Hotel Address</td>
			<td><input type="text" name="hotel_address" value="<?php echo $hotel_address; ?>"  style="width:500px" /></td>
		</tr>
		<tr>
			<td>Hotel Zip Code</td>
			<td><input type="text" name="hotel_zipCode" value="<?php echo $hotel_zipCode; ?>"  style="width:500px" /></td>
		</tr>
		<tr>
			<td>Hotel Telephone</td>
			<td><input type="text" name="hotel_tel" value="<?php echo $hotel_tel; ?>"  style="width:500px" /></td>
		</tr>
		<tr>
			<td>Hotel Fax</td>
			<td><input type="text" name="hotel_fax" value="<?php echo $hotel_fax; ?>"  style="width:500px" /></td>
		</tr>
		<tr>
			<td>Hotel Website</td>
			<td><input type="text" name="hotel_website" value="<?php echo $hotel_website; ?>"  style="width:500px" /></td>
		</tr>
		<tr>
			<td>Hotel Email</td>
			<td><input type="text" name="hotel_email" value="<?php echo $hotel_email; ?>" style="width:500px" /></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 >= 1; $rating -- ) {
                ?>
					<option value="<?php echo $rating; ?>" <?php echo selected( $rating, $hotel_starRating ); ?>>
					<?php echo $rating; ?> stars <?php } ?>
				</select>
			</td>
		</tr>
	</table>
	<?php
}

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

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

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后台自由度就大多了。

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/530.html。百度不可信,搜索请谨慎。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以获取本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

发表评论

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