試想想，你現在正在為一間酒店，製作一個網站，您需要為這間酒店加入訂房的畫面。當然，床數量，有沒有浴缸，包不包括早餐，這些重要的資訊，是必須包括的吧。也許你第一時間會想到的，就是直接輸入到文章裏。但有沒有一些更方便，可以一鍵解決，不用每篇都重複輸入，並且簡單地進行分類呢？當然是有的，這就是一個大家在初學時會比較少用的功能：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') ) {
    。。。。。。。。。。。
}