寫給網頁設計師-如何整合 HTML 頁面至 WordPress

目錄

身為一位視覺設計師與前端設計師,之所以會選擇 WordPress 來做為內容管理系統,基上有三個原因,第一是它很漂亮,第二是它非常漂亮,第三是它超級漂亮,

從事靠視覺的職業,先看外表是首要條件,雖然醜的東西有很多也好用,但既然有又漂亮又好用的東西,為何不選它? 

WordPress 最讓我驚豔的是,它已從早期 blog 管理系統的定位,逐漸走向真正的內容管理系統之路,許多改良過後的功能與介面,非常適合像我這種完全不會程式語言又只會看外表的設計師,在 WordPress 中,光是免費又漂亮的主題就早已多到滿出來~

而需要付費的就更不用講,woothemesstudiopressthemeforest,還有我最愛的elegantthemes,它可以直接在前端畫面中,切換背景顏色、底圖、pattern,最么壽的是,他們將近百種主題,一年只要繳 39 塊美金就可以使用,在台灣要花 2000 塊請人設計網站,大概只能找學生吧。

但回過頭來看,這些主題既漂亮又便宜,功能又完整,叫吃我們這行飯的人混屁啊!?好友阿毛寫了一篇十個讓設計師不被取代的能力,就客觀的生存條件而言,他寫的非常好,適合所有剛踏進這一行的人學習;

但我就比較蠢了,寫不出這麼多大道理來,很單純的就只是覺得「案!我也要搞出這樣漂亮的網頁」,會讓我從事這行,也就是這麼簡單,腦海中的想法可以實現出來,那爽度絕對是比在草原上騎馬並「已經滿了」還要爽。

而能夠不用會程式,還能架出後臺管理系統,這實在是有一種當神的快感(事實證明,這樣非常危險,還是要有一位工程師朋友較為安全),可以狂安裝模組完成各種功能,這爽度也絕對不會輸給在草原上騎馬並「漫出來」,當時就在想,如果能夠設計自己的主題不就爽翻天了,於是開始立刻動手了解 WordPress 的主題架構,結果東搞稿西稿稿,得到的成果是….死機。 

從無到有的自己生一套主題出來,實在是不符合網路世界中的分享精神,是地,沒錯,就是跟你想的一樣,去抓別人的來改,啟動修改大師機制,我找到了這一套主題-SimpleFolio,使用說明「The theme is released under GPL. You can use it for all your projects for free and without any restrictions. You may modify the theme as you wish.」 馬都停在你眼前了,那有不騎的道理(是草原上的馬),

我花了好大一番工夫(約十分鐘)才把裡面的樣式全部清光光,成為一個空白的主題web_templates,使用上非常簡單,與一般的主題安裝方法一樣,安裝完成後,我們就來開始整合設計好的 HTML 頁面與WordPress 吧!

基本觀念

在我小時的印象,變形金鋼是可以合體的,不知為何現在的真人版不行,反正現在都是一隻隻獨幹,沒有合體變超強的觀念,小時候的機器人卡通沒有合體就不可能贏得了敵人,而且要合體才夠帥,不然只靠獨幹都是廢渣一群; 

網頁程式的架構也是如此,一頁頁的做雖然還不到是廢渣,但建置所有頁面的 HTML 著實非常累人,以前的我傻傻不懂,一頁一頁慢慢建,當要修改所有頁面的 Slogan,不多,一個30頁的小網站,改一次大概二十分鐘,但如果瘋狂的改來改去,這二十分鐘就和二十年一樣久,滿腹的委屈和怒氣隨時會發洩在草原的馬身上。 

這時就需要來個大無敵合體,頭龜歸頭、腳歸腳、手歸手,各自負責合體機器人的每個部份,萬一頭殼壞了,不用全部拆掉修理,只要修頭就好,這就是俗稱的頭痛醫頭,腳痛醫腳,但前題是你的身體體質要好,不然合在一樣沒祿用。 

網頁程式架構的概念就是這樣說的(亂凹),先把統一會出現在所有頁面的元素抽離出來,像是選單、小功能等,然後有組織的安排,與原有的良好體質做結合,就是一臺超強的六神無主了,當要修改時,只要針對架構中的選單做修改即可,再也不用每一頁都要改,一次搞定,又開始覺得很爽了嗎?

準備好你的基本 HTML + CSS

這是廢話, 不然是鬼要跟 WordPress 整合嗎!?我目前都是使用 Dreamweaver的範本功能,只要用簡單的標籤,就可以把重覆的區塊獨立出來,相關的使用方式可以參考官方說明…..對,很難看,有需要的話我再寫一篇我是如何使用的,

但依照本人部落格的更新速度,很趕的你還是問谷姐的哥哥先。 總之在還沒認識 WordPress 之前,我都是用 Dreamweaver 範本先做,但現在有 WordPress 也可以用它來發展頁面,只是要先定義清楚架構的元素,其餘部份就好辦事了。

基本上你至少要先做首頁和一頁內頁,首頁基本上版型都會長得跟內頁不同,所以要先獨立做出來,而內頁就是要定義你這網站中所有頁面共同的元素,像次選單、次功能之類的區塊。

認識資料夾結構

WordPress 的資料夾結構是把所有關於主題的內容,放在 wp-content\themes\web_templates,而在 templates 的根目錄中一定要有一份 css 來做對應, web_templates 的內容很簡單,有兩個資料夾 images 和 js,顧名思義的放就對了,整個模版最主要的檔案是index.php,

它是定義整個網站所有頁面的主架構,也就是合體金鋼的身體, 有了這架構,才可以把各區塊像頭-header.php、手-pages.php等給拉進來,index.php的程式不會太難懂,如果你是本格派的html編輯員,大概就可以了解它在幹麻,簡單說就是把各部份給呼叫進來,

頭尾依序呼叫 header.php、sidebar.php、footer.php,是整站部落格的首頁 至於其它部份我大概稍微解釋一下 header.php — 控制所有頁面之間的東西,而在這邊我是把主選單和 logo 的 div 放在這個檔案之中,

老話一句,只要你做網頁是手寫 HTML 的人,這部份不難懂,都可以自行再調整,如果不是的話,那就先去 w3school 上上課吧。

這邊是控制所有頁面的title
這邊是控制外部檔案的連結路徑

通常我都是把自己寫的header部份放在這邊,比較需要注意的部份,就是點LOGO返回首頁的路徑可採用這樣的寫法(日後會常用到),還有就是我把主選單也是放在這邊,關於選單的做法wp有非常高明的解決辦法,稍後將會提到如何製作選單;

最後則是要記得該檔案不用把div標籤做結尾,它的結尾出現在footer.php裡面。 sidebar.php — 控制側邊欄位的區塊,可以從後臺的 外觀 > 模組來做新增。

在這頁面中除了可以看到Sidebar widget之外,還可以看到下方有一個Home widget,這跟我們待會要使用的模版有關係,稍後將會解釋。 footer.php — 控制頁尾資訊。 functions.php — 控制所有的功能,

這邊非常危險,沒事不要往裡面跑,會出人命的。 page.php — wp內建的網誌分頁模版,通常我都直接當成”網頁”來理解它,因為所有的頁面都是由它構成,另外它有呼叫Sidebar,只要在模組中有增加功能,都會在page中呈現。

以下兩個檔案是SimpleFolio獨有的,而它們也是建立頁面的關鍵 template-fullwidth.php — 網誌分頁的模版,稍待在新增頁面的時候會需要它,它是控制所有內頁區塊中的相同元素。聰明的你可能會想到它跟page.php有何不同,

簡單說,page.php有呼叫sidebar而它沒有,所以在一些不想要有sidebar或是想自行設計側邊欄的頁面上,就可以使用這套模版。

沒有側邊欄
有側邊欄

template-home.php — 這是 SimpleFolio 的客製化首頁,包含一個 slider banner 和可以用模組控制的首頁區塊。

首頁輪播橫幅以及區塊顯示 Home widget — 此功能與Sidebar完全相同,差別在於它是控制template-home.php首頁的下方區塊。

可以套用現成外掛功能或是自行新增html定義標籤。

建立所有頁面 HTML

在這邊我遇過的有兩種可能,第一種是全部的頁面你都已經用 HTML 全部寫完了,剩下的要把它們都倒進 WordPress 裡面去;第二種是只完成基本的頁面,譬如首頁或單一內頁,而內容需要從 WordPress 進行建置。

這兩種情況都會發生,而且是夾雜在開發過程中,原因在於縱使你寫好所有的頁面的 HTML,可能會因為某些功能需要安裝外掛,而這外掛原有的設計風格跟你的網站差了十萬八千里,所以要把外掛的介面做調整。

而後者的情況則更為常見,處理這些情況的首要條件,就是先把網站地圖中的頁面用新增網誌分頁的方式建立出來,再把 HTML 寫入, 在這一階段只要記住一個要點,那就是只要考慮 HTML 結構的正確性,CSS 的部份先拋諸腦後吧!以下是實作範例:

一、攤開你的網站架構圖

釐清該有的頁面與程式功能:

原則上,盡量先把已確定頁面建置完成,然而在實務上,變動性總是可能會有,因此假設目前我們只有第一層的頁面項目來進行建置。

關於我們與服務項目通常多為 HTML 即可,而企業部落格是為了要展現用 WordPress 架設部落格有多麼的簡單(它本身就是BLOG系統),最後的聯絡我們則是要示範採用外掛的功能如何整合在我們的設計之中。

二、安裝SimpleFolio

將稍早下載的 web_templates.zip 安裝於佈景主題中,安裝完成後可以在後臺選單中看到 theme options。

這些選項主要在控制主題的 title、meta、ico 等相關資訊,但基本上我很少從這邊修改這些資訊,大部份還是從程式碼直接改,而這頁的設定完全不用理會它也無所謂,我們要的只是它的模版功能。

三、安裝 filosofo-home-page-control 外掛

由此下載 這是控制網站的首頁以及部落格該由那一頁分頁呈現。 

在一般的情況下,WordPress 的首頁都會是 index.php,而這首頁是以部落格的方式來呈現,現在我們不需要它來當做我們的首頁,而是用我們自己新增的分頁來當作首頁,就可以用這外掛來設定。

另外它還可以指定原本部落格首頁的路徑,是非常方便的工具。

2011-10-28 新增

感謝香腸炒魷魚的香腸大大告知,原來在設定 > 閱讀裡面,就直接有可以變更網站首頁的功能,現在才知道原來就有內建,這樣就不需要再搞外掛了,再次感謝香腸大大的提供! 

四、新增網誌分頁

將以上前置作業完成後,接下來就開始增加頁面,根據前的架構圖,我們要增加的頁面有:網站首頁、關於我們、服務項目與聯絡我們,而企業部落格就是原本 WordPress 的部落格,所以無須再新增分頁。

在左側選單點選網誌分頁的新增網誌分頁,並在標題欄的地方輸入網站首頁,再把你想要插入的 HTML 寫在如圖示中,記得要把右上角的頁籤切換到 HTML 上。 

另外要注意的地方,就是在右側有模版的選項,預設模版指的是 page.php,也就是有包含 sidebar.php 的分頁,而 Home 則是 SimpleFolio 的客製化首頁,也就是上述 template-home.php 的模版,最後的空白模版則是沒有 sidebar.phptemplate-fullwidth.php

如果你已經有寫好完整的首頁 HTML,可以選擇空白模版來把它們貼進去,我現在手上沒東西,所以就選擇 Home 來當我的首頁。

五、增加其它頁面

以此類推,關於我們和服務項目也是依照這樣的方式來建置,然後依照你的需求來選擇模版,上述未提到的 Portfolio 和 Redirect 應用面較少,故無詳加解釋,最後的聯絡我們需要套用外掛程式,步驟與其它頁面雷同

一樣的步驟新增網誌分頁 接下來,我們來安裝我用過最強大的表單外掛 Contact Form 7

安裝完成後,可以在左方工具列找到聯絡表單>編輯的選項,即可進入表單的設計頁面

第一步,先找到上方桃紅色的按鈕-建立新聯絡表單 

選擇將樣新增的表單語系,如果是中文的話,就直接點選建立新聯絡表單

幫這個表單取個名字,完成後點選右邊的儲存:

完成後會看到這個畫面,接下來只要把這一段複製下來: 

貼到分頁聯絡我們中,這樣表單功能就能完成了,回到聯絡表單的部份,我們來把欄位好好設定一下:

在編輯表單的欄位中,左方為html的區域,右方則是要新增的表單欄位 

在這欄位中,先把要呈現的 HTML 寫在這邊,通常是欄位名稱,或是必填欄位的註記,而有 [] 的部份,則是會從右側的標籤產生器產出文字欄位,可設定是否為必填欄位、讓 CSS 辨識的 id 或 class 等,當相關欄位設定好時,再把咖啡色中的代碼複製起來,貼到左方的html區塊,這樣就完成了第一個文字輸入欄位

這外掛還有提供其它表單欄位,像是下拉選單、文字區塊、checkbox等各種欄位,甚至連驗證碼功能都有,一般表單能想的到的功能,幾乎都全部包辦了,這就是我為什麼會強力推薦此套外掛的原因,它實在是太強大了啊!!!

接著我們要設定發送出的郵件內容,Contact Form 7 提供發送至兩組電子郵件,可惜有點少,能夠無限制新增的話就更完美了,但基本需求至少能夠用,有時間的話我看能不能再修改出可以選擇同時發送更多數量的電子郵件。

這邊是設定收件人與寄件人欄位,收件人可以寫自己的mail,其它欄位它會自行帶入相對應的參數,如無特別需求可以不用到到它。

而右邊的部份則是填寫我們收到的郵件的內容,同樣的基本內容它都會帶入原有的參數,我們只要針對郵件內文進行編輯即可。

以上步驟都完成後,記得要點選頁面最右下方的儲存,這樣就大功告成了,一開始貼進分頁聯絡們的參數完全不用動,我們只要在這邊修改完儲存後,自動會在聯絡我們的頁面進行更新,表單設計就完成了。

六、增加企業部落格文章

新增文章功能 企業部落格的內容新增方式,是要以文章為主體,新增方法如下:

在左方工具列找到文章 > 新增文章,再輸入標題與文章內容,與分頁不同的是,它沒有模版可以選擇,另外它還可以對文章進行分類與下標籤,這對於網站的搜尋引擎最佳化作業提供運用的空間,完成後點選右方藍色的發表按鈕,新文章就可以發表完成。

七、設定網站起始首頁與部落格網址

運用外掛 Home Page Control 現在我們已經完成的頁面有網站首頁、關於我們、服務項目、聯絡我們,以及剛剛新增部落格的幾篇文章,現在試著連到網站首頁,會發現是以部落格為主要頁面,而不是我們所設計的網站首頁,這時就需要工具來幫忙設定一下,而這工具就是我們之前安裝的 Home Page Control。

在選擇首頁的部份,點選下拉選單,會發現有我們剛剛所建立的四頁分頁,網站首頁、關於我們、服務項目以及聯絡我們,只要選擇網站首頁,按下儲存後,再回到首頁查看,就會發現我們已經成功改變首頁為我們自己設定的網站首頁了。

而自定部落格目錄名稱則是把網址設成你自己想要的,這名稱一定要設,不然你就沒有網址可以連到你的部落格,另外順帶一提網址的結構,我個人是喜歡用我自己命名的分頁名稱做為網址結尾,看起來清爽又乾淨,

從左方工具選單設定 > 固定網址,勾選最後一個自訂結構,並輸入/%postname%/,這樣我們就可以回去網誌分頁設定目錄名稱

點選編輯,就可以更改目錄名稱,建議最好是用英文,像聯絡我們就用 contact 簡單易懂的單字。看到這邊各位應該知道,這目錄名稱並不是我們通常所使用的資料夾名稱,而是可自行命名的,所以這名稱不用真的符合資料夾的名稱。

能夠做到這邊,基本上網站已經完成八成了,剩下最後的關鍵—導覽列的設定。

設定導覽列

在 WordPress 3.0 的版本開始,在左方的工具列 > 外觀,找的到選單的選項,如果你沒看到的話,趕緊更新一下版本吧,因為這是 WordPress 正式邁向內容管理系統 (CMS) 的重大一步,就是因為這超級無敵好用的內建選單功能。

以我用過 Xoops 和 Joomla 的經驗來說,WordPress 的選單設定實在是設計的最傑出的,簡單說,只有WordPress 是從「非工程師」的角度來設計所有的設定流程。

然而雖然 3.0 版有內建的選單功能,但是你安裝的佈景主題也必須要有設定選單的函式,在這篇文章所提供的這份模版主題,我已經有把它加入選單功能,增加的方法需要修改function.php,對,就是之前我說沒事不要進來,進來會出人命的地方。

所以我已經設定好兩組選單,一個是在 header 的主選單組,一個是在 footer 的頁尾選單組,其它類型的選單像是次選單我們可以用 Sidebar 來設定,因此基本上要動到 fucntion.php 的機會不高,但我相信各位都有像魯夫一樣不去冒險會死掉的精神,或是有時需要增加特定選單的狀況,我稍後會介紹該如何新增一組選單組。

正常的做法,在我們網誌分頁已經都設定好的同時,相對應的選項程式也會自行產出,我們只要把這些選項加到選單組即可。開始建立之前,我把先把顯示選項調整如下圖。

在右上角有一個顯示選項,點下去時上方欄位會整個展開依照圖中選項來勾選,裡面的設定包含是否要顯示選單的 id 或 class 名,以及連結目標 (target) 等等,並把不必要的欄位隱藏,這樣比較好辦事。 

第一步先建立你的選單組,最好是用英文命名,因為這會是css辨識選單組的名稱。 

我建立了一個選單組名為 main,左側的佈景主題位置就是可以選擇要把選單組顯示在那一個地方,而這些位置,是透過 PHP 的一段語法所控制的,主選單位置語法位於 header.php 與頁尾選單則在footer.php 裡面。

假設現在我們要把剛剛新增的選單組 main 放在主選單的位置,只要在佈景主題位置主選單的下拉清單就可以看到我們所新增的main,選擇它按儲存,這樣就完成選單組的位置安排了。 

如圖選擇剛剛所建立的選單組 main 即可 決定好位置之後,那選單組的選項呢?聰明的你一定有看到左下方的網誌分頁,我們剛剛所建立的分頁,都顯示在這邊。

按選擇全部,並新增至選單,最後儲存選單,不到三秒,選單就搞定了,但是順序有點亂,而且還沒有看到最重要的企業部落格選單,接下來,我們做自訂鍊結的部份。

還記得之前我們在 Home-Page Control 所設定的部落格目錄嗎?先開個新網頁,去連到你的部落格,譬如這是我的部落格網址,https://oberonlai.blog,把它複製下來。

把網址貼到鍊結網址的欄位中,並把選項名稱命名為企業部落格,最後按新增至選單,就完成部落格的連結了。

依照這邏輯,看你是想連 Google 還是 Yahoo 都隨便你,只要把網址貼進去就好,當選項都成功加入選單組之後,我們再來把它整理一下。 

這是目前的選單順序,我看它很不順眼,我想把網站首頁放第一個、然後是關於我們、服務項目…,最後是聯絡我們,調整的方法非常簡單也直覺,就是脫拖一下這麼簡單,第一次看到這種 UI 出現在 WordPress 時,感動的都快要掉淚了。

特別是最近在用 Xoops,還要填數字來改變順序的蠢方法比起來,WordPress 根本就是佛心來的,另外也可以用拖曳來決定層級,實在是直覺到爆炸。 

按下選項右邊的小三角型,會出現一些選項,包含要讓css辨識名稱,或是網頁的開啟目標都可以設在這邊,每個選項都可以獨立設定,如果要用圖片做選單就非常方便了。 

完成選單順序,記得點儲存選單,就這樣,打完收工。 其它類型的選單,像是次選單或功能選單等等,我們一律都可以用原有的sidebar來解決。sidebar 本來是 WordPress 設計來建立一些瀏覽部落格的輔助工具,在這個版本之中,也可以把選單組加入到 sidebar 中,這樣可以更方便的來控制次選單。 接著我們再來新增一組關於我們的子選單,新增選單組請參考上面的步驟。 

我新增了選單組叫做 sub-about,裡面包含了兩個選單,公司歷史與公司文化。 接著選擇左方工具列>外觀>模組,就會看到可以放在sidebar的所有功能。 

在這邊可以看到許多部落格會常用到的功能,像是文章彙整、近期迴響等功能,這些模組你有空的自己玩看看,當然也可以用裝外掛的方式進行擴充。 

現在我們只要找到自訂選單,然後把它優雅的拖曳到 Sidebar Widget 欄位中, 然後就會看到如圖中的選項,如果沒有看到請重新整理一下即可,給子選單一個標題,然後用下拉選單選擇我們剛剛建立的選單組sub-about,完成後按下儲存,即成功新增子選單到 sidebar 中。

假設我們把其它頁面的子選單也都完成了,要來陸續增加到 sidebar之中,但你一定會發現,sidebar 雖然可以增加很多組選單組,去前臺的看的時候,會發現每一個分頁都是共用所有一樣的 sidebar,也就是說,在關於我們可以看到服務項目的子選單,在服務項目也可以看到關於我們的子選單,但這世界不應該是這樣的啊啊啊啊!

當有人說一樣的東西完美無缺的時候,請小心這個人,它不是業務員就是購物頻道主持人,但我都不是,所以我要在這邊來講講 WordPress 的壞話,那就是他無法從模組這邊設定我那一個分頁要套用那一個模組,這是內容管理系統的基本功能,WordPress 如果要朝標準的 CMS 發展,就不能不加入這樣的功能。

之所以抱怨這麼多,是因為之前真的被它玩到了,為了解決不同分頁有不同模組的問題,我甚至一度想直接把次選單做在網誌分頁裡面,把天殺的 sidebar 踢的遠遠的,雖然很蠢,但至少控制權在自己手上。

後來谷了許多資料,光是這種功能要怎麼下關鍵字查詢就已經夠難了,有找到的多半不是我要的效果,最後在卡了將近三天左右,總算找到了不甚完美的解決辦法,就是安裝一個外掛,叫做 Widget logic。 

以一般安裝外掛的方式安裝,完成後會在模組的 Sidebar Widget 裡面,再展開其中一個我們所做的選單組,就會發現多了一個欄位叫做 widget logic 大家一定會困惑,單單多了一個這樣的欄位,要如何去判斷那一頁該出現相對應的sidebar,而這也是為何它不是完美解的原因。

因為它要自行輸入判斷的語法…..暈~ 艾德的部落格天空是我找到這個解決辦法的地方,沒有他我現在大概還在原地吃屎,他提供了一些判斷的語法。 

看似有點複雜但實際上很好懂,我們想要的功能在第三點 is_page(“分頁名稱”) ,我們把網誌分頁網址的結尾,也就是我們自己命名的名稱當做判斷的依據,

分頁「關於我們」叫做 aboutus,那就回到模組的 widget logic 中,寫 is_page(“aboutus”) ,就是這樣 如果是同一組選單組,想要同時出現在兩個或三個分頁中該怎麼辦?

我嘗試在 Google Analytics 裡面需要常常用到但也是把我搞得半死的正規表示法也就是你的鍵盤的shift+\,所以如果我想讓同一個選單組出現在兩個分頁中,只要寫成這樣

is_page("aboutus") || is_page("contact) 

依照以上的解法,總算可以這個問題,但理想中還是希望可在設定 Sidebar Widget 的同時,多出一個欄位選擇出現位置,使用上會較為直覺,如果各位知道有更好的方法請務必讓我知道,不然只能期待下個版本推出時能夠有所改善了。

關於選單的部份,只要依循著上述的使用流程,基本上都能完成我們所需要的功能,但有時總是會有例外的情況,所以我再把關於wordpress的選單設定,解釋其程式碼所負責的部份,讓日後各位可針對自己的需求來修改。 首先先打開 function.php,可以在第三行找到一個註解-增加選單功能。

這邊有句判斷式,當函式 register_nav_menus 存在時,增加一組陣列,第一個資料叫做 header-menu,辨識的名稱為主選單,第二個資料叫做 footer-menu,名稱為頁尾選單,大家在看這一段的時候,重點就是 header-menu 和 footer-menu,而它們的名稱有沒有似曾相識?

這兩個名字主選單與頁尾選單就是定義在這一頁之中會出現的佈景主題位置,在 funtion.php 之中定義的這兩個選單,主要是將選單的功能開啟,雖然它是以選單的功能和位置來命名,但在這邊的設定最主要是在告訴系統我們有兩套選單。

“header-memu” => “主選單” 引號中的名稱皆可自行定義,前面的英文是在調用這組選單時的辨識名稱,而後面的中文字則如上述所提到的是控制後臺選單的位置名稱,如果你覺得兩組不夠應付你網站中的選單,只要在這邊增加 “your-menu” => “你的選單” 即可。

接著我們來看在開啟選單功能後,該如何把這些選單定義到我們希望它出現的位置,先以 header-menu為例,這是主選單的部份,我習慣的做法是把主選單放在 header.php,所以先打開這個檔案, 在第55行可以找到定義選單。 

wp_nav_menu 是在 WordPress 中調用選單的函式,後面接的 “theme_location” => “header-menu” 則是代表套用這個佈景主題所擁有的選單,也就是我們自己定義的 header-menu。 以此類推,foot-menu 也是一樣的寫法,打開 footer.php,在第5行可以看到同樣的語法 

跟上面一樣的 wp_nav_menu,只是換成 footer-menu 透過以上的解說,我們就能彈性控制選單的位置,譬如今天我的主選單是在側欄而不是在上方,就可以把 wp_nav_menu 這一段整行剪下貼到 index.php 裡面的某個你自己定義的 div 中,或是要定義一個頁面中的常用功能選單,都可以運用這樣的方式來做設定,相信已能滿足絕大多數的需求。

設計 CSS

當把所有網誌分頁的 HTML 都建置完成後,最後再來設計 CSS。WordPress 的 CSS 很單純,就是一個檔案 style.css,通常我習慣的做法是,使用 Chrome 瀏覽器的檢視元素,打開頁面,在空白的地方按右鍵,選擇最下方的檢視元素,當滑鼠移到某段div時,網頁中會出現相對應的區塊。

而在檢視元素中點擊某段標籤,它也會呈現出相對應的 CSS,並且可以勾選或關閉來即時檢視 CSS 的套用效果,十分的方便,要修改時再去尋找相對應的 id 或 class 即可。 在 style.css 的檔案中,我把初始化的語法用 import 來匯入 reset.css,如果各位有自己的初始化語法,就貼在 reset.css 即可,剩下的就是在把你寫好的 CSS 全部貼過來吧!

結論

每一套 CMS 都有自己的特性,也都有自己的支持者,但以一位網頁設計師的角度而言,我還是會推薦WordPress,因為它建立頁面的方式最直覺,在選單的控制上也非常彈性,外掛的數量也是多到爆炸,要能夠讓我相信一套 CMS 很好用,只要頁面好增加,選單好控制就夠了,其它都是附屬的附加價值。

不像 Xoops 增加頁面是要用模組的概念,沒有裝模組你就沒有頁面,而 Joomla 則是要分單元,分類、文章,選單的控制更是麻煩,相信有做過的人就能理解我在說什麼。

所以為了讓還未碰觸過 CMS 的朋友們少走些冤枉路,我以自身的經驗來分享 WordPress 如何快速的與我們現有的作業結合,希望能對大家有所幫助,有任何疑問或是有更好的做法也歡迎留言給我,畢竟我也完全沒學過程式,很多自己摸索的不一定是最好的方法,還請各位不吝指教,先感謝各位了!

文章標籤CSSFormHTML

目錄

賴俊吾 / Oberon Lai
賴俊吾 / Oberon Lai

現為全職 WordPress 工程師,網站開發經歷 11 年,專攻前端工程與 WordPress 佈景主題、外掛客製化開發

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!

覺得文章寫得好再幫我鼓個掌吧!

相關文章

無痛上手 WordPress 樣式客製化

如果你有架設過 WordPress 網站並且購買過國外佈景主題就知道,只要換上了中文內容就會大跑版,不是標題太大就是內文太小,整個...

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

專注於分享 WordPress 開發、接案技巧、專案管理等自由工作者必備知識與心得

© 2022 想點創意科技有限公司

Designed by Hend Design | 隱私權政策

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!