WordPress网站页面自定义字段的创建和调用方法讲解

美工学习

wordpress为自定义字段提供了一个比较自由的后台接口，可以让我们轻松的定制自己的主题页面布局，而且不需要写很多代码。有时候我们需要实现一些特殊的页面结构，比如这个页面：

我需要为这个页面定制能在后台替换这三张图片以及图片下的文字的功能，如果把html全部都堆在文章正文，以后更新起来就不那么方便了，这里就需要用到自定义字段的功能。

先来看一下我希望在前台实现的HTML代码结构，为了简单点，这里只列出一张图片的：

1. <li>
   
2.         <a href="/promotions-grand-park-orchard/">
   
3.                 <img src="http://www.indulgence.com.sg/wp-content/themes/parkhotel/images/pic1.jpg">
   
4.         </a>
   
5.         <div class="txt_cont">
   
6.                 Up to 35% with groups of 3 and above for All-you-can-eat Lunch and Dinner with complimentary parking<br/>
   
7.                 <a href="/promotions-grand-park-orchard/">Read more...</a>
   
8.         </div>
   
9. </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. <?php
   
2. $dining_image_1 = get_post_meta($post->ID, 'dining_image_1', true); //给字段dining_image_1赋上在后台输入的值
   
3. if (empty ( $dining_image_1 )) { //如果后台没有输入dining_image_1字段值，就给它加个默认值
   
4.         $dining_image_1 = get_template_directory_uri()."/images/pic1.jpg";
   
5. }
   
6. $dining_image_2 = get_post_meta($post->ID, 'dining_image_2', true);
   
7. if (empty ( $dining_image_2 )) {
   
8.         $dining_image_2 = get_template_directory_uri()."/images/pic2.jpg";
   
9. }
   
10. $dining_image_3 = get_post_meta($post->ID, 'dining_image_3', true);
    
11. if (empty ( $dining_image_3 )) {
    
12.         $dining_image_3 = get_template_directory_uri()."/images/pic3.jpg";
    
13. }
    
14. 
    
15. $dining_desc_1 = get_post_meta($post->ID, 'dining_desc_1', true); //给字段dining_desc_1赋上在后台输入的值
    
16. if (empty ( $dining_desc_1 )) { //如果后台没有输入dining_desc_1字段值，就给它加个默认值
    
17.         $dining_desc_1 = " ";
    
18. }
    
19. $dining_desc_2 = get_post_meta($post->ID, 'dining_desc_2', true);
    
20. if (empty ( $dining_desc_2 )) {
    
21.         $dining_desc_2 = " ";
    
22. }
    
23. $dining_desc_3 = get_post_meta($post->ID, 'dining_desc_3', true);
    
24. if (empty ( $dining_desc_3 )) {
    
25.         $dining_desc_3 = " ";
    
26. }
    
27. ?>

复制代码

赋值完毕后，就需要改造文章开头那段HTML了，用echo命令在自定义字段的地方把它们输出即可：

1. <li>
   
2.         <a href="/promotions-grand-park-orchard/">
   
3.                 <img src="<?php echo $dining_image_1; ?>">
   
4.         </a>
   
5.         <div class="txt_cont">
   
6.                 <?php echo $dining_desc_1; ?><br/>
   
7.                 <a href="/promotions-grand-park-orchard/">Read more...</a>
   
8.         </div>
   
9. </li>

复制代码

文章中用到的get_post_meta是Wordpress自定义变量中一个常用命令，可以去官方文档详细了解一下这条命令。

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！