如何使用 Gutenberg 創建博客頁面(基於 Gutenberry 主題)

已發表: 2019-10-31

從本教程中,您將找到使用 Gutenberg 編輯器和 GutenBerry 主題創建博客頁面所需的一切。

使用 Gutenberg 創建博客頁面

博客頁面是一個頁面,您的訪問者可以在其中查看您網站上現有的所有出版物。 它是一個動態頁面,這意味著它會顯示您網站上添加的出版物,從最近到最早,按日期排序。

重要的是要知道,目前您可以設計出版物的顯示方式,但是,帖子摘錄、特色圖片、帖子元和標題將從出版物中提取。

您需要確保您的網站上有出版物,並且您已經預先設置了特色圖片以及您想要在帖子列表中的博客頁面上展示的所有信息。

要在您的網站上創建博客頁面,您需要轉到頁面 > 添加新頁面,我們開始了!
首先,您必須選擇頁面的名稱。 我們將其命名為“我的第一個博客頁面”,但您的頁面名稱必須是一小段介紹。

您可以使用經典的古騰堡帖子塊填充頁面。 但是,如果您想節省時間並獲得更多額外設置來自定義您的博客頁面,您可以使用 ZeGuten 插件。 它有 5 個響應式帖子佈局,使您的頁面更具吸引力和吸引力。

創建帖子

創建基於 Gutenberry 的博客頁面

創建博客頁面後,您可以導航到儀表板 > 設置 > 閱讀,然後在此處找到帖子頁面下拉列表。 指定您剛剛創建的頁面並點擊保存更改按鈕。

恭喜! 現在您已將新創建的頁面指定為您的博客頁面。 但是,您仍然可以通過多種方式對其進行自定義並使其獨一無二。

在定制器中打開新創建的博客頁面並訪問博客設置選項卡,然後轉到博客選項卡以查看您可以執行的操作。

定制博客

默認情況下,您很可能會看到您網站上的所有出版物都顯示為列表。 要更改出版物的顯示方式,請使用:

佈局博客類型 - 在這裡您可以從下拉列表中選擇一種佈局,使您的出版物顯示為網格。

列 – 當您為博客設置網格佈局後,您將看到下拉列表以選擇將在其中顯示帖子的列數。

博客設置

還有一些設置可以幫助您決定要展示的帖子的元數據:帖子作者、發布日期、類別、標籤、評論數等。

最後一個複選框允許您啟用要顯示的帖子摘錄。

啟用顯示閱讀更多按鈕,讓訪問者點擊它並導航到單個帖子頁面。

此外,您必須設置粘性標籤類型以將您的帖子標記為粘性(如果有)。

為博客頁面啟用導航

當您的網站上有很多帖子時(是的,您是博主,確定您已經收到了),您就會知道訪問者在尋找您已經找到的特定帖子時需要向下滾動頁面時可能會感到多麼不安前段時間發表。

為了簡化流程,您可以向博客頁面添加導航類型。 它可以是允許從頁面到頁面或導航箭頭的選項。

當您在定制器中時,您可以在導航類型下拉列表中更改用於博客頁面的導航類型。

其他博客設置

在這裡您可以選擇分頁或導航。

如果您沒有看到任何分頁元素,這意味著您仍然需要設置每頁顯示的帖子數量。

轉到儀表板 > 設置 > 閱讀並定義博客頁面顯示的最大值(它應該小於您擁有的帖子數量,以便您看到分頁選項)。

設置帖子編號

在大多數情況下,這足以創建一個博客頁面。 但是,如果要創建帶有動態出版物列表的靜態頁面,則可以在 Gutenberg 中進行。 繼續閱讀以了解如何操作。

使用 Gutenberg 創建包含動態內容的靜態博客頁面

您應該再次創建一個新頁面。 現在我們開始了。

讓我們將 Posts 塊添加到頁面的畫布中! 只需單擊“開始書寫或鍵入/選擇塊”文本左側的“+”圖標即可。 選擇名為“帖子”的塊 - 您可以在 ZeGuten 塊類別中找到它。

現在您可以看到 Posts 塊使用默認設置顯示您網站上的出版物。 讓我們稍微調整一下以獲得更好的結果。

順便說一下,您可以輕鬆使用 Gutenberg 的快捷方式來加快工作速度。 如果您不知道如何使用鍵盤快捷鍵,請隨時閱讀本指南。

帖子塊設置。 在古騰堡設置帖子佈局

讓我們建立所有必要的設置來處理帖子佈局的設計以及您想要從帖子中提取以在博客中顯示的內容。 幸運的是,在 Gutenberg 編輯器中,您可以在使用 Posts 塊時執行所需的一切操作。 不會超過幾分鐘。

帖子塊:佈局選項

選擇佈局

找到頁面畫布右側的塊設置欄。 如果您沒有看到它,這意味著您之前已關閉它。 要取回它,請單擊右上角的齒輪圖標。 然後單擊畫布上的 Posts 塊以使其處於活動狀態並訪問其設置。

Posts 塊允許從 3 種不同的佈局選項中進行選擇:

  • 帖子列表 - 這是一個乾淨的佈局,帖子一一排成一列;
  • 帖子網格 – 一種佈局,您可以在其中顯示多列和多行帖子,設置網格以展示出版物;
  • 不均勻的帖子列表 - 使用此佈局按國際象棋順序排列帖子。 在這裡,您將擁有一列,帖子以列表形式一一顯示,偶數行顯示左側的特色圖片,不均勻的行顯示在右側。

打開下面的帖子設置以選擇您要使用此塊提取的出版物。

設置設置

您可以在這裡設置:

  • 類別 – 您要從中顯示出版物的類別。
  • 項目數 - 將出版物限制為一定數量,並且不顯示超過一定數量。 最多 100 個出版物,但您當然可以使用“閱讀更多”設置來使塊看起來更短。
  • 列 - 使用此切換設置網格佈局的列數。 最大列數為 6。
  • 選擇標題標籤 - 在這裡您可以設置用於標題的 html 標籤(H1 - H6)。 確保您的標題設置正確,以便在搜索結果中顯示更高的範圍。
  • 排序依據 - 此選項允許按從最舊到最新、從最新到最舊的順序對出版物進行排序,並使用字母順序來設置順序。

還有以下選項:

  • 顯示特色圖片——您必須確保已將特色圖片設置到您的出版物中才能看到它們;
  • 顯示發布日期——顯示發布日期的選項;
  • 顯示帖子類別——這將允許訪問者查看帖子與哪個類別相關;
  • 顯示帖子摘錄 - 啟用此選項以顯示您帖子的摘錄(它可以是自定義的或從您的內容生成的摘錄),您還可以通過修剪字數來設置摘錄內容的長度;
  • 顯示帖子作者 – 啟用此開關以顯示誰撰寫了此出版物。

閱讀更多設置

只要您希望訪問者打開您的帖子並繼續閱讀,您就可以顯示“閱讀更多”鏈接並自定義其顯示方式,將默認文本替換為您自己的文本等。

閱讀更多

您還可以決定是否要將每個帖子的“閱讀更多”選項顯示為文本或按鈕。

posts 塊適用於處理動態發布,但它還不允許享受自定義查詢的全部功能。 然而,在處理博客網站的靜態頁面時,這將是一項無與倫比的資產。

請注意,目前還沒有分頁選項,因此如果您想展示所有帖子,則需要將帖子數量設置為最大。 您也可以在設置中將新創建的頁面指定為您的主要博客頁面,或者您可以保持原樣,並使其僅在菜單中顯示為您的博客(您應該鏈接它的位置),同時保留博客頁面作為您的帖子存檔。

完成此任務的另一種方法是將指向帖子存檔頁面(您在本教程第一部分中創建的真實博客)的鏈接添加到帖子列表的底部,以便訪問者訪問所有出版物。

恭喜! 您已經創建並設計了自己的第一個博客頁面! 請訂閱我們的時事通訊,以獲取有關如何與古騰堡和古騰莓合作的更多提示!