這是以 wordpress 架站，跟 templatemonster 購買版型後的套板流程。之前寫在杉語網頁設計的部落格上。這裡留一份備份囉。

1. 先安裝好基本的wp
2. 裝完之後把mySQL先匯出備份
3. 把樣板上傳到ftp，傳到themes資料夾、把樣板裡面的​uploads傳到wp-content資料夾裡
4. 把plugin上傳上去並且啟用
5. 把買來的樣板裡面的mySQL先複製一份出來，然後用文字編​輯器打開，把裡面的your_website_url_here用搜尋取代​改成你的網址，例如 http://www.firtalks.com.tw/ ，如果你在安裝wp的時候有把資料庫的前綴詞做修改，則要多一步把wp_找出來修改成你設定的前綴詞。然後存檔
6. 到phpadmin把剛剛改過的mySQL匯入

大概這樣就可以先把樣板裝起來了。
簡單的樣板mySQL可以不用灌，不過有的樣板有用到自定資料內​容的，
或是有的有使用到「選單」設定的，
不灌裝起來會跟原來的有落差，
為了避免自己在那裡找到底問題出在哪，
建議還是先灌進去，再自己去後台研究資料對應會比較省時間。

不灌mySQL會有落差的原因大概有兩個

1. 樣板內有自定的post-type：因為不灌就沒有這個資料，所以自然顯示就會有問題
2. 樣板內有使用自定選單：等於他的下拉選單不是在分頁設定子母關係就會自動出現，要到選單內再設定，外加css寫法可能是用指定ID的作法寫，因此會發生自己新增的選單有顯示，但是樣式怪怪的狀況。

大概是這樣～

在前公司用Wordpress架過三個站，都是使用 templatemonster 的付費版型。有一個站因為沒續約，已經消失了就不寫囉，紀錄一下另外兩個。這個部份當初都有寫在杉語網頁設計的網站上，不過這內容原本就是我寫的啦，這裡保留一份順便加新的註解～

案例一：友敍企業有限公司
網址：http://usea.com.tw/
說明：
這個版型使用了很多的jQuery效果，像是右欄的相片展示，工程實績裡的照片展示。還有上方下拉選單。但是下拉選單在套用的時候發現原來的樣板在這個部分並沒有跟後台作完全的串接，當分類刪除，自己新增的分類沒辦法增加到下拉選單中。

考慮到未來客戶使用的擴充便利性，因此將原來有JQuery效果的下拉選單刪除，使用原始樣板的模組替代，CSS的部份自行重寫。工程實績的部份在原始樣板中也沒有跟資料庫串接，是純手工排版的。

註解：
事後想想，應該不是下拉選單沒有整合，而是那個樣板要使用 WP 內的「選單」去設定，但是當時只知道分頁在預設版型的情況底下，下拉選單都會自動新增。那時候對「選單」的設定不熟，所以才會做那樣的調整。

案例二：原宏企業
網址：http://www.yuanhorn.com.tw/
說明：
調整的地方主要有

1. 首頁只保留表頭SlideShow與邊欄商品資料連結，
2. 將SlideShow的高度做調整。
3. 網站字體大小CSS調整
4. 前台樣板中文化調整
5. 將商品加註文字直接寫入到樣板內。

註解：
這個套版比較麻煩的地方是後來客戶希望可以調整商品列表內、每個商品的圖片尺寸。我原本以為是直接做在列表頁的樣板內，後來用圖片尺寸搜尋才發現不是，是寫在另外一個負責壓圖的程式檔案內。

案例：Joyhsu career
網址：career.joyhsu.com

這是我的個人介紹與作品集網站，以往都是作成靜態 html ，但是一但有新作品要放，維護上很麻煩，所以這次也使用 wordpress 來架站。這個更改的幅度相對於 ikuk 小很多，使用 wp 的人應該一看就可以看出來是用預設版型 Twenty Eleven 來修改的。

修改流程如下

1.單欄式設定
使用  Twenty Eleven 的好處就是後台可以直接設定成單欄式，這樣首頁邊欄就會消失囉

2.塞內容
因為首頁要改的比較多，所以先放著，我先把要放在分頁的內容塞進去，並且自訂 css 樣式完成內容排版

3.改首頁
把文章的 loop 程式拿掉， require 自訂的 html 進去，主要是放圖片slide（沒錯，我使用跟 ikuk同一個 slide 效果，這個效果名字是 nivo-slider，相當好用喔！）

4.改列表頁
因為我主要是要用這個來整理作品，但是作品呈現用部落格文章條列方式並不適合，所以這個案例在列表頁改動的比較多。我使用 Page Links To 這個外掛，把頁面先指向特定的文章分類，然後改動 category.php ，原本文章列表內有段原始碼為
<?php get_template_part( ‘content’, get_post_format() ); ?>
等於預設他是去取得一個 post_format ，一樣我不知道這個format要去哪改XD，所以直接把這段原始碼標註起來，然後手動加入以下原始碼
<div>
<article>
<a href=”<?php the_permalink(); ?>” title=”<?php printf( esc_attr__( ‘Permalink to %s’, ‘twentyeleven’ ), the_title_attribute( ‘echo=0’ ) ); ?>” rel=”bookmark”><img src=”<?php echo get_post_meta($post->ID, “small-image”, $single = true); ?>”/></a>
<div>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php printf( esc_attr__( ‘Permalink to %s’, ‘twentyeleven’ ), the_title_attribute( ‘echo=0’ ) ); ?>” rel=”bookmark”><?php the_title(); ?></a></h2>
</div>
</article>
</div>

作品集小圖的部份我是自己做，而不是由程式自動縮，所以我使用 wp 的自訂欄位， 命名為small-image，並且用 <?php echo get_post_meta($post->ID, “small-image”, $single = true); ?>  讓小圖顯示在列表頁內。其他的是參考 content-page.php ，把我要的部份（文章標題跟文章連結）相關的碼拷貝過來用。

排版的部份就是 css 慢慢調整囉！

5.塞作品
然後就是瘋狂塞作品進去啦，後來舊的作品想說就維持放在舊的作品集內，用連結過去的就好，日後新的再更新。

案例：愛煮家
網址：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 跟寫新的樣式，這部份就不細寫囉。