最近在YouTube頻道上做了一個問卷調查，徵詢關於想要學習的內容，選項與目前結果如下(歡迎參與問卷)：
- 新手WordPress架設 0%
- 各種外掛介紹與操作說明 8%
- WordPress客製化 75%
- VPS主機/Linux主機相關 17%
會訂閱我YouTube頻道的人可能也已經使用WordPress有一段時間了，或是後來已經對WordPress沒興趣所以沒有參與。因此選擇新手WordPress架設的人是零，最多人選WordPress客製化。但其實每個人對WordPress客製化的定義可能都不一樣，我也沒有能力講太高深的作法，就分享一些自己客製化過的案例就好。這篇文章提到的，就是我自己最早完成的客製化任務之一，拿來給新手看應該還算適合。希望看完能對WordPress客製化先有個大概的認知，知道自己大概會了哪些，要從哪裡開始學習。
任務說明
「批次加入自訂內容於所有文章下方」這裡我們要先說明一下：
- 批次：這裡指的是大量，如果只是一兩篇文章，那用文章編輯器直接填入自訂內容就可以了，也不需要用到下述的方法。由於文章數量很多，每篇文章個別打開後編輯再儲存離開，太勞心勞力。加上如果隔一段時間又需要再修改，會很累人。所以要能一次就把自訂內容全都加入，才算是完成任務。
- 自訂內容：這個部分我們簡單的用一句話跟一張圖，然後做上連結就好。
- 位置：這次我們是把自訂內容放在文章下方，是因為要介紹的方法裡頭，有幾個都只能放在文章下方(或上方)。要能自動偵測放在文章裡頭特定的位置，可以用外掛做就好，寫程式做就太進階了，目前先不考慮。而自動偵測可能不夠準確，若是要求比較高的話，建議事先在指定位置放入短代碼方便日後批次調整內容。
自訂內容的準備
HTML：這裡先簡單的放一句話跟一張圖片，並在圖片上加上連結
<div class="youtube300">
<h2>YouTube暢看方案</h2>
<a href="https://www.yogoeasy.com/product/youtube/" target="_blank"><img src="https://i.imgur.com/tgpIXXQ.png" width="390" height="682" class="alignnone" /></a>
</div>CSS：自訂的CSS可以貼到 WordPress後台->外觀->自訂，找到「附加的CSS」貼上。但這裡的欄位位置不大，如果需要寫比較多CSS，建議寫在文字檔案再用PHP來掛載(enqueue)，也可以搭配條件式判斷只在對應的條件下掛載CSS檔案。
.youtube300 {
text-align: center;
box-shadow: 2px 2px 10px #a3a3a3;
margin-top: 3%;
padding: 5%;
}
.youtube300 h2 {
font-size: 25px;
color: #2A569F;
}上面第一段CSS是把整個容器置中，並加上陰影與內外邊距，第二段則是針對文字大小與顏色做了調整。
透過附加內容外掛
WordPress剛好就有可以附加內容到文章的外掛，我找到兩個：
- Append Content：這套應該幾乎是量身定做的外掛，他也只能附加自訂內容在文章下方，別的位置都不行。有提供選項可以選擇要附加在文章或頁面或兩者都附加。
- Add Widget After Content：這套也是只能附加在內容的下方，但附加的對象不僅是文章或頁面，也包括了自訂文章類型。另外還提供了幾種方式來停用附加內容，像是個別文章內頁、根據文章分類、自訂文章類型與文章格式。最特別的是這個外掛附加內容的動作是透過小工具的方式，所以我們也可以直接拖曳現有的小工具來顯示，像是最新文章、標籤雲…等等的小工具都可以。
影片 – 透過附加內容外掛
透過廣告外掛
是的，沒看錯，就是透過插入廣告的外掛來插入自訂內容。其實除了有些插入廣告外掛可以直接支援Google Adsense廣告帳戶認證來方便插入廣告之外，主要插入廣告的功能不也是插入自訂內容？
這類的外掛很多，我們之前介紹過兩套：
- Ad Inserter 這套對新手而言比較好上手，另外一套 Advanced Ads 有一些操作的邏輯，但這套Ad Inserter就很直覺。這套還有一個好處是他能根據不同的條件自動插入內容到文章內文不同的位置，像是 文章摘要之後、圖片之後…等等的條件。(影片介紹)
- Advanced Ads 這套的介面比較好看，但要花點時間熟悉。
透過短代碼(外掛)
短代碼就像是微軟Office軟體裡頭的巨集，可以把要執行的動作事先放入短代碼裡頭，使用者就只要把短代碼放入文章內文中，就可以顯示執行的結果。短代碼解決了WordPress文章編輯器不能用來寫PHP程式碼的問題，能做的事情很多，顯示像我們這樣簡單的自訂內容還算是大才小用。
原本短代碼的製作是要透過寫PHP程式碼來完成，但也有外掛可以幫我們製作短代碼，上一段提到的Ad Inserter就可以做到。
不過短代碼放入文章指定位置需要事先就放入，如果下次有這種需求，可以事先規劃好。
註：短代碼也可以透過後面介紹的方法自動插入文章中，但在這次情況下，可以直接把自訂內容自動插入文章，不需要做成短代碼再插入，有點畫蛇添足。但學習短代碼的製作跟使用還是相當重要的，雖然在這個例子中短代碼不會是好的解決方式，但在其他客製化經常會有機會用到。
另外一個可以製作短代碼的外掛是 Shortcoder，比起Ad Inserter，Shortcoder 能製作出帶參數的短代碼，能應用在更多的情境上。
透過短代碼(程式碼)
自行寫PHP程式碼製作短代碼主要是透過 add_shortcode 這個WordPress內建的函式
透過程式碼(filter)
WordPress的 filter提供了讓人方便將原本的資料做修改的機制，但不是所有的資料都會有，必須是開發者在原本的資料上加上 apply_filter，這筆資料才能透過 add_filter來替換。
以這個在文章下方附加自訂內容的例子來說，我們要對文章內容的資料做修改的方式如下：
add_filter( 'the_content', 'yogoeasy_append_content_filter' );
function yogoeasy_append_content_filter( $content ){
if ( is_single() && 'post' == get_post_type() ) {
$content .= '
<div class="youtube300">
<h2>YouTube暢看方案</h2>
<a href="https://www.yogoeasy.com/product/youtube/" target="_blank"><img src="https://i.imgur.com/tgpIXXQ.png" width="390" height="682" class="alignnone" /></a>
</div>';
} return $content;
}這裡我們加入了一個條件式判斷只針對「文章」的內容加上自訂內容，「頁面」或是其他自訂文章類型不會加上。
而我們能這樣做的原因是在WordPress的 wp-includes/post-template.php 這個檔案裡這裡
在透過 get_the_content() 函式取得文章內容資料 $content 後，有在 $content 上加上了apply_filter , filter的名稱是 the_content 。
透過程式碼(hook)
WordPress的 hook (勾點)，就好像一些程式語言裡頭 include 那樣，可以把別的檔案的程式碼包進來執行。但 include是主動把檔案包進來，hook 則是被動的讓開發者可以將程式碼片段勾上去，勾上去的時候還可以設定優先順序，當不同開發者都想把自己的程式碼勾到同一個勾點的時候，就可以斟酌是要設定早一點執行還是晚一點執行。另外 hook跟 include 不同的地方是 include的對象是檔案，而 hook是 function(函式)。
要將我們的自訂內容透過hook顯示在文章下方，首先要找到文章下方有什麼hook可以用，在WordPress的架構裡頭顯示頁面是靠佈景主題，所以要去佈景主題的檔案裡頭去找佈景主題開發者有沒有在文章下方預留hook。以我們課程有提到的Astra佈景主題來說，他有提供一個頁面(按此觀看)，把文章內頁所有的hook列出來，我們就不需要去程式碼裡頭找。打開頁面後，可以看到這篇文章內容下方有兩個hook可以用，一個是 astra_entry_content_after ，另外一個是 astra_entry_bottom 。如果我們想透過 astra_entry_bottom 這個hook來顯示我們的自訂內容，作法如下：
add_action('astra_entry_bottom','yogoeasy_append_content_hook');
function yogoeasy_append_content_hook(){
echo '
<div class="youtube300">
<h2>YouTube暢看方案</h2>
<a href="https://www.yogoeasy.com/product/youtube/" target="_blank"><img src="https://i.imgur.com/tgpIXXQ.png" width="390" height="682" class="alignnone" /></a>
</div>';
}或是不要用echo的方式，改成離開PHP，個人比較喜歡這樣來編輯HTML：
add_action('astra_entry_bottom','yogoeasy_append_content_hook');
function yogoeasy_append_content_hook(){
?>
<div class="youtube300">
<h2>YouTube暢看方案</h2>
<a href="https://www.yogoeasy.com/product/youtube/" target="_blank"><img src="https://i.imgur.com/tgpIXXQ.png" width="390" height="682" class="alignnone" /></a>
</div>
<?php
}如果你用的是其他的佈景主題只要把上述程式碼片段中的 astra_entry_bottom 換成你在佈景主題中找到的 hook名稱即可，其他不變。
Astra佈景主題還提供外掛讓人不需要自己寫程式碼，而是透過介面來設定。有免費版外掛跟付費版外掛兩種，可以參考之前的文章：
免費外掛 – Astra Hooks介紹
自訂版面配置-進階Hooks(付費版)
至於要怎樣找到對應的 hook呢？首先，跟 filter 一樣，也是需要倚賴佈景主題開發者放入 do_action 。所以如果原本沒有預留 hook的話，再怎麼找也找不到。
先講如果有的話，可以透過 Show Hooks 這個外掛來顯示所在頁面上所有可用的 hook ( Query Monitor 也是可以顯示 hooks ，但 Show Hooks 比較簡潔 )
如果佈景主題原本沒有預留 hook呢？ 那就可以透過子主題的特性來將父主題的檔案複製一份到子主題之後自己加。但千萬不要直接加在父主題，因為只要佈景主題更新後，所有加上去的資料就都不見了。
Filter 跟 Hook 的比較
這先預留位置，過幾天再補上。
結語
前面說過了，客製化的範圍涵蓋很廣。
以這個例子來說，簡單的客製化就是手動打開文章編輯器，放入 HTML再透過 CSS語法美化外觀，必要時再透過JavaScript做一些變化或互動。
到此都是屬於前端，需要會的就是 HTML 跟 CSS ，這兩個務必要熟悉，除了這兩者是網頁呈現的主角之外，JavaScript會大量用到 HTML 跟 CSS，若不先熟悉，也難開始學習JavaScript。但不是說一定要先會JavaScript才能繼續後面的PHP，所以JavaScript可以視自己的狀況學習。
接下來就是PHP，這是網站後端程式，只能在主機上執行，訪客不會看到網站的PHP程式碼。上述所用到的 filter, hook 都是PHP程式語法。
聽起來好像要學的東西很多，但其實這些東西都是可以透過零碎的學習方式，然後再一步步的累積。
比方說 HTML的標籤有100多，但我們並不需要一次把100多個學完。先把經常用到的 放圖片、加連結…學起來。WordPress 架構下的 CSS 初學者最開始會想學的其中之一就是怎樣隱藏 display:none ，PHP則是可以先學 echo 出要放入的 HTML就好，至於那些 hook, filter 則是有現成的可以複製貼上。所以不用太擔心要學的東西太多，按照我分享的案例實際做做看，或許會發現沒有想像中那麼難。
