分類: 架站實務

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