•  寫作緣由: 

  建立自定義的模板,再配合子佈景主題的建構能力,就能開始建立一系列的能力,讓您的網頁架構,無論是外觀或功能,以及網頁內容傳輸速度的效能,對於廣大網友更具吸引力。在網頁的背後,諸多無形的設定選項,也架構了您在搜尋引擎優化改善的更多可能性,對於網站經營,搜尋排名,都將是非常棒的敲門磚。

  在原本的WordPress預設模板中,於網頁(page)的部份,模板的選項只有WordPress的【預設模板】與Page Builder的【Builder Template】預設模板,如下圖所示;

create-new-template-choices of default templates
系統程式與外掛原本提供的預設模板

  於文章(post)的部份,模板的選項只有WordPress的【預設模板】,別無其他選擇,因為沒得選擇,所以,原本介於【標籤】與【共享】兩個選項方框之間的的【模板選項】方框,也就直接消失,如下圖所示。

create-new-template-no choice of template for post
架站軟體提供給文章的模板單一別無選擇

  而如果您的有關網頁與文章美工編輯排版軟體,像作者一樣選用名為Elementor的外掛程式,那麼,關於網頁與文章的模板選項,就會分別多了【Elementor全寬】與【Elementor畫布】兩個選項,網頁的模板選擇就會如下圖所示;

create-new-template-choices of templates
啟用Elementor外掛之後提供page另外兩款模板選擇

  而文章的模板選擇,則會如下圖所示。

啟用Elementor外掛之後post也多了兩款模板的選擇

  然而,無論是上述哪一種模板,都會分別隨著WordPress架站軟體或Elementor外掛程式的版本更新,而會使得您在模板所作的任何變更,化為烏有,所有的努力與時間,全都瞬間化為過眼雲煙。

  為了防止這麼悲催的慘劇發生,也為了站在巨人的肩膀上,利用現有的主題背景製作模板,既不用受WordPress架站軟體或網頁文章排版編輯外掛程式的版本影響,也不受主題背景版本更新的影響,兩全其美的方式,就是建立子佈景主題,在利用子佈景主題建立新模板。

  關於建立子佈景主題,其詳細步驟教學請參考【如何建立子佈景主題(child theme)?】乙文,即可豁然開朗,馬上練就相關必要武功絕學。

  而如何利用子佈景主題建立新模板,則是以下步驟教學的主要目的。有了建立新模板的能力之後,就可以善用WordPress所釋出的免費CSS程式庫的諸多功能之外,也可以針對搜尋引擎所渴求的結構化資料(structured data)提供正確且必要的資訊,對您網站、網頁與文章,乃至產品的搜尋引擎優化都將有實質的助益。

  那麼,我們就開始詳細的步驟教學吧!

  一般的模板,以文章或頁面而言,一開始,沒有特別指定的情況之下,預設模板幾乎都是名為【預設模板】的預設模板(聽起來很繞口吧?)。

  我們先示範編輯文章,一開始,在WordPress控制台敬請點擊左側邊欄的[【文章】【建立新文章】按鈕,則畫面會如下所示。此時,您如果好奇【模板】的相關設定對話框,則請將目光注視右側邊攔,

create-new-template-post editing page
WordPress控制台文章編輯頁面

  右側邊攔的組成,以方塊來看,由上而下依序是【發表】【分類】【標籤】,在下來就是模板方塊。

  為了作比較,目前是採用預設模板,所以除了文章標題,以及固定網址的設定之外,我們就先點擊【儲存為草稿】按鈕,儲存完畢之後,敬請點擊【預覽】按鈕,則畫面更新如下圖所示。

create-new-template-default blank post
預設的空白頁面畫面

  還記得不?我們剛剛只有設定文章的標題,還有該文章的固定網址,其他甚麼內容都是一片空白。所以,預覽一篇空白文章,其上出現了文章本體之外的選單,築韻集團識別標識,以及水平垂直兩排長串的各式各樣社群軟體圖示,還有出版日期,作者姓名與相片,....,這些其實都是預設模板所設定的。

  接下來,敬請打開notepad++文字|程式編輯軟體,輸入以下文字(複製+貼上,即可。),

/* Template Name: new-template
* Template Post Type: post, page, product
*/

/**
* @package Make
*/

  如下圖所示。

create-new-template-php snippets of template
新建模板程式片段

  然後,敬請存成【new-template.php】檔案,再將該檔案透過虛擬主機代管廠商的程式,例如,bluehost的【(File Manager)檔案管理員】,將該檔案上傳到【/wp-content/theme/您啟用的佈景主題】的目力,即可。

  接下來,您就可以在【文章】、【網頁】或【產品】的編輯頁面,開始使用新的,自定義的,名為【new-template】的模板,如下圖所示,即為新建的文章編輯頁面,所看到的模板選項。

create-new-template-select new template
點選新設模板new-template

  因為這個新的,名為【new-template】的模板,除了定義模板名稱,以及適用的網頁屬性之外,甚麼設定也沒有,而文章內容目前也是空白的,所以,誠如下圖所示,當然是一片空白。

create-new-template-blank post with blank template
內容與模板元件俱缺的空白文章頁面

  如果,您在剛剛notepad++編輯軟體,為名為【new-template.php】的程式,在最後一行【?>】之前,再新增以下一行指令:

get_header();

  如下圖所示。

內容與模板元件俱缺的空白文章頁面

  然後,敬請重複剛剛上傳檔案的動作,覆寫(overwrite)前一版本的【new-template.php】檔案,然後在新建文章的編輯頁面右側邊攔點擊【儲存為草稿】【預覽】按鈕,則會面就會更新,如下圖所示。

create-new-template-draft of blank post by new-template
新模板初稿所完成的半成品空白文章頁面

  所以,這個【get_header();】指令,會讓模板擷取網站識別以及選單的相關設定。

  如果,您以【檔案管理員】打開目前所使用的佈景主題目錄的【single.php】,如下圖所示。

create-new-template-original single.php
原本默認模板程式single.php的程式內容

  然後,避開該【single.php】檔案中的【head】的區段,如下圖所示。

create-new-template-head of single.php
原本默認模板程式single.php的head段落

  接下來,複製其【body】的區段,如下圖所示。然後,將此區段的程式碼貼在您剛剛所編輯的【new-template.php】檔案最後端,再將該編輯過的檔案重複前述的儲存上傳,一直到【預覽】的動作。

create-new-template-body of single.php
原本默認模板程式single.php的body段落

  於是,您的名為【new-template】的模板,便具備了原本【默認模板】的所有設定,可以用在包括【文章】、【網頁】或【產品】的編輯頁面,不只預設的【Page Builder】,就連【Elementor】這個您先曾下載啟用的網頁|文章工排版篇及軟體,也異體適用的新的,自定義的,不受往後WordPress架站軟體,主題佈景,乃至其他外掛程式改版更新的影響,完全受您全權掌控的模板設定。

  以下即為本網站啟用附屬於子佈景主題的自定義新模板【new-template】,在Elementor的編輯頁面,所呈現的完整畫面,如以下三張圖所示,供您參考。

create-new-template-blank post page-1
空白文章頁面的上段
create-new-template-blank post page-2
空白文章頁面的中段
create-new-template-blank post page-3
空白文章頁面的底段

  於是,又得再度恭喜您一次了!

  於是到此為止,您已經具備編寫模板程式的基本技能,所謂師父引進門,修行在個人,先祝福您囉!

免費註冊訂閱築韻集團專業文章
免費註冊訂閱築韻集團專業文章

    不想漏接下次的精采文章嗎?

    敬請點擊上方圖案,免費註冊免費訂閱築韻集團專業文章,以後只要有新作出刊,您的電子信箱就會馬上收到通知。感恩!

免費註冊訂閱築韻集團專業文章
免費註冊訂閱築韻集團專業文章

    不想漏接下次的精采文章嗎?

    敬請點擊上方圖案,免費註冊免費訂閱築韻集團專業文章,以後只要有新作出刊,您的電子信箱就會馬上收到通知。感恩!

總公司地址:台灣省新竹縣竹北市福興路1028巷1號

台中分公司:台灣省台中市北屯區崇德路二段462號9樓之一

聯絡人:張世忠先生(0939-061-556)

電子信箱:mark.chang.1031@gmail.com

築韻空間美學工坊臉書粉絲團

築韻出版社臉書粉絲團

築韻集團YOUTUBE影片頻道

築韻集團FLICKR相簿圖庫