多數人會選用 WooCommerce 來開設網路商店,其中最大的原因是能夠隨時替 WordPress 更換佈景主題,二來全球使用 WordPrsss 架站的數量也佔了很大的比例,相對之下所以佈景主題的總數也一定非常地龐大。

但問題來了,如果是才剛接觸 WooCommerce 的使用者,可能會因為主題數量多到像爆炸般地氾濫,所以在挑選時反會變成很大的煩腦,相信不論是有經驗的使用者,也一定有相同的感受。

通常在挑選主題時,首先一般會是不知道該用哪一款佈景主題,所以必須花很長的時間尋找,待挑選完之後還需要仔細地檢視其主題的展示網站,是不是真的符合 自己的需求,其它需要思考的地方還有主題的售價、提供怎樣的支援服務、附帶功能多不多、有沒有很炫的特效或是後台有沒有中文化。

Framework

當初開始接觸 WooCommerce 時,我也和大多數人一樣,為了挑選最滿意的佈景主題,所以花了非常大量的時間在 themeforest 上搜尋適合的商店主題,之後因為工作上的需求與朋友的推薦之下,才開始有機會接觸到更多知名的公司所開發的主題框架。

主題框架
知名的佈景主題框架

例如 StudioPress 的 Genesis Framework、Elegant Themes 的 Divi Framework、YOOtheme 的 Warp Framework 和 WooThemes 的 WooFramework,這些主題框架的設計思維都各有特色,每個都朝著極鮮明的方向發展,至於細節的部份就不在此介紹了,因為本篇的主角不是它們。

常看我的 Blog 的朋友們,應該不曾看過我介紹任何一款佈景主題,其實不寫的原因很簡單,因為每個人的審美觀和 Coding 的程度都不同,所以很難定議什麼才是好的主題,再來就是已經有不少介紹主題的網站了,只要搜尋一下 “WooCommerce 主題" 就能得到很多資訊。

既然不介紹主題,那寫這篇文章是有事嗎?

是的,有事,有很重要的事,所以才要破例一次介紹佈景主題,特別是對於 WooCommerce 的開發者或使用者。

WooThemes

WooCommerce 是一家位於南非開普敦的 WooThemes 所開發的產品,而且他們還被 Automattic 給收購了,這些大家都應該知道了,對吧? 如果不知道也沒關係,但你一定要知道的是,他們推出了一款全新的免費佈景主題 Storefront ,而這款主題現在是作為主力產品之一。

免費主題是主力產品?

是的,由這點就可以看出 WooThemes 對它的重視程度,而且還為它訂出了和傳統不同的行銷模式,不再是先把主題賣給使用者,然後提供售後服務這麼單純。

其實 WooThemes 在組隊之前,認為單純為客戶設計網站,雖然能帶來不錯收入,但這和多數人在做的事情沒什麼兩樣,而且也無法接觸到更廣大的客群,於是在他們組隊之後,主要經營模式訂為販售佈景主題,把設計和維護的成本,分攤到主題的售價上,結果這個策略非常成功,因此也為他們累積了不少資金和世界級(客戶遍佈全球)的經驗,緊接著下一步,也就是開啟了電子商務市場的聖戰 ━ WooCommerce 世代。

雖然 WooCommerce 是免費的外掛,而且還必需依附在 WordPress 身上,但它所帶來的商機卻能龐大到創造出另一個生態環境,從 WooThemes 自己本身所開發的外掛及主題到第三方廠商所開發的應用,從大量免費外掛的集中地 WordPress.org 到知名的程式市集 codecanyon,還有其它數不清的獨立開發團隊,再加上原本 WordPress 在世界上的市佔率,使得它的態勢像滾雪球般地襲來並且贏得電子商務的領導者的地位。

WooCommerce 市佔比率
WooCommerce 市佔比率, 資料來源:builtwith.com

由於 WooCommerce 這件成功的案例,所以不難想像未來的 WooThemes 還會繼續推動更重大的項目,但在此時,他們居然願意破例發佈免費的佈景主題,可想而知的是,這個舉動當然不是要回饋社會吧?

Storefront

WooThemes Storefront 佈景主題
WooThemes Storefront 佈景主題

這款免費主題的命名為 ━ 店面,直覺地就像是為了呼應 WooCommerce 而存在似的,底層採用 Automattic 的 underscores 框架,專為 WooCommerce 而量身打造,帶有建壯及靈活的編碼設計,捨去多餘的浮華特效,專注於商店及相關應用上。

Storefront 官網 下載主題 展示網站

增強外掛

Storefront 除了內建的基本調整選項之外,還有提供付費版的進階自訂功能,光是這點就比買了一個什麼功能都有,但大部份都用不到的主題好太多了,而且目前使用此主題的人數也在成長當中,所以還能找到一些不錯的免費增強外掛。

官方增強外掛 Wooassist 免費外掛

子佈景主題

除了可利用外掛來增加功能之外, Storefront 還是一個主題框架,所以官方也有提供免費或付費的子主題,如果你想要利用它來設計成自己的主題也沒問題,就像目前 cloudwp 所使用的主題一樣,也是從 Storefront 改造而來的。

WooThemes Storefront Child Themes
WooThemes Storefront 子佈景主題

Deli 子主題 Boutique 子主題 Galleria 子主題

支援與問題

Storefront 的主要開發者為 @jameskoste ,因為在之前曾看過他寫的兩款品質都還不錯的主題 Clear TranquilHighwind,所以個人對他還滿有印象,而且就算 Storefront 是免費主題,若在操作時遇到了技術問題,它並沒有少了專屬的支援討論區來提供使用者尋求解答。

支援服務 回報 Bug

注意到了嗎,一個能用外掛來增強的主題,所以這個主題的架構基本上就已經模組化了,任何人都能為它開發新功能,感覺還真的有點和 WooCommerce 走相同的路線,主導開源的程式來滿足基本應用,讓每個人都能參與其中,經過不斷的修正及改善,最後成為另一個新的經濟生態。

自訂子主題

Storefront 為了保持精簡的本質,基本上沒有提供太多的自訂選項,但如果你有一點點的程式基礎,這款主題絕對會讓你用的非常順心,因為它在被編寫時用了大量的 hooks,所以當頁面上有任何想增加、刪除或是移換位置的地方,都能輕易的利用 remove_actions 來修改,這一點就和 Genesis Framework 的特質一樣,能超靈活的自訂。

想要建立一個自訂的子主題也非常簡單,首先新增一個空資料夾並幫它取一個任何想要的名稱,例如用網站的名稱來為它命名。

接著在資料夾裡新增一個 style.css,並把下列的設定貼入存檔。

/*
Theme Name: cloudwp //新主題的名稱
Version: 1.0 //歷史版本
Theme URI: https://cloudwp.pro //主題的網址
Author: Nel Tseng //作者
Author URI: https://twitter.com/neltseng //作者的網址
Description: cloudwp theme. //主題的描述
-
Template: storefront
Theme URI: http://woothemes.com/storefront
Author: WooThemes
Author URI: http://woothemes.com
*/

然後再新增一個 functions.php,同樣也把下列的設定貼入存檔。

<?php

/**
 * CWP - storefront child theme functions.php file.
 *
 * @package storefront-child
 */

// 讀取 Storefront 的 style.css
add_action('wp_enqueue_scripts', 'enqueue_parent_theme_style');
function enqueue_parent_theme_style() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');

}

最後把資料夾做成壓縮檔,然後再安裝這個新的主題就可以了,在這裡我也有提供預先設定好的子主題檔案,下載完畢後再開啟修改主題的名稱即可。

下載自訂子主題

總結

誠心的提供給正在尋找主題的朋友們一個小建議,絕對不要選看起來超級炫麗的主題,因為那些主題的作者們,如果沒辦法用展示網站來吸引你的眼球,那他 們就等著喝西北風了, 這點就和手機生廠商,每年都會在新款式上,加些不必要的炫麗功能的道理是一樣的,不管那些設計有沒有用處,只要能抓到消費者的心態,很輕易地就能提走他們 的存款。

在挑選佈景主題時,最好能多花點時間,參考研究一些實際運作的網站,試著揣測並了解他們網站的優點,別放過每一個小細節裡的設計,如果時間允許的話,也可以嘗試著分析他們的經營模式。

一個擁有高收入的網站,他們的成功絕對不是靠特效達成的,而是靠著縝密規劃與行銷成效,換句話說,就是如何訂制產業的策略,你的網站在相同產業裡要如何和別人竸爭,你的商品要如何說服消費者購買,這些才是經營網路商店的核心重點。

Storefront – 最優的 WooCommerce 商店主題
本篇文章 5 分 / 3