WordPress架站實務案例(二)

案例: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.塞作品
然後就是瘋狂塞作品進去啦,後來舊的作品想說就維持放在舊的作品集內,用連結過去的就好,日後新的再更新。