WordPress 版面「Whatever Lab」

Theme: Whatever Lab - Index Theme: Whatever Lab - Blog

名稱:Whatever Lab
版本:1.0
作者:Wanico
網站:Lab Crocodile

這次版面的架構和上一個 Crochimera 差不多,所以沒有花太多時間在區塊排版上;倒是版面本身就拖了好幾個月,因為邊打版面草稿、還要邊把「自適應網頁設計」的應用考慮進去,重點是沒有靈感(笑)總之這次除了自適應網頁設計以外,沒用到什麼特別的東西,下面粗略談一下這次的版面製作重點和心得。

自適應網頁設計 (Responsive Web Design)

想了解「自適應網頁設計」是什麼名堂,只要把瀏覽器橫向縮放、看本網誌的區塊變動效果就可以略知一二。這種對應螢幕解析度變化的設計、入門其實相當容易,但關鍵在怎麼寫才可以用最少的語法達到最大的效果(相對於對應不同解析度各寫一個 CSS 的做法);這邊花了好長一段時間、研究很多範本,才找出一個對個人而言最簡單易懂也最好處理的寫法。關於這邊對「自適應網頁設計」的理解,歡迎參考這篇文章

參考文章:
阮一峰的网络日志:自适应网页设计(Responsive Web Design)
Treehouse Blog:Beginner’s Guide to Responsive Web Design
BenjaminKeen.com:Responsive Design bookmarklet

自定頁首 (Custom Header)

這個 WordPress 從 2.1 版開始支援、3.4 版更動寫法的功能,也就是控制台「外觀」標籤裡面的「頁首」,是心血來潮才決定要應用在佈景主題上。按照多數教學文章的步驟去寫,「頁首圖片」的部分都可以順利運作;然而「頁首文字」就不同了、相關文章相當難找,這邊折騰了一陣子最後節省時間、決定參考官方佈景 Twenty Twelve 的寫法。

Twenty Twelve 關於這功能的 function 另外寫在一個獨立的檔案裡,語法分為四部分--第一部分是基本設定,例如圖片大小和預設文字顏色;第二部分是網誌顯示的頁首文字;第三部分是控制台內「頁首圖片」的預覽畫面的 CSS;第四部分則是「頁首圖片」的預覽畫面。第三和第四部分由於是預覽畫面,因此這兩部分的語法和實際寫版面時的語法是相去不遠的。

參考文章:
WordPress Codex:Custom Headers
Make WordPress Themes:Updating Custom Backgrounds and Custom Headers for WordPress 3.4
Webdesigner Depot:Creating a responsive header in WordPress 3.4

jQuery:套用 Superfish 的選單以及 Tooltip

Superfish 的效果簡單描述就是實現階層式選單的淡入淡出,會這麼說是因為寫階層式選單的重點還是在於 CSS。這邊並沒有完全照下列第二篇參考文章的方式去寫,導入 JavaScript 的方法單純照官方來即可;應用於 WordPress 選單上才依照參考文章,也就是在導入選單時替選單加上 class。

至於那個對應 title 出現的對話框氣泡 Tooltip 就很單純,安裝 jQuery UI、導入 script、修改 CSS 即大功告成。

參考文章:
Superfish:Examples
Wptuts+:Integrating Superfish Menu Into a Template
jQuery UI:Tooltip: Custom Styling

結語

在這裡特別感謝小彌桑和他的網誌「坐井觀天。」,讓這邊重新思考網誌的定位、以及排版上如何才能讓人輕鬆閱讀;另外感謝哈吉桑挑 BUG。這次拿掉一些前一個版面運用的 CSS3 效果,並以 Web Symbols typeface 文字取代部分圖片,還有導入「友善列印」的 CSS 等,但是完成倉促、自適應網頁設計的部分還有很多地方需要加強;即使短時間內不會改版,希望未來還有機會寫其他版面。

其他參考文章:

A List Apart:CSS Design: Going to Print
Queness:Quick and Easy jQuery Font Resizer Tutorial

分類:網站網誌