最後更新時間：2026-01-02，由 Dean 更新 
OceanWP 是許多站長推薦的 WordPress 免費佈景主題，功能完整、外掛相容性高，擴充彈性也很好，就算升級付費版，價格也算親民。
但它目前沒有中文介面，加上設定選項多，新手一開始操作會比較吃力，我自己剛接觸時也花了一些時間適應。
這篇文章會帶你一步步設定 OceanWP，包含部落格、形象網站與 WooCommerce 電商功能，也會整理常用外掛與 Pro 版差異，幫你少走彎路。
OceanWP 是什麼？
OceanWP 是 2016 年推出的多功能 WordPress 主題，除了外觀設定，也支援效能與 SEO 優化。免費版就包含迷你購物車、側邊欄篩選器等 WooCommerce 功能，對電商網站很實用。
OceanWP 優點
- 免費版功能完整：不付費也能架個人網站、形象官網和小型電商。
- 內建效能優化：可關閉未使用的腳本與 CSS，減少效能負擔。
- 支援字體預載：免費版就能用 Google 字體或本機預載，避免拖慢速度。
- Elementor 整合佳：免費即可使用 OceanWP 提供的 Elementor 元件。
- SEO 友善：內建基本 Schema，標題層級樣式可獨立設定。
OceanWP 缺點
- 學習曲線較高：不像是 Astra 新手友善，反而因設定眾多，新手需要花時間理解整體架構。
- 沒有全域調色盤：顏色需在不同編輯器中重複設定，不夠直覺。
- 主題檔案偏大：內建功能多，相較 Blocksy 等輕量級主題負擔較高。
- 未支援繁中介面：雖有多語系，但後台編輯介面仍以英文為主。
如何安裝 OceanWP 佈景主題？
這段會教你直接在 WP 後台安裝 OceanWP，當然你也可以進入 OceanWP 官網下載外掛再上傳。
step 1
到 WordPress 後台：
- 左側選單點開「外觀」，再點「安裝外掛」。
- 等跳轉佈景主題頁，點「安裝佈景主題」。
step 2
在「安裝佈景主題」頁面：
- 右上搜尋框搜尋「OceanWP」。
- 等自動搜尋後，點進 OceanWP 主題。
step 3
點「安裝」，再點「啟用」。
step 4
安裝完成後，可點「Install & Active Ocean Extra」安裝擴充外掛。
Ocean Extra 新增項目：
- 預設模板：安裝完擴充外掛後，左邊點「Install Demo」，可安裝 10 幾個網站模板。
- 自訂頁面：可到 Library 用 WordPress 編輯器或其他編輯器外掛設計頁面，再載入主題使用。
- 網站預載：新增 Site Preloader 功能，可設定預載項目，建議參考官方 Site Preloader 教學。
不想安裝的話，也可點下面 OceanWP 上的「自訂」鈕，直接進入編輯器設定。
OceanWP 教學：12 個網站必備設定
在開始設定之前，要注意，不管改什麼設定，都要按上方的發佈鍵才會儲存。
Typography (字型)
這一頁是設定整個網站的字體：
- Google Font Settings (Google 字型設定)：
- Enable Google Fonts：串接 Google 字型，有需要才開啟。
- Load Google Fonts Locally：在主機儲存 Google 字型並快取，如果你不是用共享主機，可開啟加速網站。
- Font Format：選擇需要的字型格式，通常是 TTF。
- Global Typography Settings (全域字型)：
- Font Family (字型)：Google 的繁體字型都可選，如 Noto Sans TC (思源黑體)、Noto Serif TC (思源宋體)，建議內文選擇一種、所有標題選擇一種。
- Font Weight (字重)：設定粗細程度，建議 500 以上。
- Font Size (字體大小)：H1~H6 要個別調整不同大小，最小別小於 14px。
- Text Transform (文字轉換)：如全大寫、小寫或首字母大寫，繁中不須設定。
- Line Height (行高)：調整每行間的距離，維持預設。
- Letter Spacing (字距)：控制文字間距，維持預設。
- Text Decoration (文字裝飾)：選擇是否添加底線、刪除線等效果，可不設定。
Colors (顏色)
這一頁是設定整個網站統一使用的顏色：
- Site Background (網站背景)：指的是內容之外的背景底色。
- Primary Color (主要顏色)：通常在按鈕上使用，右邊是滑鼠移過的顏色。
- Border Colot (框線顏色)：所有框線的顏色都會用這個。
- Body Color (文字顏色)：內文使用的顏色。
- All Headings (標題顏色)：這裡有設定的話，網站所有標題都會用這個顏色。
- H1~H6：建議 H2~H4 常用標題設定同色系但不同的顏色。
- Link Color：文字有連結的話，會用這個顏色，右邊是滑鼠移過的顏色。
Site Style & Settings (全站樣式設定)
這一頁要設定網站的風格，如版面、圖標、按鈕、表單、返回頂端、分頁等 6 個項目，主要設定排版、圓角、寬度、背景和框線等。
PS. 全站樣式中有個「圖標 (Icon) 設定」，分成：OceanWP 官方 Icon、Simple Line Icons 或 Font Awesome Icons，依喜好選擇就可以了，以下內容不特別列出。
這裡是設定整個網站的主要版面：
- Site Layout (主要版面)：共有全寬、窄型和盒狀 3 種，選自己喜歡的版面。
- Content Settings：內容設定，參考圖片右下示例。
- Main Container Midth：主要內容寬度，通常是 1200 px。
- Content Width (%)：內容寬度比例。
- Sidebar Width (%)：側邊欄寬度比例。
- Additional Content Settings：版面 C 的設定，設定區塊內間距。
- Site Background：網站背景，主要用在版面 A。
- Background Color：單色背景。
- Image：上傳背景使用的圖片。
- Site Background Options：
- Outside Background Color：螢幕顯示範圍扣掉「主要內容寬度」的部分。
- Inner Background Color：內容背景底色，包含側邊欄背景。
設定全站的按鈕：
- 按鈕樣式：包括內邊距、圓角、框線樣式和框線粗細，設定自己想要的樣式即可。
- Typography and Colors：包含按鈕文字 (參考字型設定)、背景顏色、文字顏色和框線顏色。會有兩個顏色，左邊是一般顯示，右邊是滑鼠觸碰到的顏色。
- 表單樣式：
- Padding (px)：內間距。
- Radius (px)：圓角設定。
- Border Type：框線樣式。
- Border Width (px)：框線粗細。
- Typography and Colors (字型和顏色)：
- Label (標籤文字)：表單項目小標題的字型。
- Placeholder (佔位符)：一開始就在輸入框中的預設文字字型。
- Text (文字)：輸入表單的文字字型。
- 顏色設定：表單上每一塊都能自訂顏色。
「返回頂端」鈕就是當網頁往下滑動時，出現在右下角的按鈕，按一下就會跑回頁面最上方。
- 返回頂端功能設定：
- Enable Scroll To Top：開啟才會出現返回頂端鈕。
- Button Size：按鈕大小，記得切換右邊裝置圖示，在行動裝置也有合適大小。
- Border Radius：設定圓角，若數值夠大，按鈕會變成圓形。
- Button Position：通常在右下角，如果網頁有其他浮動按鈕，建議設定以下數值避免衝突。
- Button Position：與網頁底部相隔的距離。
- Side Position：與網頁邊緣相隔的距離。
- Button Icon：可設定按鈕上的圖示大小和樣式。
- 顏色設定：設定按鈕的背景色和圖示顏色，右邊是滑鼠觸碰到的顏色。
在文章頁或商品頁的內容超過一定數量時分頁，並讓下方出現頁碼。
- Position：選擇頁碼要出現在頁面下方的左邊、中間還是右邊。
- Border Wldth：選擇頁碼的框線粗細，如果填 0，就不會出現框線。
- Border Radius (px)：如果上面有設定框線，這邊可設定圓角大小。
- Typography and Colors：
- Pagination Text Size：調整頁碼字體的大小。
- Background：頁碼背景色。
- Border：頁碼框的框線顏色。
- Background: Active：當前頁面的頁碼框背景色。
- Pagination Text: Active：當前頁面的頁碼文字顏色。
Pages & Special Pages (頁面 & 特殊頁面)
「頁面」指的是「關於我、聯絡我、方案介紹、品牌故事」等單獨的頁面，而「特殊頁面」則是指「404 錯誤頁」和「搜索結果頁」。
由於這頁要設定的項目較多，以下拆成 4 個部分做介紹：
Layout 要設定的地方有：
- Page Layout：先選擇頁面的版型，接下來的部分才能進行設定，共有 5 個版型。
- Content Padding (px)：內容和頁面上方、頁面下方的邊距大小。
下面兩項為特定版型的設定：
- 「Additional..」是設定版型 E 的側邊欄比例。
- 「Responsive…」是設定版型 A & B 的手機版面。
設定頁面上的標題區域：
- Enable Page Title：開啟後，頁面上才會顯示標題區域。
- Visibility：設定頁面標題要顯示在哪些裝置上，通常會選擇全部。
- Heading Tag：設定標題層級，一般建議使用 H1，較符合 SEO 規範。
- Style：選擇頁面標題的版型，有 4 種，選擇喜歡的。
- Padding (px)：調整內邊距，可個別設定。
- Additional Title Settings：僅在選擇版型 D 時出現，可設定標題對齊、背景圖片、區塊高度、捲動效果，以及背景覆疊的透明度與顏色。
- Typography and Colors：統一設定標題背景、主標與副標的字型、尺寸、行距、字距與顏色。
「導覽標記」是用來告知瀏覽者，現在在網站的哪個位置，俗稱「麵包屑」(Breadcrumb)，通常以「首頁 > 分類 > 標題」的形式呈現。要注意的是，要開啟頁面標題 (Page Title)，才會出現頁面標題的導覽標記。
- Enable Breadcrumbs：關閉就不會出現導覽標記。
- Breadcrumbs Source：導覽標記來源，如果有安裝 Yoast 或 Rank Math 可在這裡選擇，避免重複設定。
- Position：設定出現在頁面標題上的位置。
- Typography and Colors：可設定導覽標記的字型、尺寸、字距等，及文字、連結、分隔符號的顏色。
- Additional Settings：因個別項目有控制項，以下分列說明。
- Breadcrumbs HomePage Settings：導覽標記中的首頁設定，可選圖示或文字。如果選文字，下面可以自訂文字內容。
- Breadcrumbs Separator：可自訂導覽標記分隔符號；Display Item Title 則是開啟或關閉出現在導覽標記上的「標題」(也就是只留首頁跟分類)。
- Breadcrumbs Taxonomy Settings：導覽標記上顯示的路徑類型，可選「分類」、「標籤」和「部落格頁面」。
- Breadcrumbs Custom Texts：自訂「404 錯誤頁面」和「站內搜尋結果頁面」的導覽標記文字內容。
「Special Pages」指的是一般頁面以外的頁面，如 404 錯誤頁和站內搜尋結果頁。
OceanWP 讓這兩種頁面可選 5 個版型，算是在免費版佈景主題中較少見的。
- Search Results Page (站內搜尋結果頁)：
- Layout：選擇一個適合的版型。
- Select Source for SERP：選擇站內搜尋的範圍，可選所有頁面、文章、頁面、商品。假如設定「商品」，那出現的搜尋結果只會有商品頁。
- Logo：上傳網站的 Logo 圖片，增加品牌識別度。
- 404 Error Page：
- Layout：選擇一個適合的版型。
- Logo：上傳網站的 Logo 圖片，增加品牌識別度。
- Custom 404：是否使用沒有頁首、選單、頁面標題、頁尾等區塊的 404 頁。如果你自己設計 404 頁，建議開啟。
- Select Template：如果有安裝 Ocean Extra，有在 Library 放另外設計的頁面，才能在這邊選用 (後面如果有看到這個選項，都是如此)。
Top Bar (頁面頂部)
Top bar 就是頁面最上方的一行，在 OceanWP，是獨立於頁首之外的設定。你可以在這裡放全站公告、社群連結或其他你想在這個地方露出的訊息。
要設定的有以下 7 項：
- Enable Top Bar：開啟才會在頁面上方看到 Top bar。
- Enable Top Bar Full Width：開啟之後，Top bar 會變成全寬，要看版型設定。
- Visibility：裝置可見度，顯示在哪些裝置上。
- General (一般設定)：3 種內容位置和內邊距設定。
- Content (內容設定)：可輸入文字、HTML 或短代碼等自訂內容，也可選自訂頁面。
- Social Menu (社群選單)：
- Enable Socail Menu：開啟才會顯示社群圖示，也可選擇關閉。
- Social Menu Options：設定選單功能，建議選擇 New Tab 開啟新分頁，內間距、尺寸和顏色則依喜好設定。
- Social Links：把要放的社群帳號連結放在這邊，可設定大部分的社群。
- Slect Template：選擇 Ocean Extra Library 中的自訂頁面。
- Typography and Color：
- 字體：設定文字的字型、尺寸、字距等。
- 顏色：設定 Top bar 的背景色、框線、文字和連結顏色。
Header (頁首)
「頁首」是頁面上方包含網站 LOGO、選單、搜尋框、購物單等的區塊，在 OceanWP 可選擇版型、高度與寬度、設定影片或圖片、選單樣式、LOGO 尺寸和位置、社群選單與行動版選單等。
接下來會分為一般設定、LOGO、主要選單、社群選單、行動版選單等 5 個部分來介紹。
一般設定，需要設定的項目如下：
- Header Type：選擇一個偏好的頁首版型，接下來才能做設定。
- Height：頁首高度。
- Padding (px) ：內邊距 (像素)，指的是四個邊與內容之間的距離。
- Full Weight：是否開啟全寬，全寬指的是整個頁首的寬度跟螢幕一樣。
- Border Bottom：是否開啟頁首底線，如果開啟，頁首底部會有一條線。
- Additional Styling & Settings：版型 ABCD 的附加設定，選擇的版型不同，這裡出現的設定不同，你可以參考右邊的 Full Screen Header 設定。
- Colors：可設定背景色、底線色，還有主選單的相關顏色。
- Content：這邊可輸入自訂的文字、HTML 和短代碼。
這一部分介紹 Header Media 和 Logo 這兩個項目。
一定要上傳 Logo 圖片，其他則是依照需求做設定：
- Header Media：視訊和圖片的上傳就不介紹了，主要介紹下面的部份。
- Overlay：可以指定在圖片或影片上覆蓋一層半透明的單色，就像濾鏡一樣。
- Position：可指定位置，九宮格形式。
- Repeat (僅圖片)：有不重複、重複及 X、Y 軸的重複。
- Attachment (僅桌面可見)：預設是 Scroll，當畫面往下拉時，頁首的背景圖片會直接跟著頁面內容向上移動；Fixed 則是在畫面下拉時，背景圖片不跟著頁面內容移動。
- Logo：
- 標誌：就是頁首左上方的網站 Logo 圖，官方建議最長不超過 300 px，最大不超過 50 KB。
- Retina Logo：在高解析顯示器上使用的 Logo 圖片，上傳的圖片解析度必須是一般 Logo 的 2 倍。
- Max Width：Logo 的最大寬度，要記得調整各裝置的設定。
Menu 是頁首的選單，建議先在「外觀 > 選單」編輯選單內容，才到「外觀 > 自訂」設定選單樣式。
step 1
WP 後台「外觀 > 選單」：
- 新增選單項目：依需求把頁面、文章、連結或文章的分類加進選單。
- 選單結構：用滑鼠拖曳項目，調整上下位置 (拖進另一個項目，會變成子選單)。
- 選單設定：這份選單要出現在哪個位置，「頁首選單 1」是預設選單、「行動版選單」是手機和平板使用的選單。
- 最後按「儲存選單」就完成了。
step 2
點「外觀 > 自訂」切回 OceanWP 編輯器，再點「Header > Menu (主要選單)」。
以下詳細設定：
- Menu Position：主選單在頁首的位置是靠左、置中或靠右。
- Links Effect & Links Effect Color：連結樣式 (滑鼠接觸時的底線) 和底線顏色。
- Menu Item Left and Right Spacing：選單項目的間隔大小。
- Typography and Colors：
- Main Menu Item：可指定選單文字的字體和格式。
- Links：可指定連結文字和滑鼠接觸時的顏色。
- Links Background：連結項目和滑鼠接觸時的背景色。
- Current Menu:Link：當前連結項目的文字顏色，建議設定，有導覽效果。
- Current Menu:Background：當前連結項目的背景色，也建議設定。
- Custom Menu：自訂選單，選擇自行設計的模板。
- Top Level Dropdown Icon：只要包含子選單，在主選單旁就會出現下拉圖示，建議開啟。
- Dropdown Top Border：子選單的頂端會有線條，建議開啟，並在下面的 Top Border 設定適合的顏色。
- Dropdown Panel Width：子選單的寬度。
- Typography and Colors：
- 依需求設定子選單的字體和顏色。
- Current Menu Link & Background：子選單當前項目的文字色和背景色，建議設定，提升使用體驗。
- Post Categories Dropdown：如果選單上放的是分類項目，會直接套用這個分類的子分類作為子選單，這邊可設定外觀。
- Header Search：
- Style：設定頁首搜尋框的樣式，有 Drop Down (跳出小搜尋框)、Header (取代頁首搜尋框) 和 Overlay (全螢幕搜尋框) 等 3 種。
- 下面是搜尋框的 3 種顏色，有背景、文字和框線，照網站風格搭配即可。
- Enable Social Menu：若頁首會放社群連結就開啟這項，並做以下設定。
- Links Target：選單上的連結設定為自動開啟成新分頁。
- Social Icons Style：社群圖示樣式，隨喜好選擇。
- Social Icon Settings：設定圖示的尺寸、圓角、間距、選單的內邊距、圖示顏色和背景色。
- Social Links：可設定大部分的社群平台，貼上帳號的連結就會出現圖示。
- Custom Template：選擇 Ocean Extra Library 中的自訂選單。
這裡設定在平板和手機上的頁首選單：
- Breakpoints (斷點)：是指從什麼螢幕尺寸開始變成行動版選單，維持預設值 959 px。
- Mobile Menu Type：有側邊選單、半版選單和全螢幕選單等 3 種版型，依偏好選擇。
- Mobile Header Search Type：有跳出搜尋框和全螢幕等 2 種搜尋類型。
- General Settings (一般設定)：
- Mobile Header Height (px)：行動版頁首高度。
- Mobile Header Item Layout：Logo & 購物車 & 選單圖示的位置。
- Mobile Logo：如果原 Logo 較大，建議上傳短版或圖示類型的 Logo。
- Mobile Logo Height (px)：如果有上傳行動版 Logo，須調整大小。
- Mobile Menu Options (行動版選單設定)：
- Dropdown Max Height：子選單最大高度。
- Display Search from Inside Menu：搜尋框是否出現在跳出選單裡。
- Dropdown Target：選「Icons」代表點擊子選單的箭頭圖示，除可打開子選單，還有連結功能；而選「Link」代表只能打開選單，但項目沒有連結的功能。
- Mobile Open Button：這裡是設定打開行動版選單的按鈕。Text 指的是在按鈕旁放文字，通常會關閉。下方 Animation 可選動畫效果，其他維持預設。
- Mobile Menu Styling (行動版樣式設定)：
- Mobile Menu：可指定字型、字體大小和字距。
- Links：設定文字和滑鼠接觸到的顏色。
- Dropdown Background：下拉選單的背景顏色。
- 其他 Search 開頭的項目都是設定搜尋框的顏色，包括文字、框線和圖示。
Blog (文章)
這裡設定 Blog Archives (文章彙整頁) 和 Single Post (單篇文章)。
Blog Archives 是在你點入某個分類時，會出現的文章列表，通常譯做「文章彙整頁」。
文章彙整頁可設定版型、結構、分頁和樣式：
- Archives Layout (彙整版型)：
- 提供單側邊欄、無側邊欄、全寬、雙側邊欄等選擇。
- 若選擇有側邊欄的版型，可進一步調整 Layout & Responsive Settings。
- Blog Style (列表版型)：
- 可選擇全寬、格狀、條狀三種文章排版方式。
- Blog Style Settings 僅適用於格狀與條狀版型。
- Blog Archives Content (彙整內容設定)：
- Excerpt & Pagination (分頁和頁碼)：
- Excerpt Length：選擇內容摘要的長度。
- Blog Archives Pagination Style：選擇分頁的顯示效果。Standard 是頁碼；Infinite Scroll 是往下滑就自動顯示；Load More 是按「顯示更多」鈕才會出現下一頁；Next / Prev 是上一頁/下一頁。
- 若選擇 Infinite Scroll 或 Load More，可進入設定修改按鈕顯示的文字內容。
- Blog Image Settings (文章縮圖設定)：
- Display Overlay on Image Hover：設定滑鼠移至圖片時，是否顯示覆蓋顏色。
- Overlay Color：可設定圖片覆蓋的顏色（需開啟前述功能後生效）。
- 另外，可自訂文章縮圖的長度與寬度，但建議保持預設值。
- Typography and Colors (字體和顏色)：
- 字體：可調整頁面標題、文章資訊、內容、閱讀更多按鈕的字型與格式。
- 顏色：建議調整「閱讀更多」按鈕的文字顏色及滑鼠懸停時的顏色，以提升點擊誘因。
- 選單篇文章版型：
- Single Layout：建議選和彙整文章頁一樣的版型。
- Layout & Responsive Settings：全寬 & 雙側邊欄版型、單欄版型等的設定。
- Layout Settings：全寬設定是調整寬度。
- Single Post Title (文章標題)：
- Single Post Title Style：選文章標題的版型，不同版型會有不同的設定。
- Single Post Title Options：文章標題是 Blog 或 Title，以及是否放精選圖片作為標題圖片。
- Content Builder (內容結構)：
- Title Tag：標題格式選 H1 或 H2。
- Main Content Elements：主要內容顯示項目，標題 (Title)、文章資訊 (Meta)、作者介紹 (Author Box) 和相關文章 (Related Posts) 是建議要開啟的，並用滑鼠拖曳，調整前後順序。
- Meta Section Elements：會出現在標題區域，建議開啟更新日期 (Modified Date) 和作者 (Author)。
- 文章資訊分隔符號：Default ( – )；Modern ( | )；Stylish ( // )；None (無分隔符號)。
- Single Post Options (單篇文章設定)：
- Common Form Position：留言區塊位置，通常選 After，在文章後面。
- Next/Prev Past Taxonomy：上篇/下篇文章的來源，可選分類、標籤或日期，一般選標籤，建議不要和相關文章重複顯示。
- Related Post Taxonomy：相關文章來源，選分類或標籤，我通常選標籤。
- Related Post Count：相關文章來源數量，一般 2~4 篇。
- 下面是相關文章圖片的長寬，不用設定。
- Typography and Colors：
- 字體：可設標題、文章內文、作者、內容標題和文章資訊等。
- 顏色：設定資訊圖示、連結、相關文章標題、相關文章日期等的顏色。
Sidebar (側邊欄)
如果你選擇的版型有側邊欄，在這裡可設定側邊欄的邊距、背景色、區塊間距和標題。
- Sidebar (側邊欄)：
- Padding (px)：整個側邊欄的內邊距，也就是內容與邊框的距離。
- Sidebar Background：整個側邊欄的背景色。
- Widget Options (小工具設定)：
- Padding (px)：單一小工具區塊內容與邊框距離。
- Heading Tag：單一小工具區塊使用的標題格式，通常會避開 H1、H2，避免跟文章內的標題層級搞混。
- Widget Margin Bottom (px)：小工具區塊間的間隔。
- Heading Margin Bottom (px)：小工具區塊標題與內容間的間隔。
- Typography and Colors：
- 字體 (上)：設定小工具的標題和文字。
- 顏色 (下)：設定小工具的背景、標題、文字和框線。
Footer Widgets (頁尾小工具)
「頁尾小工具」指的是放在頁尾的小區塊，通常有隱私權政策、服務條款、版權聲明、選單、社群圖示、電子報訂閱、聯絡資料等。
OceanWP 將這些區塊和版權聲明分開設定，先設定小工具的格式、樣式和顯示效果：
- 頁尾小工具：
- Enable Footer Widgets：開啟頁尾小工具。
- Enable Container：開啟會直接套用主容器的寬度。
- Padding (px)：整個頁尾的內容與邊緣的距離。
- Default Settings (這裡會套用 WordPress 的設定)：
- Heading Tag：套用 WordPress 標題格式。
- Footer Columns：套用 WordPress 欄位設定，在「外觀 > 小工具」裡可設定內容。
- Custom Footer Widgets：有自訂頁尾的話，在這邊選。
- Special Effects：
- Fixed Footer：固定頁尾，不建議開啟。
- Footer Parallax：滾動時會出現頁尾，頁尾會跟著內容移動，不建議使用。
- Typography and Colors：
- 字體 (上)：設定小工具的標題。
- 顏色 (下)：設定小工具的背景、框線、標題、文字和連結。
Footer Copyright (頁尾版權聲明)
網站頁尾可以不放選單、社群和聯絡資料，但一定要放版權聲明和隱私權政策。
- 基本設定
- Enable Footer Copyright：開啟才能顯示版權聲明。
- Visibility：裝置可見度，維持預設 Show on All Devices 即可。
- Padding (px)：內容與邊緣的距離。
- Content：可刪除 OceanWP 相關字詞，並放入文字、HTML 或短代碼。
- Typography and Colors：
- 字體 (上)：設定版權聲明和頁尾選單。
- 顏色 (下)：設定背景色、文字和連結。
SEO Settings (SEO 設定)
- Enable Schema Markup：
- 點擊可開啟或關閉結構化資料。
- 如果有安裝 SEO 外掛，這裡要關閉，避免重複設定。
- Use featured image ALT text on blog entries：
- 彙整文章頁的「縮圖」會套用圖片設定的替代文字 (ALT)。
- 建議開啟，可優化彙整文章頁的 SEO。
- 如果沒開啟，彙整文章頁的「縮圖」會用文章標題作為替代文字 (如果有開但沒設替代文字，會自動抓取文章標題代替)。
- 這項設定不受到 SEO 外掛影響。
- Use featured image ALT text on single posts：
- 單篇文章的「縮圖」會套用圖片設定的替代文字。
- 建議開啟，可優化文章的 SEO。
- 如果沒開啟，文章「縮圖」會自動套用文章標題當替代文字 (如果有開但沒設替代文字，會自動抓取文章標題代替)。
- 這項設定不受到 SEO 外掛影響。
- Use featured image ALT text on single post related items：
- 單篇文章若有開啟相關文章模組，相關文章的「縮圖」會套用圖片設定的替代文字 (如果有開但沒設替代文字，仍然會自動抓取文章標題代替)。
- 建議開啟，可優化文章的 SEO。
- 如果沒開啟，相關文章的「縮圖」會自動套用文章標題當圖片替代文字。
- 這項設定不受到 SEO 外掛影響。
- Enable OpenGraph：
- 讓網站的內容在社群媒體 (如 Facebook、Twitter、LinkedIn) 上分享時會包括標題、描述、圖片等資訊。
- 在 SEO 外掛中已開啟這項設定，這邊要關閉，以免重複設定。
- 若有開啟 OpenGraph，填寫下面有在經營的社群的連結。
Performance (效能)
這裡是用來控制某些腳本、效果和預載設定，提升網站的效能，總共有 7 項要設定：
- Styling Options Location：指定自訂 CSS 位置。
- WP Head (預設值)：放在 <head> 內，適合測試中的網站。
- Custom File (建議)：放在 WordPress 的 uploads 資料夾，並從這裡載入網站，網站上線後要選這項。
- Emoji：
- 是否啟用 WordPress 預設的 Emoji 腳本。
- 如果網站不會使用的話要關閉。
- Icons 設定：
- 是否要載入下列平台的 Icons。
- 建議只開啟使用的平台，其他關閉。
- 在「Site Style & Setting > Site Icons」設定。
- Lightbox (燈箱效果)：
- 當滑鼠點選圖片時，會彈出一個放大的圖片視窗。
- 如果網站不需要這個功能，可關閉以提升效能。
- 一些外掛 (Elementor 或 WooCommerce) 會自動帶入 Lightbox 功能，也要關閉，避免重複設定。
- Custom Select：
- 下拉選單自動附加一層外觀設計，以搭配網站設計。
- 網站若使用了大量的下拉式選單，再開啟這項。
- Widgets Stylesheet Load：
- 是否載入 WordPress 預設小工具或 OceanWP 小工具的樣式。
- 網站如果沒有載入這些小工具，就關閉這項。
- Scroll Effect：
- 指的是 OceanWP 主題內建的平滑滾動效果，通常用於返回頂端、目錄等錨點 (Anchor Links)，點擊時頁面會有滑動的感覺。
- 預設開啟，但要是網站使用的其他外掛有類似效果，就要關閉這項。
- Scroll Effect – Custom Offset：網站若使用了固定頁首，這裡設定數值，避免滾動後的內容被固定頁首擋到，通常設定頁首的高度，如 100px。
網站識別
「網站識別」是設定出現在瀏覽器左上腳的網站小圖示，建議上傳的圖片至少要有 512*512 像素。
進入「網站識別」，點開「選取網站圖示」上傳圖片，可以即時看到效果。
首頁設定
「首頁設定」是設定網站首頁，可選一個單獨的頁面或抓取最新的文章。
- 若想用一個單獨的頁面，而不是只有文章的話，就選「靜態頁面」，但是要先設計好頁面，才能點開下拉選單選擇。
- 如果想像部落格那樣有文章列表，就選「最新文章」。
OceanWP WooCommerce 設定教學
網站有安裝 WooCommerce 外掛的話，編輯器中會出現「WooCommerce」的編輯項目，是 OceanWP 專為 WooCommerce 設定的選項來改進商店的頁面。
| 設定項目 | 設定 | 用途 |
|---|---|---|
| Store Notice | 商店公告 | ．用於促銷活動、重要通知等。 ．限時折扣或維護通知。 |
| General | 商店基本設定 | ．調整商店頁的外觀與版面。 ．想要讓商店有更多客製化設計。 |
| Menu Cart | 頁首增加購物車功能 | ．自訂購物車圖示。 ．方便消費者快速查看購物車內容。 ．讓消費者可即時確認購物車內容。 |
| Archives | 設定產品分類頁 | ．設定版面和外觀。 ．自訂每行顯示的產品數量及排序方式。 ．有大量產品並希望自訂分類頁。 |
| Single Product | 單一產品頁 | ．優化單一產品頁面的設計 ．需要單一產品詳細介紹。 |
| Product Images | 產品圖片 | ．設定產品圖片的外觀。 ．確保產品圖片在不同裝置上一致且清晰。 ．商品很吃重圖片，需要有高解析度。 |
| Cart | 購物車頁面 | ．設定購物車頁面的版面與外觀。 ．是否顯示優惠券欄位或設定結帳按鈕位置等。 ．簡化購物車流程以提升轉換率。 |
| Checkout | 結帳頁面 | ．版面、自訂欄位 (如地址或備註)。 ．調整結帳的步驟。 ．優化結帳流程並減少購物車放棄率。 |
| Additional Options | 額外設定 | ．啟用快速檢視或控制相關商品的顯示等以提高轉換率。 ．提升互動性和增加銷售機會。 |
Store Notice (商店公告)
是一條文字公告，可固定在頁面最末端，通常用於提醒消費者這個網站的重要訊息。
設定方法：
- 啟用商店通知，才會顯示。
- 這邊輸入要顯示的純文字內容。
- 設定字體和顏色：
- 可修改的字體：Store Notice (公告內容)、Store Notice Dismiss (關閉)。
- 建議設定顏色：Background (背景色)、Notice Text Color (公告文字色)、Dismiss text Color (關閉文字色)。
General (商店一般設定)
這頁可啟用/關閉部分設定：
- Additional WooCommerce Features：只要設定商店，就要開啟 OceanWP 的 WooCommerce 功能。
- Sidebar and Widgets (側邊欄與小工具)：
- Display Custom WooCommerce Sidebar：啟用自訂 Woocommerce 小工具，可使用側邊欄篩選器和分類列表等功能。
- Categories Widget Style：分類功能的樣式，預設是完整的分類列表，但要是分類很多，會建議選「Dropdown」下拉式清單，版面比較簡潔。
- Wishlist (願望清單)：
- Select Wishlist Plugin：要先安裝付費外掛 TI WooCommerce Wishlist 和 YITH WooCommerce Wishlist 才能選用。
- Add Wishlist Icon In Header：有安裝上述外掛，會建議在頁首顯示「願望清單」按鈕，方便消費者使用。
Menu Cart (購物車清單)
購物車清單要設定的有 7 項：
- 顯示設定：
- Visibility：裝置可見性，維持 All Devices 的預設值。
- Hide Empty Cart：是否隱藏空的購物車圖示，依需求設定。
- Display Cart When Product Added：是否在新增商品後立刻跳出購物車小視窗。
- Menu Icon (購物車圖示)：下面的樣式選 Bag Style (預設圖示)或 Icon (自選圖示)，如果想選擇頁首圖示顏色，選 Bag Style。
- Menu Icon Style：設定購物車圖示。
- Icon Display Total：在頁首顯示購買總價格。
- Icon Color：圖示顏色。
- Icon Count Color：購買數量的顏色。
- Menu Icon Behavior-Style：
- Drop-Down (跳出購物車檢視小視窗)、Go to Cart (前往購物車頁面) 和 Custom Link (自訂連結) 等選項，建議選 Drop-Down。
- 如果選 Custom Link，在下面輸入網址。
- Drop-Down Styling：選擇跳出小視窗，在這邊設定樣式，有幾個項目建議先設定。
- Cart Dropdown Width (px)：檢視小視窗的寬度。
- Link Color：商品名稱。
- Price Color：商品價格顏色。
- Total Price Color：購物車的總價顏色。
- Checkout Button Background：結帳按鈕的背景色。
- Checkout Button Color：結帳按鈕的文字色。
- Display Mini Cart On Mobile：在手機上顯示購物車視窗，建議開啟，購物體驗較好。
- Mobile Cart Sidebar：內容會直接套用第 5 點的設定，這邊只設定背景色、關閉視窗圖示色、Cart 標題色和分隔線的顏色，維持預設值即可。
Archives (商品分類頁)
設定點選商品分類時會出現的列表頁面：
- Display Options (顯示設定)：
- 顯示商店頁面和分類顯示：維持預設值。
- 預設商品排序：選擇偏好的。
- Archives Page Layout (選擇版型)：有 5 個版型可選擇。
- Product Options：
- Default Catalog View (分類檢視模式)：Grid (格狀)或 List (清單)。
- Product Per Page：每頁商品數量。
- Product Column：商品欄位數，指的是一列顯示幾個商品。
- Product Display Options (商品顯示設定)：
- Product Display Style：選擇 Hover 的話，滑鼠移到商品圖片上，會自動跳出商品其他小圖及加入購物車的按鈕。
- Display Quick View Button：顯示快速檢視產品的按鈕，按下去會跳出檢視商品的小視窗，不用點進單一商品頁。
- Content Alignment：內容對齊方式。
- Product Image Style：商品有多張圖片時，滑鼠移到圖片上的切換效果，Image Swap 是自動切換至第二張圖片。
- Elements Positioning：設定顯示的商品資訊，維持預設值即可。
- Product Description Excerpt Length：設定商品描述的摘要長度。
- Product Styling, Typography and Colors (商品樣式，包括字體和顏色)：
- 前 4 項是設定內邊距、外邊距、框線粗細和框線圓角。
- 字體：商品標題、分類、價格和加入購物車。
- 顏色：商品背景、框線、分類、標題、價格、原價、條件顯示提醒。
- Add to Cart：加入購物車的按鈕，可設定框線樣式、背景、文字等。
- Quick View：快速檢視鈕，可設定背景、文字、加載動畫、跳窗背景、跳窗關閉鈕的顏色。
- Shop Conditional：
- 設定特定條件時顯示商品。
- Display Price and Add to Cart：登入才能把商品加入購物車和價格。
- Disable Links：隱藏商店的單一商品連結，僅展示。
- Conditional Notice：提醒瀏覽者須登入才能看到更多商品資訊。
- Toolbar (工具列)：
- Grid/List Buttons (格狀/清單鈕)：開啟後，可在上方工具列將顯示模式切換為格狀或清單。
- Shop Sort (下拉排序選單)：開啟排序，可依價格、日期等條件排序商品。
- Shop Result Count：工具列最右側會顯示當前頁面的商品數量及總數。
- 顏色說明：邊框、按鈕、下拉選單背景及邊框色、商品數量顏色。
- Off Canvas Filter (篩選側邊欄)：
- Display Filter Button：顯示「篩選側邊欄」按鈕。
- Filter Button Text：設定按鈕上的文字，如「篩選分類」。
- Add Close Button：開啟後，篩選側欄會有關閉按鈕。
- 顏色說明：篩選器主色、邊框色、背景色、小工具邊框色、關閉鈕的背景色和文字色。
- Pagination (分頁設定)：
- Pagination Style (分頁樣式)：有 Standard (頁碼)、Infinite Scroll (自動加載) 和Load More (載入更多按鈕) 等 3 種。
- Infinite Scroll: Last Text：可自訂沒商品可顯示時出現的提醒文字。
- Infinite Scroll: Error Text：可自訂商品加載失敗時出現的提醒文字。
- Infinite Scroll: Spinners Color：可自訂滾動加載時的動畫圖示顏色。
- Category Page Featured Image：
- 商品分類頁上方是否要顯示分類特色圖片。
- 有設定分類的精選圖片就選「是」，無就選「否」。
Single Product (單一商品頁)
這裡設定的是，點入商品後，出現的單一商品介紹頁。
接下來的說明會分為「版面與摘要」、「圖片與加入購物車」和「附加設定」等 3 部分。
- Layout：
- Layout：跟商品分類頁的選項相同，選擇一樣的版型即可。
- Responsive Page Order：調換內容與側邊欄的左右順序 (單側邊欄版型設定)。
- Display Product Navigation：右上角是否顯示產品導航按鈕，可切換到上一個或下一個商品。
- Product Navigation：設定產品導航按鈕的圓角大小與顏色。
- Title Tag：選擇商品標題格式。
- Summary Width：調整商品摘要區域的寬度百分比。
- Product Summary Content Builder：自訂商品摘要內容的顯示項目與調換順序，有標題、數量與加入購物車按鈕、評分、價格、商品資訊和簡短描述等。
- Product Summary Typography and Colors：設定商品摘要的字體與顏色，包括標題、價格、描述、邊框、按鈕和商品資訊等。
- Single Product Image (單一商品圖片)：
- Image Width：設定單一商品圖片的寬度百分比。
- Thumbnails Layout：選擇縮圖排列方式，可選水平或垂直。
- Single Product Add to Cart (單一商品加入購物車)：
- Enable Ajax Add To Cart：建議開啟，加入購物車不需重新加載頁面。
- Add To Cart Button Style：加入購物車按鈕的大小 (Normal / Big / Very Big)。
- Add to Cart Style, Typography and Color：設定加入購物車的按鈕樣式和顏色。
- Single Product Conditional (單一商品條件顯示)：
- Display Price and Add to Cart：登入後，才可查看價格與把商品加入購物車。
- Product Notice：自訂提示訊息，例如「請登入以查看價格」。
- Conditional Notice Color：自訂提示訊息的文字與背景顏色。
- Tabs (指的是「描述 / 評論」的切換標籤)
- Tabs Layout：設定商品頁面下方的標籤排列方式，可選擇水平、垂直或區塊樣式。
- Tabs Position：調整標籤的對齊方式。
- 顏色設定：可自訂邊框顏色、文字顏色，以及當前標籤的文字與邊框顏色，還能調整描述標題與內容的顏色。
- Up-Sell and Related Items (追加銷售與相關商品)：
- Up-Sells Count：設定單一商品頁中追加商品的數量上限。
- Up-Sells Columns：調整追加商品的欄位數。
- Related Items (相關商品)：Display Related Items (是否顯示相關商品)、Related Items Count (相關商品數量)、Related Products Columns (相關商品欄位數)。
- Floating Bar (浮動工具列)
- Display Floating Bar：啟用後，當用戶在單一商品頁滾動時，最上方會顯示浮動工具列，內含商品價格與加入購物車按鈕，有助於提升轉換率。
- 顏色設定：浮動工具列的背景色、商品文字和價格、數量輸入框、加入購物車按鈕的背景色、文字色。
Product Images (商品圖片)
指定單一商品頁的主圖和商品分類頁的縮圖寬度，並設定縮圖比例。
不過，除非你有特殊需求，不然保持預設就行。
Cart (購物車頁面)
這裡設定「查看購物車」頁面的表格外觀。
左下角有「你可能對此有興趣」的追加商品欄位，要在「Woocommerce > 商品」商品頁裡的「追加商品」手動設定指定的商品，才會顯示。
- Distraction Free Cart：無干擾購物車，開啟後會把頁首、頁尾、側邊欄都關掉。
- Cart: Cross-Sells Count：購物車追加商品的數量。
- Cart: Cross-Sells Columns：購物車追加商品的欄位數量。
- 購物車頁面的顏色設定：框線、欄位小標題、欄位背景和刪除鈕顏色。
購物車頁面說明
- 頁面背景和按鈕色要回上一層的 Site Style & Settings 設定。
Checkout (結帳頁)
這裡設定的是按下「結帳」鍵後出現的頁面。
設定方式為：
- 欄位設定：建議都依照預設。
- 條款及規則：建議都依照預設。
- Distraction Free Checkout：無干擾結帳畫面，會把頁首、側邊欄拿掉。
- Checkout Style: Default and Multi-Step：開啟後，會出現好幾個步驟的結帳頁，就是會分成 Billing、Shipping 和 Payment Info 等階段結帳。
- Checkout Style: Default and Multi-Step 欄位、小標題樣式及顏色設定。
- 結帳頁的欄位外觀顏色設定。
結帳頁說明
- 隱私權政策和條款及規則，需要回 WordPress 的「頁面」編輯。
- Checkout Style: Default and Multi-Step 的頁面背景要回上一層的 Site Style & Settings 設定。
- 要在 Woocommerce 設定中，把購買地改成你指定的國家或地區，不然預設都會是美國。
Additional Options (額外設定)
這頁可設定圖片上的特價標籤、會員帳戶頁面外觀、缺貨標籤色和評分星星的顏色。
- On Sale Badge (促銷標籤)
- On Sale Badge Style：選擇促銷標籤的樣式，有圓形和方形。
- On Sale Badge Content：設定促銷標籤顯示的內容，有特價和降價百分比。
- On Sale Background：設定促銷標籤的背景色。
- On Sale Color：設定促銷標籤的文字顏色。
- My Account Page (會員帳戶頁面，須在 WooCommerce 設定 > 帳號與隱私權)
- Login/Register Style：選擇登入/註冊區塊的樣式，有「Original」(登入和註冊表單分開)和「Side by Side」(登入和註冊表單並排)。
- Login/Register Links：設定登入/註冊連結的顏色。
- Navigation: Borders：設定連結選單的邊框色。
- Navigation: Icons：設定連結選單圖示的顏色。
- Navigation: Links：設定連結選單的連結文字顏色。
- Addresses Background：設定地址區塊的背景色。
- Addresses Title Border Bottom：設定地址標題底部邊框色。
- Addresses Content：設定地址內容的文字顏色。
- Addresses Button Background：設定地址按鈕色。
- Addresses Button：設定地址按鈕文字色。
- Out Of Stock (缺貨標示)
- Out of Stock Background：設定缺貨商品標籤的背景顏色。
- Out of Stock Color：設定缺貨商品標籤文字的顏色。
- Rating Stars (評分星星的顯示顏色)
- Stars Color Before：如果評分是三顆星，剩下兩顆星會是這個顏色。
- Stars Color：評分星星的顏色。
7 種免費 OceanWP 外掛介紹
OceanWP 提供多種擴充外掛，按需求決定安裝哪種：
- Ocean Extra：最主要的免費擴充外掛，提供自訂頁面、固定式頁首、網站預載等功能，部分免費擴充外掛須要先安裝這個外掛才能使用。
- Stick Anything：利用程式碼讓指定區域有固定在頁面上的效果，不會隨著頁面滾動。
- Modal Window：用 WordPress 編輯器設定按下特定連結，就會跳出頁面視窗，類似 Popup 視窗。
- Posts Slider：將最新文章以幻燈片大圖的型態展示，可左右滑動。
- Custom Sidebar：可產生無限數量的側邊欄，並放置在任何頁面。
- Product Sharing：在單一產品頁面新增 X、Facebook、Pinterest 和電郵等分享按鈕，並自訂按鈕外觀。
- Social Sharing：支援 X、Facebook、LinkedIn、Pinterest 等社群平台的分享按鈕，並可選擇三種樣式、標題位置和顯示社群名稱。
OceanWP VS. OceanWP Pro
| 比較項目 | OceanWP | OceanWP Pro |
|---|---|---|
| 適用網站 | 個人部落格、作品集網站、形象網站、小型電商網站 | 會員網站、大型電商網站 |
| 文章功能 | ．基本版型套用 ．相關文章功能 | 自訂文章類型 |
| 選單 | 多層選單 | 可多欄 & 置入圖片的進階選單 |
| 模板 | 17 個免費模板 (Extra) | ．作品集專用模組 ．120 個完整網站模板 |
| 頁首 / 頁尾 | 多欄位、外觀設定 | ．固定頁首或頁尾 ．頁尾行動呼籲 |
| 電商功能 | ．側邊欄篩選器 ．快速檢視購物車視窗 ．快速加入購物車 ．搭配主題調整樣式 | ．像素追蹤器 (Pixel Tracker) ．條件式鉤子 (可插入任何地方) |
| 會員功能 | 無 | ．登入／註冊表單設定 ．登入後自動導向特定頁面 ．多種安全設定 |
| 動畫效果 | ．返回頂端時，平滑移動 ．下滑時能自動載入網頁 ．全螢幕分段滾動效果 (類似簡報) | ．「固定頁首」在滾動頁面時自動縮小高度，增加更多可視空間 ．「固定頁首」在向下滾動時可自動隱藏，往上滾動才會再顯示 |
| 跳出視窗 | 無 | ．內建彈窗生成器 ．Cookie 提示框 |
| 字體 | 可串接 Google Fonts | ．可上傳自訂字體 |
| 側邊欄 | ．自訂小工具 ．設定外觀樣式 | ．自訂小工具組合 ．響應式側邊欄 |
| 平台串接 | 無 | ．Instagram ．Mailchimp |
| 編輯器 | Extra 外掛提供 15 種小工具 | 提供付費版 Elementor Pro 小工具 |
| 客服支援 | WordPress 論壇 | ．專屬表單 ．電子郵件 |
| 年訂閱 (USD) | 免費 | $35 元 (僅一個網站) |
其他 OceanWP 相關問題
OceanWP 免費版可以自訂調色盤嗎？
雖然 OceanWP 沒提供這個功能，但有 2 種變通的方式：
1. 安裝 Color Palette、Block Editor Colors。
2. 用 PHP 程式碼加入佈景主題編輯器 (官方教學)。
OceanWP 適合哪種類型的網站？
OceanWP 適合大部分類型的網站，如：個人部落格、形象網站、電商網站、會員網站、課程網站。
不過，電商網站、會員網站和課程網站結構較複雜，需要 Pro 版的功能做優化。
OceanWP 支援行動裝置優化嗎？
OceanWP 有許多針對行動裝置優化的功能，並且也能搭配同樣具響應式的頁面編輯器 (如 Elementor)，讓使用者能夠在各個裝置上都能有最好的體驗。
OceanWP 有提供客服支援嗎？
OceanWP 針對一般付費方案提供客服支援，主要有下列 2 個管道：
1. 在後台填寫工單頁面。
2. 寫信給 [email protected]。
