WordPress网站页面自定义字段的创建和调用方法讲解
本帖最后由 美工学习 于 2023-11-30 21:48 编辑WordPress为自定义字段提供了一个比较自由的后台接口，可以让我们轻松的定制自己的主题页面布局，而且不需要写很多代码。有时候我们需要实现一些特殊的页面结构，比如这个页面：
我需要为这个页面定制能在后台替换这三张图片以及图片下的文字的功能，如果把HTML全部都堆在文章正文，以后更新起来就不那么方便了，这里就需要用到自定义字段的功能。先来看一下我希望在前台实现的HTML代码结构，为了简单点，这里只列出一张图片的：<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代码，这段代码作用是让页面先获得刚才在后台添加的自定义字段和赋值：<?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命令在自定义字段的地方把它们输出即可：<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自定义变量中一个常用命令，可以去官方文档详细了解一下这条命令。
页:
[1]