建立自定義的模板,再配合子佈景主題的建構能力,就能開始建立一系列的能力,讓您的網頁架構,無論是外觀或功能,以及網頁內容傳輸速度的效能,對於廣大網友更具吸引力。在網頁的背後,諸多無形的設定選項,也架構了您在搜尋引擎優化改善的更多可能性,對於網站經營,搜尋排名,都將是非常棒的敲門磚。
在原本的WordPress預設模板中,於網頁(page)的部份,模板的選項只有WordPress的【預設模板】與Page Builder的【Builder Template】預設模板,如下圖所示;
於文章(post)的部份,模板的選項只有WordPress的【預設模板】,別無其他選擇,因為沒得選擇,所以,原本介於【標籤】與【共享】兩個選項方框之間的的【模板選項】方框,也就直接消失,如下圖所示。
而如果您的有關網頁與文章美工編輯排版軟體,像作者一樣選用名為Elementor的外掛程式,那麼,關於網頁與文章的模板選項,就會分別多了【Elementor全寬】與【Elementor畫布】兩個選項,網頁的模板選擇就會如下圖所示;
而文章的模板選擇,則會如下圖所示。
然而,無論是上述哪一種模板,都會分別隨著WordPress架站軟體或Elementor外掛程式的版本更新,而會使得您在模板所作的任何變更,化為烏有,所有的努力與時間,全都瞬間化為過眼雲煙。
為了防止這麼悲催的慘劇發生,也為了站在巨人的肩膀上,利用現有的主題背景製作模板,既不用受WordPress架站軟體或網頁文章排版編輯外掛程式的版本影響,也不受主題背景版本更新的影響,兩全其美的方式,就是建立子佈景主題,在利用子佈景主題建立新模板。
關於建立子佈景主題,其詳細步驟教學請參考【如何建立子佈景主題(child theme)?】乙文,即可豁然開朗,馬上練就相關必要武功絕學。
而如何利用子佈景主題建立新模板,則是以下步驟教學的主要目的。有了建立新模板的能力之後,就可以善用WordPress所釋出的免費CSS程式庫的諸多功能之外,也可以針對搜尋引擎所渴求的結構化資料(structured data)提供正確且必要的資訊,對您網站、網頁與文章,乃至產品的搜尋引擎優化都將有實質的助益。
那麼,我們就開始詳細的步驟教學吧!
一般的模板,以文章或頁面而言,一開始,沒有特別指定的情況之下,預設模板幾乎都是名為【預設模板】的預設模板(聽起來很繞口吧?)。
我們先示範編輯文章,一開始,在WordPress控制台敬請點擊左側邊欄的[【文章】【建立新文章】按鈕,則畫面會如下所示。此時,您如果好奇【模板】的相關設定對話框,則請將目光注視右側邊攔,
右側邊攔的組成,以方塊來看,由上而下依序是【發表】【分類】【標籤】,在下來就是模板方塊。
為了作比較,目前是採用預設模板,所以除了文章標題,以及固定網址的設定之外,我們就先點擊【儲存為草稿】按鈕,儲存完畢之後,敬請點擊【預覽】按鈕,則畫面更新如下圖所示。
還記得不?我們剛剛只有設定文章的標題,還有該文章的固定網址,其他甚麼內容都是一片空白。所以,預覽一篇空白文章,其上出現了文章本體之外的選單,築韻集團識別標識,以及水平垂直兩排長串的各式各樣社群軟體圖示,還有出版日期,作者姓名與相片,....,這些其實都是預設模板所設定的。
接下來,敬請打開notepad++文字|程式編輯軟體,輸入以下文字(複製+貼上,即可。),
/* Template Name: new-template
* Template Post Type: post, page, product
*/
/**
* @package Make
*/
如下圖所示。
然後,敬請存成【new-template.php】檔案,再將該檔案透過虛擬主機代管廠商的程式,例如,bluehost的【(File Manager)檔案管理員】,將該檔案上傳到【/wp-content/theme/您啟用的佈景主題】的目力,即可。
接下來,您就可以在【文章】、【網頁】或【產品】的編輯頁面,開始使用新的,自定義的,名為【new-template】的模板,如下圖所示,即為新建的文章編輯頁面,所看到的模板選項。
因為這個新的,名為【new-template】的模板,除了定義模板名稱,以及適用的網頁屬性之外,甚麼設定也沒有,而文章內容目前也是空白的,所以,誠如下圖所示,當然是一片空白。
如果,您在剛剛notepad++編輯軟體,為名為【new-template.php】的程式,在最後一行【?>】之前,再新增以下一行指令:
get_header();
如下圖所示。
然後,敬請重複剛剛上傳檔案的動作,覆寫(overwrite)前一版本的【new-template.php】檔案,然後在新建文章的編輯頁面右側邊攔點擊【儲存為草稿】【預覽】按鈕,則會面就會更新,如下圖所示。
所以,這個【get_header();】指令,會讓模板擷取網站識別以及選單的相關設定。
如果,您以【檔案管理員】打開目前所使用的佈景主題目錄的【single.php】,如下圖所示。
然後,避開該【single.php】檔案中的【head】的區段,如下圖所示。
接下來,複製其【body】的區段,如下圖所示。然後,將此區段的程式碼貼在您剛剛所編輯的【new-template.php】檔案最後端,再將該編輯過的檔案重複前述的儲存上傳,一直到【預覽】的動作。
於是,您的名為【new-template】的模板,便具備了原本【默認模板】的所有設定,可以用在包括【文章】、【網頁】或【產品】的編輯頁面,不只預設的【Page Builder】,就連【Elementor】這個您先曾下載啟用的網頁|文章工排版篇及軟體,也異體適用的新的,自定義的,不受往後WordPress架站軟體,主題佈景,乃至其他外掛程式改版更新的影響,完全受您全權掌控的模板設定。
以下即為本網站啟用附屬於子佈景主題的自定義新模板【new-template】,在Elementor的編輯頁面,所呈現的完整畫面,如以下三張圖所示,供您參考。
於是,又得再度恭喜您一次了!
於是到此為止,您已經具備編寫模板程式的基本技能,所謂師父引進門,修行在個人,先祝福您囉!
總公司地址:台灣省新竹縣竹北市福興路1028巷1號
台中分公司:台灣省台中市北屯區崇德路二段462號9樓之一
聯絡人:張世忠先生(0939-061-556)
電子信箱:mark.chang.1031@gmail.com