OceanWP 是一個非常全面的 WordPress 主題
OceanWP 是一個免費可使用的 WordPress 主題 (theme)，又稱佈景主題。讓網頁的用戶可用性、性能、甚至響應式設計，都是非常不錯的。
本 OceanWP 教學會對該 WordPress 佈景主題做整體介紹，並對跟 OceanWP WordPress 主題配套的配件外掛的使用做說明。加上配件外掛後，可讓你的 OceanWP 主題 WordPress 網站的功能更加強大。
- 下載和安裝 OceanWP 佈景主題
- OceanWP 的免費配件外掛
- 安裝 Ocean Extra 外掛
- 啟用 Ocean Extra 外掛
- Ocean Demo Import 外掛
- Ocean Stick Anything 外掛
- Ocean Modal Window 外掛
- OceanWP 付費版本
- OceanWP 的付費配件外掛
- Ocean Sticky Header 外掛
- Ocean Elementor Widgets 外掛
- Elementor 網頁編輯器
下載和安裝 OceanWP 佈景主題
安裝 OceanWP theme (佈景主題) 前，你必須先完成 WordPress 的安裝。具體可參考 WordPress 教學 (安裝)。
選中 Appearance，並點擊 Themes。
到 Themes 頁面後，點擊 Add New。
在 Add Themes 頁面的關鍵字搜尋框中輸入 Ocean WP。
結果中出現 OceanWP 主題後，點擊 Install。
接著點擊 Activate。
這時候，OceanWP 主題已經完成安裝。
OceanWP 的免費配件外掛
除了主題本身，OceanWP 提供免費的多個配件。其實在 WordPress 的環境中 OceanWP 配件就是外掛。
Ocean Extra (配件) 是一個你必須安裝的外掛。
其他 OceanWP 系列的外掛，都屬於可選配件，可根據你建網站的需要再決定是否下載和安裝。
以下是所有 OceanWP 系列的免費外掛：
- Ocean Extra (必須安裝)
- Ocean Demo Import
- Ocean Stick Anything
- Ocean Custom Sidebar
- Ocean Modal Window
- Ocean Posts Slider
- Ocean Product Sharing
- Ocean Social Sharing
安裝 Ocean Extra 外掛
下載、安裝、激活
我們用 Ocean Extra 作為在 WordPress 網站中安裝免費外掛的例子說明。之後，其他免費外掛的安裝只需按照 Ocean Extra 的安裝流程就可以了。
在左邊主菜單選中 Plugins，並點擊 Add New。
在 Add New Plugins 頁面上的關鍵字搜尋框輸入 Ocean Extra。
在外掛結果中的 Ocean Extra 點擊 Install Now，再點擊 Activate。
現在 Ocean Extra 外掛的安裝和激活都完成了。
啟用 Ocean Extra 外掛
創建新博文頁面
這時候，選中 Posts 並點擊 Add New，去創建一個新博文頁面 (new blog post page)。
進入 blog post 後會見到編輯器 (可能是 Gutenberg 或 Classic Editor；如果需要切換編輯器，可參考 Classic Editor 教學)。
往下滾動到見到 Ocean Extra 的選項。
免費版本 OceanWP 主題中的 Ocean Extra 提供對以下模塊修改的功能：
- Main
- Shortcodes
- Header
- Logo
- Menu
- Title
- Breadcrumbs
- Footer
不單止博文頁面 (Posts) 能啟用 Ocean Extra 的功能，還有包括頁面 (Pages) 下創建的所有頁面。
Theme Panel 中的 MyLibrary
安裝 Ocean Extra 後，在左邊主菜單上，你會見到 Theme Panel。Theme Panel 是 OceanWP 主題提供的工具。
進入 Theme Panel 下的 MyLibrary，你可給 WordPress 網站創建可重複使用的頁面模塊。
除了 MyLibrary，Ocean Extra 外掛還會同時啟動以下功能模塊：
- Scripts & Styles
- Import/Export
- Sidebars
- Hooks
- Install Demos
- Account
- Add-Ons
Ocean Demo Import
OceanWP 通過 Ocean Demo Import 提供 13個免費 Demo 網站主題。
使用這些主題，可省掉你從頭設計網頁的時間。
如果你升級到 OceanwP Premium (即，付費版本)，更可以獲得 60個付費 Demo 網站主題。
你也可選擇不使用任何 Demo Import 裡提供的 WordPress 網頁主題。
你可通過使用視覺化網頁編輯器，例如 Elementor，去創建/設計自訂的網頁主題。
Ocean Stick Anything 外掛
進行網頁設計的時候，你可能將網頁分為兩個列(two columns)。當然這個設計是專門提供給台式電腦 (desktop) 和平板設備 (tablet，例如 iPad) 使用。
網頁的右側可能是一個菜單。一般情況，用戶用鼠標將網頁往下滾動，就會看不見右邊菜單。
為了提升用戶體驗 (user behavior)，你希望右側菜單不管什麼時候都在台式電腦螢幕出現。
通過 Ocean Stick Anything 外掛，你可將菜單固定。用戶將頁面往下滾動的時候，右側菜單會一直保持在瀏覽器/螢幕可見範圍裡。
Ocean Modal Window 外掛
通過 Modal Window 外掛，你可給 WordPress 網站創建彈出式浮窗 (popup floating window)。
Modal Window 使用場景1
舉個例子，Modal Window 的使用場景可以是網站給用戶提供一個彈出式浮窗形式的註冊表單，或一個聯絡表格。
Modal Window 出現後，用戶還能稍微看得到背後的網頁，但熒幕的專注點已經換成彈出式浮窗。
當用戶點擊背後的網頁部分，Modal Window 會自動消失。
Modal Window 使用場景2
另一個彈出式浮窗例子是，用戶打開網頁 5-10秒鐘後，彈出式浮窗會出現，並提供一些提示，通常會是 promotion (推廣商品/服務) 類型的提示。
這類型的提示以 Modal Window 展示給台上電腦 (desktop) 用戶沒有大問題。但給手機用戶提供就必須更為謹慎。
對於手機版本的網站，Google 並不建議面積大的 popup (彈窗)，尤其是將整個熒幕幾乎都覆蓋的 modal window，問題就會更嚴重。有可能會導致網頁在手機版 Google 上的自然搜尋排名下跌。具體可參考超過 200個 Google SEO 排名規則。