OceanWP 教學
OceanWP 是一個非常全面的 WordPress 主題
OceanWP 是一個免費可使用的 WordPress 主題 (theme)，又稱佈景主題。讓網頁的用戶可用性、性能、甚至響應式設計，都是非常不錯的。
本 OceanWP 教學會對該 WordPress 佈景主題做整體介紹，並對跟 OceanWP WordPress 主題配套的配件外掛的使用做說明。加上配件外掛後，可讓你的 OceanWP 主題 WordPress 網站的功能更加強大。
下載和安裝 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 排名規則。
OceanWP 付費版本
OceanWP 提供 Premium，即付費版本。OceanWP Premium 在原來的主題基礎上給 WordPress 網站提供更多的功能。
Premium 中有 3個級別：Personal (個人)、Business (商用) 和 Agency (代理) 。
Personal (個人)
- 年費：US$39 (必須每年續費)；或永久使用權費用：US$159 (以後無需續費)
- 包含 1個 WordPress 網站的使用權許可
Business (商用)
- 年費：US$79 (必須每年續費)；或永久使用權費用：US$319 (以後無需續費)
- 包含 3個 WordPress 網站的使用權許可
Agency (代理)
- 年費：US$129 (必須每年續費)；或永久使用權費用：US$519 (以後無需續費)
- 包含 25個 WordPress 網站的使用權許可
3個級別都包括以下：
- 8個免費外掛，13個付費外掛
- 13個免費 Demo 網站主題，60個付費 Demo 網站主題
要升級到 Premium，必須到以下官網購買：
https://oceanwp.org/
在官方網站，你會需要註冊在官網上一個 OceanWP 帳戶。
OceanWP 的付費配件外掛
購買 Premium 版本後，可將更多的功能，通過 WordPress 外掛的方式安裝到網站上。
首先，打開你用來註冊 OceanWP 的電子郵箱，你會接收到一封來自 OceanWP 的電郵。
電郵裡有你 OceanWP Premium 版本的授權碼 (license key)，並有每一個付費外掛的下載連結。
你可選擇只下載你需要的配件外掛，或下載全部外掛。
這時候，回到 WordPress 管理後台，選中 Plugins，並點擊 Add New。
點擊 Upload Plugin 連結。
點擊 Choose File，並選中其中一個你剛才完成下載的 OceanWP 配件外掛，點擊 Open。點擊 Install Now。
之後，在 Plugins 頁面上將 Ocean Sticky Header 激活/啟用就可以。
每一個 OceanWP 付費版本提供的外掛，都可按以上方法安裝並激活。
以下是 OceanWP 付費版本提供的所有配件外掛：
- Ocean Sticky Header
- Ocean Elementor Widgets
- Ocean Hooks
- Ocean Popup Login
- Ocean Side Panel
- Ocean Sticky Footer
- Ocean Footer Callout
- Ocean Instagram
- Ocean Woo Popup
- Ocean White Label
- Ocean Cookie Notice
- Ocean Full Screen
Ocean Sticky Header 外掛
你搭建的 WordPress 網站是會有頭部部分 (header section)。頭部部分中，一般會包含網站 logo 和主導航菜單。
用戶在瀏覽網站的時候，可將鼠標往下滾動。向下滾動的過程中，網頁的頭部部分會移出螢幕。
Ocean Sticky Header 外掛被啟用後，在你 WordPress 網站的台式電腦版本和手機版本都會出現。
Ocean Elementor Widgets 外掛
安裝了 Ocean Elementor Widgets 外掛後：
- 你可通過 drag and drop (拖與放) 的方式，在網頁上添加 Elementor 元素
- 在網頁上你可添加並使用以下至少 46個視覺化元素
元素：
- Accordion
- Advanced Heading
- Alert
- Animated Heading
- Banner
- Blog Carousel
- Blog Grid
- Brands
- Business hours
- Buttons
- Button Effects
- Call To Action
- Circle Progress
- Countdown
- Divider
- Flip Box
- Google Map
- Hotspots
- Image Comparison
- Image Gallery
- Info Box
- Instagram Feed
- Link Effects
- Logged In/Out
- Logo
- Member
- Modal
- Navbar (a vertical navigation menu)
- Navigation (a horizontal navigation menu)
- Newsletter Form
- Off Canvas
- Price List
- Price Table
- Recipe
- Scroll Up
- Ajax Search
- Search Icon
- Skillbar
- Table
- Tabs
- Timeline
- Switch
- Login Form
- Lost Password Form
- Register Form
- Contact Form 7
在博文 (Posts) 或頁面 (Pages) 編輯器中，點擊 Edit with Elementor 按鈕，就可切換到 Elementor Canvas 編輯模式。
所有 Elementor 元素都會在 Elementor Canvas 模式的左邊菜單中找到。
Elementor 網頁編輯器
Elementor 是一個視覺化網頁編輯器 (visual page builder)，同時是一個 WordPress 外掛。
Elementor 提供免費版本和付費版本 (Pro)。例如 Elementor Pro 會包括 Form 模塊 (參考 Elementor 表單教學)
OceanWP 主題完全能跟 Elementor 兼容，並在同一個網站中使用。
前提假設是你 WordPress 網站已經安裝過免費版本的 Elementor 頁面編輯器 (外掛) – 安裝方法跟安裝任何一個 WordPress 外掛類似。
要使用 Elementor，可在登入 WordPress 管理後台後，從左邊主菜單選中 Plugins，點擊 Add New。
在外掛頁面的關鍵字搜尋框中輸入 Elementor。在結果中點擊 Install Now，接著點擊 Activate。
從左邊主菜單選中 Pages，並點擊 Add New 創建新頁面。
進入新頁面的編輯器後，輸入頁面標題，並點擊 Publish 發佈網頁。
編輯器刷新後，會見到該文章頁面的 Edit with Elementor 按鈕。點擊按鈕後，文章就會切換到 Elementor Canvas 的視覺頁面編輯器。
WordPress 外掛, 設定, 優化技巧
WordPress 網站 SEO：
WordPress 網站的設定與優化技巧：
- WordPress 教學 (安裝)
- WordPress Google Analytics 教學 (3個安裝方法)
WordPress 外掛：
開設 WordPress 網店：
關於 OceanWP theme，我寫過這篇英文版的文章。