使用古騰堡來排版頁面

廢話不多說，我們直接開始吧，今天主要來聊聊如何使用Wordpress自帶的視覺化頁面編輯器。我相信只有駕馭最基礎的視覺化排版，後面才能對高階版本的擴充套件視覺化編輯器elementor有著更深刻的理解。

圖文排版

1，登入WP後臺管理頁，找到文章，去新增一個文章。如圖（我把之前的示例清空了），

新增之後，列表會出現在下面。

進入新增文章之後，先把標題新增上，固定連結，最好自己設定，方便SEO，分類的話，我這邊先寫個案例。以方便演示，後面會講分類的設定。設定完成後，我們可以先點選一下儲存草稿。WP預設也會實時地儲存。

下面為了避免版權問題，我們先去找一個神器，［狗屁不通文章生成器］，隨機生成一篇文章。生成好文章後，按照下面的方式新增進去

也可以按左側的新增板塊，將需要的板塊拖拽到內容區域。

我們可以直接從左側操作欄拖拽一個圖片放在文件的開頭。圖片可以來自URL，也可以媒體庫。

如果我們需要新增圖片與文字的組合，我們可以使用列，

在文章的任意地方，我們可以新增一個列，根據需要，來進行對列的選擇。比如，我們選擇7/3分。

我們在第一列選擇圖片，第二列選擇文字，

其實這樣的多列看起來總是缺乏很多的違和感，我們還可以用古騰堡提供的媒體圖文塊，

調整一些排版，就可以像這樣。

就這樣，看起來就像雜誌的排版。下面，我們來組多圖插入，做一個畫廊，

直接拖拽過來，從媒體庫選擇一組圖片。古騰堡會自動進行圖片排版。

最後，我們來為文章插一個封面，

釋出一下，我們回到部落格主頁看看，

好了，到現在為止，圖文排版差不多就這樣了。還有更多的板塊，同學們可以自由去發揮，比如插入影片，圖表，子標題，連結到別的網站等內容。

Qubely古騰堡的神兵利器

去外掛下載一個qubely，完成安裝啟用。我們只需要使用其免費功能即可。

啟用後，我們來新增一個主頁，作為我們開啟部落格頁面的門面。如下圖

此時，我們開啟主頁進行編輯，發現很多高階塊，可以隨意拖拽到內容區體驗下。

我們現在可以拖拽一個圖片過去，並更改頁面模板，為全寬（Qubely Full Width），如下，

我們選中圖片區塊，在右側的操作欄，可以看到區塊的樣式，並從此處去選擇媒體庫中的圖片，

這裡只是一個示例，現在我們可以把圖片刪掉，新增一個行塊，來增加更復雜的組塊。如下圖，

我們可以在高階你們設定內邊距，外邊距等。我們也可以為行塊新增一個背景圖片，使其更有層次感。照著自己的感覺去調整。

調整完成後，我們可以直接把我們剛才的文章，新增到我們的首頁，

根據自己的需要，完成一些調整設定後，我們點擊發布。釋出完成後，我們可以去自定義網站，將該頁面設定為我們的網站首頁。步驟如下，

確認無誤後，點擊發布，即發現，現在的首頁已經是我們設計的啦。（如果覺得自己做的首頁不好看，不設定，也沒有關係，我們後面有機會還會講更強大的網頁編輯器，只需要簡單地拖拽，就可以完成隨心所欲的頁面）

我做的頁面感覺實在不好看，我給刪了，用預設的頁面

分類和標籤

分類，即是把文章按照樹形結構進行排列分組。可以對分類進行父子關係的組合。而標籤，主要的目的是提取文章的核心關鍵詞，以便搜尋引擎索引。一篇文章的核心關鍵詞不建議超過五個。

設定分類，建議別名使用英文，方便SEO

我這邊按照我的程式設計計劃，設定一些內容。完成類別的設定後，我們去自定義選單，將分類作為選單。

我們先建立一個主選單。

在管理位置中，將選單新增至頁首的選單

這樣，我們回到首頁，便可以看見選單已經配置到我們的主頁面頭部了。

我已經在選單中，調整過想要展示選單的順序了。

頁首和頁尾設定簡介

關於頁首與頁尾，這期只簡要提到一下，不做深入講解。我貼幾張圖，從左往右，大家去操作一下，即刻能明白其中的意思。比如頁頭，

頁尾也這樣，

我們可以對具體的內容進行編輯。比如對社交媒體進行編輯。

尾記

至此，一個基本的屬於自己的部落格網站，已經差不多設定完成了，剩下的功能，需要同學們自己去多折騰折騰。我自己在操作的過程中也一直再思考一個問題，要不要把部落格的風格再升級的花裡胡巧一些。後來都被我否定了。

對於我們核心的目的是寫內容，儲存內容，我想這樣簡簡單單，使用者看完內容就走。不去設定各種彈窗廣告去騷擾。也不要新增過多的外掛，避免影響網站的穩定性等問題。

然？就這？結束了？

No，這怎麼可能。我的意思是說，作為一個部落格網站的基本功能，現在已經具備了，我們需要花一些時間填充一些文章。直到我們遇到下一個問題。比如運營過程需要對SEO進行最佳化。對訪問進行統計。需要表單對反饋資訊進行收集等。甚至，我們需要銷售一些自家的產品，等等。

既然我們的主線是電商，下一篇開始Woocommerce咯。