寫給網頁設計師-如何整合html頁面至WordPress(二)

07/20 | wordpress分享留言(4)

<三>建立所有頁面html

在這邊我遇過的有兩種可能,第一種是全部的頁面你都已經用html全部寫完了,剩下的要把它們都倒進wordpress裡面去;第二種是只完成基本的頁面,譬如首頁或單一內頁,而內容需要從wordpress進行建置。這兩種情況都會發生,而且是夾雜在開發過程中,

原因在於縱使你寫好所有的頁面的html,可能會因為某些功能需要安裝外掛,而這外掛原有的設計風格跟你的網站差了十萬八千里,所以要把外掛的介面做調整,而後者的情況則更為常見,處理這些情況的首要條件,就是先把網站地圖中的頁面用新增網誌分頁的方式建立出來,再把html寫入,

在這一階段只要記住一個要點,那就是只要考慮html結構的正確性,css的部份先拋諸腦後吧!以下是實作範例:

1. 攤開你的網站架構圖 — 釐清該有的頁面與程式功能

範例說明的網站地圖

原則上,盡量先把已確定頁面建置完成,然而在實務上,變動性總是可能會有,因此假設目前我們只有第一層的頁面項目來進行建置。關於我們與服務項目通常多為html即可,而企業部落格是為了要展現用wordpress架設部落格有多麼的簡單(它本身就是BLOG系統),最後的聯絡我們則是要示範採用外掛的功能如何整合在我們的設計之中。

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

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

3. 安裝filosofo-home-page-control外掛 — 由此下載 這是控制網站的首頁以及部落格該由那一頁分頁呈現。

控制首頁的外掛
在一般的情況下,wordpress的首頁都會是index.php,而這首頁是以部落格的方式來呈現,現在我們不需要它來當做我們的首頁,而是用我們自己新增的分頁來當作首頁,就可以用這外掛來設定,另外它還可以指定原本部落格首頁的路徑,是非常方便的工具。

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

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

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

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

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

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

新增聯絡我們頁面
一樣的步驟新增網誌分頁

接下來,我們來安裝我用過最強大的表單外掛-Contact Form 7,由此下載。

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

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

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

輸入標題
幫這個表單取個名字,完成後點選右邊的儲存

複製程式碼到分頁中
完成後會看到這個畫面,接下來只要把這一段複製下來

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

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

編寫html欄位
在這欄位中,先把要呈現的html寫在這邊,通常是欄位名稱,或是必填欄位的註記,而有[]的部份,則是會從右側的標籤產生器產出

標籤產生器
文字欄位,可設定是否為必填欄位、讓css辨識的id或class等,當相關欄位設定好時,再把咖啡色中的代碼複製起來,貼到左方的html區塊,這樣就完成了第一個文字輸入欄位。

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

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

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

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

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

 

 

4 篇留言

  1. Hayden Goo表示:

    您好博客主

    很榮幸拜讀您的技術Blog,我是一名網絡建站的初學者,現在遇到一個麻煩,如何設置Contact Form 7 的 表單文字格式,表框顏色,表單背景色。

    如有時間,勞煩多多指教。

    恭安

    Hayden

    • admin表示:

      Hayden 您好!

      要客製 contact form 7 的方法就是把 class 寫進裡面,然後用 css 去設置表單文字格式等等的樣式,我通常都是這樣做的,也許還有其它更快的方法,就可能要再研究看看了!

  2. joanne表示:

    請問一下,明人在留言,我已有設定我的yahoo信箱了,但是怎不會收到。

回覆文章