蝴蝶馬戲團——高階畫布修改案例

sanjoykumar733

這篇客座文章由Skyrocket Websites的Nick Daugherty撰寫，他擁有令人印象深刻的客戶組合和廣泛的 WooThemes 修改。
為了配合Canvas v4 的釋出，WooThemes 人員要求我為我最近的一些基於 Canvas 的專案編寫一個案例研究，我非常高興能這麼做。
我叫尼克，是一名來自美國加利福尼亞州洛杉磯的全職網頁設計師。自從 WooThemes在 WordPress 的黑暗時代（確切地說是 2008 年）首次釋出Vibrant CMS 主題以來，我一直是 WooThemes 的使用者（和粉絲）。
這文是關於TheButterflyCircus com 的，這是我迄今為止最雄心勃勃的兒童主題修改。
因此，繫好安全帶，拿起鉛筆，戴上你的思考帽。它可能會變得書呆子。

接電話
蝴蝶馬戲團網站
蝴蝶馬戲團是一部屢獲殊榮的短片，目前全 手機號碼清單 世界有超過 1000 萬人觀看。它傳達了一個鼓舞人心、溫暖人心的資訊，講述了一個沒有胳膊或腿的男人在嘉年華最不可能的地方找到了生活的目的和意義。

這部電影的創作者去年年底有點匆忙地給我打電話，因為電影已經上映了，他們的網站還沒有準備好。他們需要幫助。快速地。

他們告訴我，我們想在 WordPress 中構建它。但我們不確定 WordPress 是否還能做我們想做的事。現在我們陷入困境了。





求愛還是不求愛

我總是樂於接受挑戰，這聽起來是一個很好的挑戰。所以我跳上車，開車去他們在洛杉磯的辦公室，看看我是否可以提供一點幫助。

他們對該網站有一個非常具體的設計理念，並希望確保該網站看起來符合那個時期的真實情況。（想想 1930 年的大蕭條時代）。

另一位設計師實際上已經為他們啟動了這個專案，並花費了鉅額費用試圖從頭開始建立自己的自定義 WordPress 主題，但後來感到沮喪並放棄了。

作為他們的新首席設計師，我的第一個決定是是否嘗試繼續使用他們現有的程式碼，或者在我已經知道（並且信任）的 WordPress 主題框架內重建所有內容。
畫布兒童主題
我選擇使用 Canvas 主題，並立即建立了一個子主題（使用 Magnus 的教程）來容納所需的主要樣式/佈局自定義。然後，我從網站中逐一提取圖形元素，有條不紊地調整 CSS 和 javascript，直到看起來正確為止。

如下所示，Canvas 主題看起來與 Butterfly Circus 子主題的最終結果有很大不同。這些更改是覆蓋 CSS 中預設 Canvas 元素樣式、新增一些自定義主題選項、動畫主頁和一些自定義頁面模板的組合。

蝴蝶馬戲團，基於 Canvas 主題。
華麗的框架、馬戲團導航和其他裝飾元素
開發該網站時我面臨的最大挑戰是找到僅使用 CSS 來操縱設計的創造性方法。為了簡單起見，如果不需要的話，我不想更改 Canvas 主題的預設模板內的 HTML 或 PHP 程式碼。

馬戲團導航是通過將徽標放入“畫布主題選項”的“標題背景影象”框（“標題樣式”下）而不是“自定義徽標”框（“常規設定”下）中來完成的。
導航選單。

接下來，我建立了一個自定義選單（在“外觀”>>“選單”下）並獲取每個列表項的 ID（使用 Firebug）。這使我能夠為導航中的每個專案新增 CSS 位置和背景影象元素，並最終在中心分割導航。

設計導航選單
擴充套件華麗框架是設計的核心，因為它框架了網站的所有內容。這很棘手，因為它需要將框架分成三部分：
頂部 – 框架的頂部掛鉤到頁面的 main 元素，並使用 z-index 呼叫將其保持在頂部。

中間——這是擴充套件部分。它是一個重複的半透明黑色背景，掛鉤到頁面的 content 元素。
底部——這是唯一的部分
我必須向頁面新增一個新的 HTML 元素。沒有可行的 CSS 鉤子可以放在框架底部，所以我自己做了一個
並將其與我的檔案中的操作掛鉤掛鉤。最後，我添加了 CSS 來呼叫背景影象，並使用 z-index 呼叫來正確分層。

不使用 Flash 的華麗主頁
事實證明，您實際上並不需要 Flash 來為您的主頁製作一些很酷的介紹動畫。使用簡單的jQuery 動畫就可以實現這一點。
如果您曾經在 PowerPoint 中製作過幻燈片動畫，請不要驚慌，這非常相似。訣竅是向後工作。

這是我的做法
我建立了一個名為的自定義頁面模板，並將每個 HTML 元素（主要是影象）新增到該模板中。
我絕對使用 CSS 將每個影象放置到位。
完成後，我開始為每個元素設定淡入或滑入的動畫。

使用一點 jQuery（在名為的檔案中），我將動畫分為 5 個階段，從頁面載入開始。我用來使每個元素淡入的語法如下所示：
最後，我在 function php 檔案中添加了呼叫，以在主頁上呼叫我的自定義動畫 javascript。
看起來很酷吧？當你把它們放在一起時，就會產生令人驚歎的使用者體驗。

主題的其他值得注意的新增/更改是：
從Object 主題 借用的Cast 頁面的照片滾動條
整個過程中都使用 Google 字型替換，我們選擇了 Josefin Sans，因為它提供了那個時代最真實的外觀和感覺
蝴蝶馬戲團短片的新自定義頁面模板
每個帖子下方的“自定義帖子更多”部分，已修改為顯示 Facebook/Twitter 按鈕（當然使用內建的Woo 短程式碼）。

用於電子郵件註冊的自定義頁尾小部件，與網站的外觀/感覺相匹配。
更多技術補充：自定義背景
客戶最初的請求之一是為網站上的每個頁面提供自定義背景影象。這似乎是一個通過子主題練習自定義主題選項的絕佳機會。
在嘗試了幾個選項之後，我最終在 WP 頁面編輯器中得到了一個自定義元框，如下所示：
在頁面編輯器中建立自定義元框
最後，我在子主題的functions php 檔案中編寫了一個小函式來掛鉤操作掛鉤，類似於 Canvas 主題選項中的自定義 CSS 框的工作方式。（它動態地將您的自定義 CSS 放入主題的 header php 檔案部分中。）
如果您有興趣，可以在Mark 的教程中瞭解有關使用掛鉤和過濾器的更多資訊。