WordPress为自定义字段提供了一个比较自由的后台接口，可以让我们轻松的定制自己的主题页面布局，而且不需要写很多代码。有时候我们需要实现一些特殊的页面结构，比如这个页面：
我需要为这个页面定制能在后台替换这三张图片以及图片下的文字的功能，如果把HTML全部都堆在文章正文，以后更新起来就不那么方便了，这里就需要用到自定义字段的功能。
先来看一下我希望在前台实现的HTML代码结构，为了简单点，这里只列出一张图片的：
1 2 3 4 5 6 7 8 9 | <li> <a href="/promotions-grand-park-orchard/"> <img src="http://www.indulgence.com.sg/wp-content/themes/parkhotel/images/pic1.jpg"> </a> <div class="txt_cont"> Up to 35% with groups of 3 and above for All-you-can-eat Lunch and Dinner with complimentary parking<br/> <a href="/promotions-grand-park-orchard/">Read more...</a> </div> </li> |
其中我只需要对img的url和txt_cont的文本做一些自定义即可
首先在后台打开编辑页面，在页面顶部开启自定义字段的视图：
滚动到页面底部，会看到自定义字段的选项出现了，于是我添加了6个选项：
dining_image_1、dining_image_2和dining_image_3 对应3张图片的URL
dining_desc_1、dining_desc_2和dining_desc_3 对应3段图片下面的文字
为了能看到效果，已经给每个value添加内容。添加完毕后保存页面。
找到这个页面对应的主题文件，在相应的位置添加如下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 | <?php $dining_image_1 = get_post_meta($post->ID, 'dining_image_1', true); //给字段dining_image_1赋上在后台输入的值 if (empty ( $dining_image_1 )) { //如果后台没有输入dining_image_1字段值，就给它加个默认值 $dining_image_1 = get_template_directory_uri()."/images/pic1.jpg"; } $dining_image_2 = get_post_meta($post->ID, 'dining_image_2', true); if (empty ( $dining_image_2 )) { $dining_image_2 = get_template_directory_uri()."/images/pic2.jpg"; } $dining_image_3 = get_post_meta($post->ID, 'dining_image_3', true); if (empty ( $dining_image_3 )) { $dining_image_3 = get_template_directory_uri()."/images/pic3.jpg"; } $dining_desc_1 = get_post_meta($post->ID, 'dining_desc_1', true); //给字段dining_desc_1赋上在后台输入的值 if (empty ( $dining_desc_1 )) { //如果后台没有输入dining_desc_1字段值，就给它加个默认值 $dining_desc_1 = " "; } $dining_desc_2 = get_post_meta($post->ID, 'dining_desc_2', true); if (empty ( $dining_desc_2 )) { $dining_desc_2 = " "; } $dining_desc_3 = get_post_meta($post->ID, 'dining_desc_3', true); if (empty ( $dining_desc_3 )) { $dining_desc_3 = " "; } ?> |
赋值完毕后，就需要改造文章开头那段HTML了，用echo命令在自定义字段的地方把它们输出即可：
1 2 3 4 5 6 7 8 9 | <li> <a href="/promotions-grand-park-orchard/"> <img src="<?php echo $dining_image_1; ?>"> </a> <div class="txt_cont"> <?php echo $dining_desc_1; ?><br/> <a href="/promotions-grand-park-orchard/">Read more...</a> </div> </li> |
文章中用到的get_post_meta是Wordpress自定义变量中一个常用命令，可以去官方文档详细了解一下这条命令。
本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/388.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。
本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。