Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. OpenCart
Code

用 OpenCart 創建自定義主題:第二部分

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Create a Custom Theme With OpenCart.
Create a Custom Theme With OpenCart: Introduction
Create a Custom Theme With OpenCart: Part Three

Chinese (Traditional) (中文(繁體)) translation by Niau Wu (you can also view the original English article)

在本系列的第一篇文章中 ,我們探討了 OpenCart 的基本主題結構。現在,讓我們進一步學習如何創建自定義主題。如果您還沒有看過本系列教程的第一部分,請仔細閱讀之,以便您瞭解本文要做什麼,我們將要繼續建立自己的主題。

OpenCart 內建還不錯的預設主題,將用來當作自定義主題的基礎。一般來說,要創建自定義主題,有兩種情況:

  1. 想要用所選擇的新界面完全取代預設的前端界面,
  2. 想改變一些東西如顏色組合、佈局結構和品牌相關的變化。

在這兩種情況下,我建議創建一個新的自定義主題,而不是直接修改預設的主題文件,因為在更新 OpenCart 的版本過程中會比較容易。

在開始之前,您應該有安裝了 OpenCart。如果還沒有安裝,去安裝並設置好。

一旦安裝好了,就讓我們開始吧!

建立骨架

catalog/view/theme 底下創建一個新的目錄,命名為 mycustomtheme。用來裝其他文件,如圖片(iamge),樣式表(stylesheet)和模板(template)。接下來,需要在 mycustomtheme 目錄下創建三個目錄:imagestylesheettemplates

基本骨架結構

一旦完成了,就表示已經設定好需要的自定義主題基本骨架結構。事實上,可以繼續前進了,從後端實現自定義主題,其會運作的相當好。

啟動(Active)新主題

接下來,從後端啟動自定義主題。登錄後端,進入System(系統)>Settings(設置)。 會列出所有 OpenCart 安裝存儲可用的商店(store) 。

預設存儲清單

在大多數情況下,會顯示一個商店入口,但如果有多個存儲設置,會看到不只一行。OpenCart 一次安裝就可以設置多個商店。

這確實是一個重要的功能,如果有多個商店,當然不希望每個商店都要安裝一個 OpenCart。可以使用單一界面管理所有商店!成立多個商店超出了本教程的範圍,但其為值得探索的重要功能。

回到我們的商店,點擊 Action(動作)欄位的 Edit(編輯)鏈接,應該會開啟商店的配置界面。

編輯存儲配置界面

點擊 Store(商店){/標籤。這將打開配置表單,使我們能夠選擇一個前端的主題。應該會看到,我們的自定義主題, mycustomtheme,列在 default 主題的 Template(模板)下拉框中。選擇並點擊 Save(保存)按鈕來套用變更。

編輯存儲配置界面 - 商店標籤

現在,如果檢查前端,可以發現一切正常運作。我們連一個自定義主題的文件都還沒有創建,但是 - 怎麼會運作呢?這就是模板複寫(overriding)的強大之處。

了解模板複寫的魔術

即使我們已經建立了新的主題 - mycustomtheme - 商店內的啟動主題,在我們起從後台啟動新的主題之前,前端還是會尋找一模一樣的主題。這是由於模板複寫系統適當地運作。

讓我們來看一個簡單的例子,以便更容易地理解這一點:要渲染的主頁,OpenCart 使用的模板位於 catalog/view/theme/*/template/common/home.tpl。路徑的星號映射到主題名稱。現在 OpenCart 執行以下過程,以便找到 home.tpl 模板:

  • 已經建立了 mycustomtheme 作為商店的啟動主題,首先會在 catalog/view/theme/mycustomtheme/template/common/home.tpl 嘗試找文件。如果找到了,OpenCart 就會使用該文件,並停止搜尋過程。
  • 如果 OpenCart 在啟動主題找不到 home.tpl,將還回到預設的主題,並嘗試使用 catalog/view/theme/default/template/common/home.tpl。顯然,這是 home.tpl 一定會在那裡,除非您限制了預設主題模板文件!

當無法找到有效的自定義主題所需的模板文件時,OpenCart 總是會回到 default 主題,。所以,實際上,default 主題總是在待命,即使設置了 mycustomtheme

這在您只需要調整一些選定的模板文件的情況下非常方便。在這種情況下,只需將這些文件複製到自定義主題目錄來完成需求。

擴展空白自定義主題

至於我們自定義主題 mycustomtheme,目前只是一個空殼子。且讓我們用一些有用的內容豐富它。

繼續在自定義的主題目錄 template 下創建一個名為 common 的新目錄。現在從 default 主題的 template/common 目錄複製 home.tplheader.tpl 模板文件。貼到我們主題的新創建的 common目錄。

同樣,從 default 主題的 stylesheet 目錄複製所有的樣式表文件,並貼到我們主題的 stylesheet 目錄。image 目錄亦同,雖然目前我們會忽略這個目錄。

此時,新的主題目錄樹看起來應該像這樣:

自定義主題結構

在我們進行之前,有幾個重要的事情要注意。您應該只將需要自定義的模板文件複製到自定義主題。因為缺少的文件會從 default 主題中獲取,所以沒有必要保持相同文件的副本,除非您需要修改它。

還有一點要注意的是,應該保持和 default 主題相似的文件結構,特別是模板文件。如您所見,當我們複製 home.tplheader.tpl 文件到與預設主題模仿的結構時,我們創建了一個common 目錄。

從現在起,我提到的所有路徑都是自定義主題目錄中的文件相對路徑。接下來,用您喜歡的文本編輯器打開 template/common/header.tpl 文件。該文件中的代碼負責顯示網站的頭部。如果您細看代碼,會發現“預設”主題有引用一些樣式表。

讓我們從自定義主題獲取並來改變之。

找到下面的代碼,

並替換成,

其它所需要的樣式表引用亦同。

通過這種方式,我們確保了所有的樣式表文件是從自定義主題載入。現在打開 template/common/home.tpl 文件,並替換成以下內容。

請檢查您的主頁,應該會看到的變化。

這只是如何覆蓋和使用自定義主題自定義模板的一個例子。當然,在實際情況中,您可能需要改變很多模板,使之對應自定義設計。稍後在本系列中,我們將學習如何找到前端特定頁面相關的模板。

結論

最後,本文旨在幫助您了解創建自定義主題的精妙之處。您可以繼續探索其他模板文件的代碼,以便更好地了解 OpenCart 主題的運作。

在接下來的部分,我們將看看一些具體的公共模板。當然,最歡迎反饋,請在評論留下疑問,意見等。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.