【Day28 】 Wordpress custom field ？是什麽来的？该怎麽用？也许您需要这篇文章的帮助

试想想，你现在正在为一间酒店，制作一个网站，您需要为这间酒店加入订房的画面。当然，床数量，有没有浴缸，包不包括早餐，这些重要的资讯，是必须包括的吧。也许你第一时间会想到的，就是直接输入到文章里。但有没有一些更方便，可以一键解决，不用每篇都重复输入，并且简单地进行分类呢？当然是有的，这就是一个大家在初学时会比较少用的功能：wordpress custom field。

基本却不好用的custom field

当我们说起custom field ，大家基本上就会直接跳去讲解怎样使用plugin，来帮助你完美地做到custom field，但却鲜有人提起，其实wordpress，也是有提供基本的custom field给你使用。只是，这不够实用，也不够方便罢了，为什麽这样说？你看下去就知道了。

开启custom field 功能

不过无论怎样，我们还是要先把这功能开启先吧，点选随便一篇文章，点一下右上角的三点，选择偏好设定，然後把最底的自订栏位勾选，这样就可以了。

这样，之後我们可以在任何一篇文章，都能够使用到这功能了。

custom field 基本设置

此时候，我们把文章页面翻动到底部，会看到多了自订栏位的，我们只要输入自己想要的名称和内容，那麽wordpress版面的部分，就已经设置完成了。不过，现在我们还不会看到它显示在文章里的。这可不是你做错甚麽喔，这其实，就像之前的日期，选单等功能一样，也是需要我们加入编码，来作进一步的设定。

我们需要在post的php档案里，简单加入以下编码：

  <ul>
     <li>
       hi: <?php echo get_post_meta($post->ID, 'hi', true);?>
    </li>
   </ul>

hi： 其实就是你输入的栏位名称，若你的栏位名称是其他，那麽只要输入您的就可以了

get_post_meta ： 还记得吗，其实我们一直做的，就是让系统到wordpress里取资料，再让想要的展示出来，而这次我们就需要用到get_post_meta，这样就会根据你输入的，来显示出来

echo： 之前也看过的，假若你需要php显示文字，就需要用到echo

true： 既然我们并没有想设任何条件，让这custom field 会在甚麽时候，显示出来，我们只需要让他在我们有加入内容时，就会出现，我们直接用true就可以了。

一个最大的问题

没错，现在一切看来，都是非常好的，没甚麽问题呀，那麽究竟是什麽原因，让大家不喜爱用？我们再回想一下制作酒店网页这情景，你应该会意识到一件事，就是这些额外资料，不可能只会放在一个页面里，一个酒店网站可是有很多酒店呢，每个房都会需要加入这些额外资料，并且让用家，可以利用这些资料，来作分类，筛选，搜寻。但当我们回到，wordpress里，你会发现你刚设定好的内容，在其他文章里，却是不见了。很遗憾，若你是使用和啲皮ress预设的，你需要再重新再加入的。

当然你可以坚持地使用，这无疑是可行的，但你也无可否认，这样会令你浪费了大量不必要的时间。更何况，他提供给您的custom field，是如此的简陋和简单，若你要弄一些复杂的功能，你也将会耗费更大量的时间，这也是为什麽，我在这里会少有的推介大家，使用插件，简化制作流程。

Advance custom field

说到有名气的custom field插件，advance custom field 必定要算上一席位。即使为免费版本，亦提供丰富功能给用家使用在接下来的部分，就让我就来基本介绍一下，它的用法吧。至於深入的部分，则将会在最後的篇章出现喔。在那篇，将会结合post－type来指导大家，让你能够更能善用advance custom field 这插件。

那我们就开始吧^^（注意喔，假若你先前有使用wordpress原设的custom field ， 那麽请先移除，因为这plugin会把wordpress的，隐藏掉的。若你已经下载并启动了，那麽则请先关闭这plugin，然後把先前设定好的移除，另外也可以把之前的编码铲除掉）

基本设定

我们在wordpress的外挂里，把advance custom field下载起来後，点击新建。

进去後当然是先为我们的栏位定个名字先吧，完成後点击新增栏位。

此时，会有一个新视窗出现，这里有两个非常重要的地方：

栏位标签与名称 － 这两个看似很相似，却还是有分别的。前者主要是给用家看的，而後这只是给系统读取用的，至於要怎样给系统读取？你之後会看到的。这里也有一个很贴心的地方，当你在标签的地方里输入了之後，系统也会自动根据你定的标签，来帮你起名称的

栏位类型 － advance custom field 提供了多种栏位类型给你选择，由文字到图片以至google图片都有提供的。不过我们暂时不动它，让他先保留为预设的文字吧，或者我们可以专业一点，把他称为字串（string）。没错，就是你们之前的php里，有使用过的" "。

其他部份，例如说明，预设值，预留位置文字（placeholder），这些部分当然也是可以根据自己的情况而加入，但这些并不难去理解，我就不在这里花费篇幅详述了。

设定完成後，我们还有一个很重要的部分需要设定，就是下方的－位。

我们需要设定位置，来让系统知道，这个custom field ，该在那边出现的，例如你想要放在文章：page1，那麽就把设定设定为：文章等於文章1。假若你忘了设定，那麽即使储存了，也不会出现在文章编辑页面的下方。

这样在wordpress里的设定就大致上完成了，不过现在你应该还是甚麽也看不到。这和wordpress原设的custom field 也是有着相同的原理。我们需要回到php档案里，加入编码。

基本编码设定

打开档案後，进入需要显示这custom field 的档案，例如我之前设定了需要显示在文章的，那麽就到之前编写文章内容的php档案（postcontent）里。

这里有两种常用的方法：the_field 与 get_field ，他们均是advance custom field 特有的编码来，可以让系统知道，你需要它显示甚麽的。至於他们详细的分别，我们一起看下去吧。

很像echo的the_field

the_field的功能和echo是一样，都是让系统直接把文字内容显示出来。只是过程有点不一样，他需要先经过插件，来看看你输入了什麽，然後再显示出来。

用法：

<?php the_field('post_type')?>

是不是觉得这个post_type有点眼熟呢？没错这个就是你先前在wordpress里，由系统自动生成好好的栏位名称来。

缺点：

虽然这样做确实很方便，但若你希望它能够按情况而出现，那麽这样是没办法做到，这时候我们可以使用到它的另一个功能：get_field

get_field，为你的custom field加入称号（变数variable）

还记得吗？在php的世界里，我们可以把一堆编码设为一个称号，例如：$txt = "Hello world!"，这样你之後要使用的话，只需要输入它的称号$txt，叫它的名字，它就会出现的了，例如：echo "$txt!"; 。而最终的结果，当然是会和你自己直接echo "Hello world!";，会是一样的。

我们回到这里，advance custom field 同样让也提供相同功能，不过我们不能使用the_field了，而是需要用到get_field。你要知道，我们现在是要经过advance custom field来做事的，那麽自然也是该要向插件说清楚，你现在不是要直接从advance custom field拿出内容，显示出来，而是只需要让系统知道，你现在只是要处理这个部份的custom field，而get_field就有这效果了。

基本用法：

<h2><?php 
$type = get_field('post_type');
echo $type?><h2>

或

<h2><?php 
get_field('post_type');
the_field('post_type'); ?></h2>

h1，h2这类显示文字的html编码，在这里是必须加入的

在loop 里的用法：

<?php if( get_field('post_type') ): ?>   <!--翻译：如果post_type有内容可以拿出来的话 -->
    <h2><?php the_field('post_type'); ?></h2>
<?php endif; ?>

这样子，就会令你的custom field，在有输入内容的时候，才会在网页里显示出来。

若想简化一点，也可以像平常程序语言那样，先在档案里的开头，把称号先写好，到下方有需要的时候再使用：

<?php $type = get_field('post_type'); ?>  <!--放在编码的顶部，若为主页，则放在get_header下方  -->

 <?php if ($type): ?>
    <h2><?php echo $type; ?></h2>
 <?php endif; ?>

假若你按滑鼠右键，然後点选检查，你会注意到虽然没显示在网页里，但编码中是有你设定的h1，这代表成功

常用栏位类型介绍（前篇）

文字区域： 和文字相比，这可加入一整篇文章进去。不过注意，在原先设定中，是不会自动分隔段落的，可以透过在下方的选项－新行里点选：自动增加段落，来解决这问题。

数字与范围： 两者都只可以加入数字，不过前者是固定一个数字的，而後者则需要提供数字会涵盖的范围，例如1－100这样子。

图片 ： 这里有两点需要地方需要注意

第一，在wordpress内里，只可以调整预览图的大小，若要调整图片在显示出来时的大小，可以像之前那样，先在function里，加入图片大小的设定：

add_image_size('custom－field', 400, 200, false );

然後用下方的方法，让你的custom－field图片可以跟从你设定的大小：

$image = get_field('post_type'); <!-- 跟文字一样，都先需要设定好称号--> $picture = $image['sizes']['custom－field'];

最後，在你想加入的地方，加入编码：

<img src="<?php echo $picture;?>" >

若只加入$ picture ,这只会显示图片的url（连结），所以也需要像文字那样，加入html编码。

第二，无论是alt 还是 title 还是 图片内容，我们均需要加入编码，指引系统，让它们能够正常显示出来。我们先在顶部加入以下编码：

$alt = $image['alt'];
$title = $image['title'];
$caption = $image['caption'];

接着在下方加入以下编码。alt 和 title ，只需要像平常html那样输入就可以了：

<img src="<?php echo $picture;?>" alt="<?php echo $alt;?>" title="<?php echo $title;?>">

caption则可以用跟文字一样的方法来加入：

<p class="wp-caption-text"><?php echo $caption; ?></p>

顺带一提，你也是可以像文字那样，加入if，确保有使用的时候才会出现，但由於用法是一样，这里就不再说了。

档案：情况跟图片相近，无论是档案url和档案名称，我们均需要加入编码，来指引系统让它们能正常显示

上方

$file = get_field('post_type');
$url = $file['url'];
$name = $file['filename'];

下方

<a href="<?php echo $picture;?>"<?php echo $name;?>

可视化编辑器：我们常会在wordpress里看到的文章编辑器

oEmbed ：可以要来直接放置任何在社交媒体版面发送的贴文连结，或在串流媒体网站如youtube发放的影片连结。
这里比较特别，不像其他，这是会直接显示你所放的内容，所以不用加入html，只需要在直接显示出来就可以，例如：

<?php echo get_field('embed');?>

选择、复选框、单选按钮、按钮群组：

他们功能上的差别并不大，但值得注意的是除了复选框肯定了必须要复选，选择可自由选择是否复选外，其他都只可以单选。

内里所有选项的格式，均需要为a:A这样子，前方的a是选项的数值，後者的则是标签，你可以在返回值一栏位里，选择自己需要怎样让电脑去提取选择了的

若希望允许可以留空的话，可以在空值（null）里，调整为『是』

使用方法参考：

<?php
$field = get_field_object('color');?>

<p> letter:<?php echo $field ; ?></p>                      

你会看到和之前的，差别并不大。

True与false，跟双方的相近，只是这次的选项只剩下了对与否两种选择。

使用方法参考：

<?php
$field = get_field_object('color');?>

<?php
if( get_field('color') ) {
    。。。。。。。。。。。
}