案例:愛煮家
網址:www.ikuk.com.tw
本站使用 WordPress 架設,這算是我第二次使用自製版形。有三次是使用付費版型,一次是使用 WP 預設版形做小幅度修改,其他幾次就純粹使用 WP 預設版形寫部落格。別的案例晚點再整理成一篇。
紀錄一下這次修改的內容。主要是針對版型套用時需要調整到的細節做描述,關於網址申請、網站空間購買這類架站基本工作就不贅述,網路上已經有很多相關資訊囉。
ikuk 整個製作流程如下
1.塞文章、首頁調整
由於一開始先要趕在 3/30 先做出一個網站,只有一個禮拜的時間。當時跟客戶說我們先把基本的版面架起來,版型後面再修。因此先把文章內容一個一個填進去、大概做了一個首頁版型。這個時候調整的比較多是首頁 index.php 、頁尾 footer.php 、頁首 header.php 這三個檔案。樣式檔不用說一定是要調整的。
首頁的部份,主要是使用自製的頁面做替換。因此把 index.php 內文章的程式刪掉, require 自製的 html 檔進去。頁首頁尾則是搭配陽春版版型的樣子,有需要增加 id 或 class 的部份就手動加進去,然後把 style.css 根據想要的版型做調整。
2.分頁與文章版型調整
ikuk 的主要內容都是用分頁作成的,只有食譜的部份是使用部落格。我是使用 WP 預設版型 Twenty Eleven 來做修改的,原因是他分頁有單欄的選擇。但他有個問題,就是部落格預設也是單欄。在網路上找到的方法不是很合這次專案的使用(會連同分頁一起被改成兩欄式),於是手動把 sidebar 放到文章內,這裡修改了 single.php ,在裡面加入 <?php get_sidebar(); ?> 。由於這個佈景主題的分頁跟文章的檔案是分開的,所以不用怕改了文章分頁版也一起被更動。
花比較多時間的部份是各分頁的排版,因為不同系列的商品版型分配略有不同。這個部份我是直接在各分頁內容寫 html ,自訂 div ,並且自己另外寫了一個 page_style.css (當然,也要自己改 header.php 把這個樣式 link 進去),用這樣的方式來自行調整排版,為了讓整個內容版面可以完全由自己控制,我把原本的標題用 css 設定為隱藏。等於只有在表頭下拉選單才看的到那個標題,內容的部份看到的完全是自訂內容。
3.版型調整
基本的骨架做出來之後,就回過頭來調整版型囉,一開始先用 PSD 排好讓客戶選擇。確定好要使用的樣子之後,把圖片切一切上傳,回去改 style.css 。
這時候因為內容都已經有塞好了,內頁版面除了表頭表尾修改外,內容動的幅度比一開始少很多。反而是首頁的樣式花了比較多時間調整,因為我想把一個 slide 的效果做在背景上,一樣用 require 的方式置入 html 。
但問題比較大的是首頁跟內頁的表頭表尾要的樣子完全不一樣,怎麼辦?這點只要可以改表頭、在 index 使用的表頭內把 body 加入新的 class ,就可以用 css 設定處理。理想狀況應該是想辦法把 <?php get_header(); ?> 看有沒有辦法作成 <?php get_header2(); ?> 這類的。如果 WP 原來是直接使用 require 的方式的話,這個部份不會太難改,但是他不是用這個方法, WP 為了擴充性,用了很多 hook ,然後用互相呼叫的方式來引用,但是我對這種方法並不熟悉,以至於我也不知道要怎麼才能另外改一個新的表頭,並且用類似 <?php get_header(); ?> 的方式讓 index.php 使用。
所以呢,我直接把 header.php 的 code 拷貝,貼到 index.php 取代掉 <?php get_header(); ?> 。然後自己手動加 class 在 body 上,讓他跟內頁有所區分。
我想這其實不是一個很好的方法,原因是之後要是 header 有改動, index.php 這頁要自己手動再去把有的更動另外更新上去,像是我後來放 google 分析碼就要兩邊都改。但是這個網站算是要先快速架站做出第一版,未來要另外走客制化。所以這個部份可以處理的過就好。
首頁調整的比較多的還有 CSS ,主要是選單的部份,因為新的版型設計的時候,我使用了圖片文字,但是因為有下拉選單,以至於第一層選單使用圖片文字時,第二層選單會跟著繼承樣式,所以必須要再把原本的設定重寫一次。
大致上的流程是這樣,實際修改的內容很瑣碎,就是不斷的調整 css 跟寫新的樣式,這部份就不細寫囉。