找我們做網站
↑
Wordpress · WordPress 佈景主題

OceanWP 主題教學:免費 WordPress 佈景主題安裝與範本匯入

WordPress 佈景主題發布 2018.08.27更新 2026.10.02閱讀約 7 分鐘
OceanWP 主題教學:免費 WordPress 佈景主題安裝與範本匯入

重點整理
OceanWP 是免費的 WordPress 佈景主題,可以直接在後台「外觀 → 佈景主題 → 新增」搜尋安裝,2026 年 9 月更新到 4.2.6 版,超過 40 萬個網站使用。它的特點是主題本身精簡,需要的功能再用外掛加上:搭配免費的 Ocean Extra 外掛,就能匯入免費網站範本、建立自訂頁首頁尾範本、關閉用不到的 CSS 與 JavaScript;部分範本與進階擴充功能則要付費。樣式設定集中在「外觀 → 自訂」,改了右邊就即時預覽。

WordPress 主題選擇非常多,新手常見的困擾是:功能很多的付費主題一次裝了一堆用不到的東西,網站變慢、後台也看不懂;太陽春的主題又要自己寫程式。OceanWP 走的是中間路線,主題本身輕量、免費,需要什麼功能再額外加裝。這篇介紹 OceanWP 的特色、安裝與匯入範本的流程,以及常用的後台設定。

OceanWP 有什麼特色?

2018 年的 OceanWP 官網首頁
2018 年的 OceanWP 官網首頁
  • 主題免費、功能按需加裝:主題與 Ocean Extra 外掛都免費,其他功能(例如彈出視窗、黏性頁首、進階 WooCommerce 功能)以擴充外掛的方式加上,用不到就不裝。
  • 網站範本可以直接匯入:提供免費與付費的完整網站範本(也稱 Demo),匯入後替換文字圖片就能完成初版網站。
  • 響應式、支援 WooCommerce 與多語言:基本的手機版排版、電商與翻譯外掛相容性都有照顧到。
  • 可搭配頁面編輯器:支援 Elementor 等頁面編輯器與 WordPress 區塊編輯器。
2018 年 OceanWP 官網的網站範本介紹區
2018 年 OceanWP 官網的網站範本介紹區
OceanWP 官網列出的主題特色:響應式、載入速度、電子商務、SEO、多語言
OceanWP 官網列出的主題特色:響應式、載入速度、電子商務、SEO、多語言

電商網站方面,OceanWP 對 WooCommerce 做了不少調整,例如商品快速檢視、浮動加入購物車列、可收合的商品篩選側欄等。

OceanWP 官網介紹的 WooCommerce 電商相關功能
OceanWP 官網介紹的 WooCommerce 電商相關功能

各種延伸功能以擴充外掛的形式提供,可以只挑自己需要的。

OceanWP 官網列出的各種擴充外掛
OceanWP 官網列出的各種擴充外掛

官網也提供網站範本預覽與英文說明文件,遇到設定問題可以先到說明文件搜尋,看不懂英文時用瀏覽器的翻譯功能即可。

2018 年 OceanWP 官網的 Demo 範本頁
2018 年 OceanWP 官網的 Demo 範本頁
OceanWP 官方說明文件首頁(舊版畫面)
OceanWP 官方說明文件首頁(舊版畫面)
OceanWP 說明文件的文章內容頁(舊版畫面)
OceanWP 說明文件的文章內容頁(舊版畫面)

步驟一:安裝 OceanWP 主題

OceanWP 在 WordPress 官方主題庫就能免費下載。到「外觀 → 佈景主題」,點上方的「新增佈景主題」。

在外觀 → 佈景主題頁點選新增
在外觀 → 佈景主題頁點選新增

搜尋「OceanWP」,點「安裝」,完成後按「啟用」。

搜尋 OceanWP 並點選安裝
搜尋 OceanWP 並點選安裝

步驟二:安裝 Ocean Extra 外掛

啟用主題後,後台上方會出現提示,建議安裝 Ocean Extra。依提示安裝並啟用即可;也可以到「外掛 → 安裝外掛」搜尋「Ocean Extra」。Ocean Extra 是免費外掛,網站範本匯入、自訂範本、Google 字型本機託管、超級選單、自訂工具的區塊開關等功能都靠它提供。舊版需要另外安裝的 Ocean Demo Import,現在已整合進 Ocean Extra。

啟用 OceanWP 後後台出現建議安裝外掛的提示(舊版畫面)
啟用 OceanWP 後後台出現建議安裝外掛的提示(舊版畫面)
勾選建議的外掛並批次安裝(舊版畫面,當時需安裝 Ocean Demo Import 與 Ocean Extra 兩個外掛)
勾選建議的外掛並批次安裝(舊版畫面,當時需安裝 Ocean Demo Import 與 Ocean Extra 兩個外掛)

步驟三:匯入網站範本

安裝 Ocean Extra 後,左側會出現 OceanWP 的管理面板(舊版叫 Theme Panel,現在改名為 OceanWP Panel),在裡面找到匯入網站範本(Install Demos)的選項。

舊版 Theme Panel 中的 Install Demos 選項
舊版 Theme Panel 中的 Install Demos 選項

範本列表可以先點「Live Preview」看實際網站樣式,決定後點範本圖片開始安裝。

網站範本列表,可預覽或點選範本安裝
網站範本列表,可預覽或點選範本安裝

第一個畫面會列出這個範本需要的外掛。可以直接安裝的會顯示「Install Now」;需要付費購買的擴充功能則會顯示購買連結。只想用免費功能,就挑所需外掛全部可以直接安裝的範本。

範本所需外掛清單,顯示可直接安裝與需要付費購買的外掛
範本所需外掛清單,顯示可直接安裝與需要付費購買的外掛

所需外掛都安裝好後,按下一步。

所需外掛都安裝完成,可以進入下一步
所需外掛都安裝完成,可以進入下一步

接著選擇要匯入哪些內容。不想要範本的範例頁面、文章、圖片與選單,第一項(範例內容)可以不勾;自訂工具設定與小工具建議勾選,省去自己摸索樣式設定的時間。注意:匯入會覆蓋網站目前的樣式設定,已經有內容的網站請先備份。

選擇要匯入的範例內容、自訂工具設定與小工具
選擇要匯入的範例內容、自訂工具設定與小工具

等待匯入完成。

範本匯入中的進度畫面
範本匯入中的進度畫面

出現打勾符號就代表匯入完成,點選查看結果。

範本匯入完成的畫面
範本匯入完成的畫面

匯入後的網站已經有完整版面,接下來替換成自己的文字與圖片即可。

匯入範本後的網站前台樣式
匯入範本後的網站前台樣式

步驟四:用「自訂」調整網站樣式

OceanWP 的樣式設定整合在 WordPress 的自訂工具裡,到「外觀 → 自訂」。

外觀選單中的自訂選項
外觀選單中的自訂選項

左側是設定項目,從全站的字型、主色、版面寬度,到頁首、頁尾、部落格、WooCommerce 都可以調整;右側網站畫面會即時預覽,不用來回切換前後台。設定項目很多時,可以用 Ocean Extra 提供的自訂工具搜尋功能直接找設定。

OceanWP 自訂工具畫面,左側設定項目、右側即時預覽
OceanWP 自訂工具畫面,左側設定項目、右側即時預覽

步驟五:OceanWP 管理面板常用功能

在 OceanWP 管理面板中,可以關閉用不到的自訂工具區塊,讓自訂工具載入更快、畫面更單純;也有新手入門的常用設定捷徑。

舊版 Theme Panel 的自訂工具區塊開關與入門設定捷徑
舊版 Theme Panel 的自訂工具區塊開關與入門設定捷徑

自訂範本:做一次、到處使用

Ocean Extra 的自訂範本(舊版叫 My Library)可以用 Elementor 或區塊編輯器設計一個區塊,例如統一的頁面標題、頁尾聯絡資訊,存成範本後用短代碼放到側邊欄、頁尾、頁面內容等任何位置,也可以直接在自訂工具中設定成頁首或頁尾。改一次範本,所有使用的地方會一起更新。

舊版 My Library 範本清單
舊版 My Library 範本清單
用 Elementor 在範本中建立統一的頁面標題區塊
用 Elementor 在範本中建立統一的頁面標題區塊

範本建立後會產生一組短代碼,貼到要顯示的位置即可。

範本產生的短代碼,可貼到其他頁面使用
範本產生的短代碼,可貼到其他頁面使用

關閉用不到的 CSS 與 JavaScript

Scripts & Styles 設定可以關閉主題用不到的 CSS 與 JavaScript,減少每個頁面載入的檔案。如果不確定某個功能有沒有用到,不要隨意關閉,否則可能造成選單、輪播等功能失效;改完要到前台各類頁面檢查一次。

Scripts and Styles 設定,可個別關閉 CSS 與 JavaScript
Scripts and Styles 設定,可個別關閉 CSS 與 JavaScript
Scripts and Styles 中各項功能的開關清單
Scripts and Styles 中各項功能的開關清單

常見問題

OceanWP 是免費的嗎?

是,OceanWP 主題與 Ocean Extra 外掛都免費,可以用免費版架完整網站。付費的是部分網站範本與進階擴充功能,價格以 OceanWP 官網為準。

OceanWP 對 SEO 有幫助嗎?

主題本身提供乾淨的程式碼與正確的標題結構,但 SEO 主要還是靠內容、網站速度與 SEO 外掛設定。可以搭配 Rank Math、Yoast SEO 等外掛使用。

可以用 Elementor 搭配 OceanWP 嗎?

可以,OceanWP 與 Elementor 相容,很多網站範本本身就是用 Elementor 製作。頁面內容用 Elementor 排版,全站樣式則在「外觀 → 自訂」設定。

結語

OceanWP 的優點是主題輕量、免費,又能透過 Ocean Extra 匯入網站範本、做可重複使用的範本區塊。新手可以先安裝主題與 Ocean Extra,挑一個所需外掛都免費的範本匯入,再到「外觀 → 自訂」調整字型與顏色;網站功能需要擴充時,再評估要不要加購付費擴充功能。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。