WordPress

將 Notion 文章內容匯入到 WordPress

Notion 的編輯器對於寫文章來說是一個很好的工具，相對於 WordPress 的古騰堡編輯器順手很多，所以我在思考能不能用 Notion 來寫作，然後同步到 WordPress?

Notion vs. WordPress 古騰堡編輯器 * 小程故事

由於 Notion 目前沒有官方的 API，所以要自動同步文章到 WordPress 目前還無法做到，必須要手動來做。雖然有人透過 reverse-engineering 的方式開發了一套 Go lang API，不過這畢竟不是正規的做法，參考參考就好囉。本篇文章除了介紹如何在 Notion 中寫文章並匯入到 WordPress 網站，你也可以比較一下兩者在內容顯示上的差異。

註：本篇文章由 Notion 攥寫後，匯出為 Markdown 格式再匯入到 WordPress 中。除了設定標題、複製貼上內容圖片以及設定特色圖片、編輯 Loom 影片嵌入方式和本段文字外，沒有做其他的編輯，您可以比較其中的差異。Notion 文章頁面：https://www.notion.so/yuchengblog/Notion-WordPress-1f24f42187d0427a8ddb0a7c59a52748

匯出

Notion 支援 Markdown 語法，且可以匯出 Markdown 格式的內容，所以在匯出的部分算是解決了。匯出文章的 Markdown 檔案後，使用編輯器打開，並全選複製內容。

在 Notion 中匯出 Markdown 格式

匯出的資料夾包含了 markdown 格式的文件內容和圖片

匯入

由於目前內建的 Gutenberg 編輯器不支援 Markdown 語法，所以必須靠第三方外掛來支援。這邊使用的是之前提到的 EditorsKit，EditorsKit 支援 Markdown 語法，請先安裝並啟用 EditorsKit。在第一個步驟完成匯出並複製內容後，打開古騰堡編輯器，直接貼上內容即可。

複製 Markdown 內容並貼上到古騰堡編輯器

格式

以下列出一些常用的內容格式，您可以跟 WordPress 的文章內容做比較

一般文字

文字色彩

粗體

斜體

  • 清單

標題1

標題2

標題3

這是一段引言

感想

使用 Notion 當作編輯器在整個書寫的過程真的流暢很多，當然這樣的方式目前還是存在著一些問題。整理如下：

優點

  • 使用 Notion 寫作，提升撰寫體驗。
  • 由於 Notion 本身有頁面的歷史紀錄(Page History)，所以可以用來取代 WordPress 的版本紀錄(Revision)，節省資料庫空間。
  • 你可以使用 Notion 作為文章的靈感收集、排程規劃和寫作工具，將整個內容發佈流程集中在 Notion 中。參考：How to Use Notion for Blogging。

缺點

  • 許多樣式並不支援，例如在 Notion 分兩欄顯示，匯出後 Markdown 並不支援這樣的顯示。如果想要維持同樣的顯示，就必須要再自行編輯。另外文字的顏色也是不支援的。
  • 在 Notion 中如果要插入站內文章，必須切換回 WordPress 來找到該篇文章的連結，相對不方便(或是文章連結留到匯入WP後再處理)。
  • 圖片需要另外上傳。在古騰堡中你可以直接複製下載的圖片並在編輯器中直接貼上。或是你可以在 Notion 寫文章時，插入外部圖床圖片(Flickr等)，這樣在匯入 WordPress 時就不用再上傳圖片。若原本 Notion 中的圖片有設定說明文字(Caption)，則在匯入 WordPress 後說明文字會變成另一個段落內容。

以上就是我針對 Notion 作為部落格文章編輯器的嘗試，希望日後 Notion 開放 API 之後，能夠讓整個書寫和發佈文章的流程更加順暢。

安裝 WordPress 本機端環境

如果你想要貢獻 WordPress，例如修正一個 bug，或是針對其他開發者所提交的 patch 進行測試，那麼首先你必須要有一個本機端的開發環境，這個開發環境跟我們之前介紹的架設網站的開發環境不太一樣。因為在修正bug或是測試時，所針對的版本一定是目前開發中最新的程式(尚未發佈)，所以透過建置這個環境，你可以確認每個開發者的開發環境都是一致的，也比較不會產生其他問題。

如果你要建置 WordPress 本機端環境 (WordPress Local Environment)，首先你必須要確認你的電腦中有安裝 Docker 以及 node.js。

1.下載最新開發中版本 WordPress

WordPress 目前開發中的版本可以在 Github 上找到，請透過 git 指令將程式碼下載到你電腦中的資料夾。

下載完成後，切換到安裝的目錄中，可以看到整個檔案目錄結構，可以看到這跟我們一般架設網站時所安裝的 WordPress 資料夾並不一樣，這個資料夾包除了包含了 WordPress 本身的核心檔案外(src資料夾中)，還包含了一些讓本機環境執行起來的設定檔，以及開發和測試的相關工具。

2.執行 npm install

在你剛剛下載核心程式的資料夾中，執行 npm install。這個指令會根據 package.json 中的定義安裝相關的套件到 node_modules 資料夾中。

3.執行 npm run build:dev

這個指令會執行一些工作，例如確認程式碼的格式是否符合標準，同時根據設定將程式準備適合開發者使用。

4.執行 npm run env:start

這個指令會啟動 docker。

啟動之後，在瀏覽器輸入 http://localhost:8889，即可連線到剛啟動的 WordPress 網站。

5.執行 npm run env:install

6.執行 npm run env:stop

如果你要停止開發環境，請執行 npm run env:stop

結論

以上就是使用官方的工具來架設本機的開發環境，如果你要貢獻 WordPress 核心，這絕對是不可忽略的第一步喔！

參考資料

Notion vs. WordPress 古騰堡編輯器

最近在學習使用 Notion 作為 Evernote 的替代工具 ，突然覺得 Notion 的編輯模式跟 WordPress 的古騰堡 (Gutenberg) 編輯器有幾分類似，雖然這兩者的設計和使用定位不一樣，但就編輯的這個概念應該是可以互相學習的。不相信嗎？來看看吧！

核心概念

  • Notion：將內容分成不同的 Block，Block 是不同的內容元件，例如文字、圖片、To Do List。免費的帳號可以使用 1000 個 Block。
  • 古騰堡： 官方都直接稱呼為區塊編輯器(Block Editor)了，應該就不用多做解釋了吧。

開始編輯&加入區塊

在 Notion 和 古騰堡的編輯器中，都可以直接輸入文字來開始編輯，預設的就是文字段落區塊。如果你要加入不同的區塊，都可以透過輸入斜線(/)，來快速選擇要加入的區塊。不同的是，在 Notion 中除了可以選擇區塊外，還可以執行一些命令，例如輸入/delete 可以刪除當前的區塊。輸入/color 可以改變當前區塊文字的顏色。

Notion：輸入斜線來選擇要加入的 Block。
Gutenberg：輸入斜線來選擇要加入的區塊

移動區塊

在 Notion 和古騰堡中，都可以透過拖曳的方式來改變區塊順序。

Notion：滑鼠按住區塊左邊的六個灰點，透過拖曳的方式來改變順序。若是點擊的話可以叫出 Action 選單。

Gutenberg：一樣是透過滑鼠按著區塊左側的六個灰點來拖曳改變順序，另外也可以透過上下的箭頭來改變順序。

變更和轉換區塊

在 Notion 和古騰堡中，都可以將目前的區塊轉換成不同的區塊，但 Notion 可以選擇的操作方式相對多了一點也比較彈性。

Notion：點擊區塊左側的六個灰點來開啟選單，點擊 Turn Into 選單來選擇要轉換的區塊

Notion：在區塊內容在區塊內容的任何一個地方輸入 /turn 來開啟快速選單，選擇要轉換的區塊

Notion：可以一次選擇多個區塊，透過滑鼠右鍵來開啟選單，點擊 Turn Into 來批次轉換成其他區塊

Notion：雙擊文字內容或選擇文字可以叫出工具列，在工具列上的最左側會顯示目前的區塊類型，也可以選擇轉換成其他區塊

Gutenberg：在區塊的工具列上可以改變區塊的類型

工具列

Notion 和古騰堡編輯器針對行內文字都提供了工具列，讓你可以快速編輯文字的樣字、加入連結或是進行其他動作。

Notion：如果要針對行內文字進行樣式設定，需要雙擊文字，或用滑鼠選擇文字，來叫出工具列，在工具列中你可以變更文字樣式，例如常見的粗體、斜體或是加入連結等動作。

Gutenberg：當你滑鼠點擊了某個區塊，就會直接開啟工具列，個人覺得會有點干擾，因為我可能只是要輸入文字，不一定是要改變文字樣式或是做其他動作。在只是要單純輸入文字的狀況下，這個工具列因為會遮住上方的內容反而造成視覺上的干擾，折衷的方式是在設定的地方，將工具列置於編輯器的頂部，但相對的又會影響編輯的順暢度，變成要修改文字樣式滑鼠就必須再移到畫面的上方。

心得

Notion 和 古騰堡編輯器在編輯上同樣都是以區塊 (Block) 為核心概念，但在操作的一些小細節上仍有些微的不一樣。

Notion 作為筆記和協作軟體在一些編輯的體驗上還是做得比較好一點，古騰堡則還有一些進步的空間，例如要修改行內文字 (inline text)，古騰堡就必須另外安裝外掛來達到。另外古騰堡的工具列在單純編輯內容的時候，多少會有點干擾，希望能有改善的方式。但總體而言，兩者都是很好的工具，古騰堡編輯器作為開放原始碼的工具，相信會有更大的改善和擴充空間。

延伸閱讀：

[Gutenberg] – 如何替行內文字加上顏色和背景色

最近在使用 Notion，覺得 Notion 在編輯上真的蠻順手的，在整個撰寫文章的過程中，動作不太會被打斷。回到 WordPress 的古騰堡編輯器中就會發現有一些小地方還是做得不是那麼理想。

不過既然 WordPress 是開放原始碼的軟體，自然有辦法改善。這次我們要改善的就是幫文字區塊中的行內文字(inline text)加上顏色和背景顏色。

在預設的古騰堡編輯器中，段落區塊的內容是可以改變文字或背景顏色的，但是顏色的調整會套用在整個區塊內容中。調整的地方是在右側區塊資訊欄中的 [色彩設定]，可以調整整個段落區塊的背景顏色和文字顏色。

段落區塊色彩設定

但有時候在寫文章時，會希望透過修改文字顏色或是背景顏色來強調部分行內文字內容，使用預設的古騰堡段落區塊就無法做到了，這時候就要安裝第三方的外掛來達到這樣的目的。

如果要修改部分行內文字顏色和背景色，有幾個外掛可以做到。

Advanced Rich Text Tools for Gutenberg

第一個外掛是 Advanced Rich Text Tools for Gutenberg，這個外掛是由 Automattic 的員工 Ella Van Durpe 所撰寫的，相信有一定的品質，另外這個外掛也已經由阿力獅提供了繁體中文的翻譯。

Advanced Rich Text Tools for Gutenberg

這個外掛除了可以針對行內文字設定顏色和背景顏色外，還提供了其他的功能，例如標示為程式碼片段、標示為上標和標示為下標等功能。不過標示行內文字顏色的功能跟預設的文字區塊顏色設定都是在右側的區塊資訊欄中進行設定，就撰寫來說感覺比較不是那麼直覺，而且因為這個功能是針對行內文字，放在整個區塊資訊欄中似乎比較不是那麼合理，但這個外掛的其他功能，像是上標和下標卻又是放在工具列中，這就有點摸不著開發者當初的設計邏輯了。

修改行內文字顏色和背景顏色

Gutenberg Page Building Toolkit – EditorsKit

另外一個外掛是 Gutenberg Page Building Toolkit – EditorsKit，或簡稱 EditorsKit。EditorsKit 是由 Jeffrey Carandang 所撰寫，Jeffrey 本身是 Phpbits Creative Studio 的創辦人，開發多個 WordPress 外掛，包含知名的 Widget Options 。另外他也是 CoBlocks 的共同創辦人，CoBlocks 已經於 2019年4月被 GoDaddy 收購。

Gutenberg Page Building Toolkit – EditorsKit

EditorsKit 在功能的設定設計上我覺得就比較符合我對文字編輯工具的想像，針對行內文字的相關設定都是在 Toolbar 中來進行設定，在編輯的過程中可以專注在整個編輯區域，不用再跳到右側的區塊資訊欄。

EditorsKit 除了文字格式外還提供了一些額外的功能：

  • 可修改標題的文字顏色和背景色
  • 針對桌機、平板、手機來顯示或隱藏區塊
  • 針對使用者登入或登出的狀態來顯示或隱藏區塊
  • 針對 Advanced Custom Fields(ACF) 欄位的值來顯示或隱藏區塊
  • 顯示區塊的導引線(Guide Line)
  • Markdown 語法支援

心得

以上，就是我針對行內文字顏色的外掛介紹，你可以選擇一個符合自己使用習慣的外掛，我個人的話會選擇 EditorsKit，因為他比較符合整體編輯的流程，且提供了許多額外的編輯功能，個人覺得也都相當實用。如果你有其他不錯的外掛，也歡迎在留言區留言推薦給大家。

初探 Twenty Twenty 主題

WordPress 5.3 即將於 11 月推出，其中將會包含一個新的預設主題 Twenty Twenty，這個主題將會完全地支援古騰堡編輯器。讓使用者在編輯的時候可以確保編輯的結果跟最後呈現的樣式一致。

為了加速主題的開發，Twenty Twenty 將會以 Chapin 這個主題為基礎，這個主題已經發布在 wordpress.org 上。

如果你要看目前 Twenty Twenty 的頁面設計，可以參考以下連結：

發布時程

根據官方的發布時程，WordPress 5.3 將於 11/12 推出，第一個發布版本預計於 10/15 推出。

參與貢獻

如果你有興趣貢獻 Twenty Twenty，你可以追蹤 WordPress core 的部落格文章，在整個設計和開發的流程中，在 Slack 的 #core-themes 頻道，每週都會有線上的會議。

主題的開發將會在 Github 上進行，目前開發中的版本已經上傳到 https://github.com/WordPress/twentytwenty。當主題開發完成，將會被合併到核心中，同時 Github 的 repo 將會被關閉。

相關連結

Introducing Twenty Twenty
Why Default Themes Change Each Year

WordPress 備份插件 – 使用 duplicator 備份網站

網站的備份是每個網站管理者必備的技能之一，今天我們要介紹一個簡單易用的備份插件：duplicator。duplicator 目前已經有超過100萬個網站安裝

duplicator 並不只是一個備份的插件，她還可以協助你搬移網站。安裝並啟用插件後，進入後台->Duplicator->Packages，Package 清單會列出你過去的備份記錄，點擊 Create New 來新增備份。

新增備份的過程會透過1、2、3步驟來引導你，相當的清楚。第一個階段是 setup，在這個階段你可以設定你的備份的名稱，可以設定一個方便辨識的名稱，通常是日期為開頭，讓你知道這是哪一天的備份。

Storage 可以設定備份好的檔案要儲存在哪裡，預設是網站下的 wp-snapshots 資料夾。進階版可以將備份檔上傳到第三方儲存服務，例如 Dropbox、Google Drive、AWS S3 等服務。

Storage

Archive 可以設定什麼資料要打包進你的備份檔，包括檔案和資料庫。在 Files 分頁你可以設定要排除的資料夾或檔案，如果要排除請先將 Enable File Filters 啟用。你可以排除資料夾(Directories)，或是使用檔案副檔名(File extensions)以及特定檔案(Files)來過濾不要的資料

常見的一個資料夾是快取外掛的資料夾 cache，這個資料夾存放著快取的檔案，這類檔案都可以透過快取外掛重新產生，所以沒有必要打包進備份檔，避免增加檔案的大小。

資料庫(Database)的分頁可以設定你要打包的資料表(Table)，一般不會特別去設定，畢竟我們希望的是完整的備份資料庫。如果你真的清楚你在做什麼，再進行這邊的設定。

若你的備份檔是希望安裝在另一台主機的話，Installer 這個設定可以幫你產生一個安裝檔，方便你安裝，這個設定不是必要的。即使不填的話，你在安裝的時候也可以手動輸入。

確定都設定好後，按下 Next 進入下一步。第二階段會根據你的設定掃描的的網站，掃描完成後會顯示掃描的結果。若是正常的會顯示 Good，代表你可以繼續完成打包的工作。若不正常會顯示紅色的 Fail。點開每個設定會顯示詳細的資訊或是錯誤訊息。

若掃描的結果都正常，請按下 Build 來進行打包。打包的時間會決定於網站的檔案和資料庫大小，若你使用虛擬主機，很有可能在這一個階段timeout，導致打包失敗，若失敗建議回到第一步驟，將不必要的檔案排除掉，再重新進行打包。

打包完成！你可以下載打包好的檔案(Archive)，若你要將此備份檔安裝在其他主機，請一併下載 Installer 安裝檔。

下載下來備份檔，解壓縮後可以看到網站的整個目錄和檔案，其中還包含了備份的資料庫檔案 database.sql

以上，就完成了基本的備份。下一篇文章會跟大家說明，如何將此備份檔安裝的其他主機上。

參考資料：

How To Move Or Backup Your Website With The WordPress Duplicator Plugin

How To Use Duplicator WordPress Plugin to Migrate WordPress Hosting: DIY Guide

Duplicator: An Easy Way to Back Up, Copy, or Clone Your WordPress Content