如何使用 WordPress 塊構建書籍和書評卡

已發表: 2022-04-02

在 2018 年首次亮相之前的幾個月裡,我深深地沉浸在區塊系統中。這也恰好與我完成全國小說寫作月的第一個 11 月相吻合,這是一個為期 30 天的挑戰,以寫一篇 50,000 字小說的初稿。 此後,我在 2021 年第二次獲勝。

作為一個滿懷夢想、想成為小說家的人,區塊系統讓我興奮的第一件事就是作家如何使用 WordPress 來炫耀他們的書。 當然,我別無選擇,只能創建一個自定義的塊分組來展示我在一個月內以某種方式設法敲定的手稿。

為小說家設計的主題的主頁截圖。它具有一本書和一個銷售按鈕。
小說家主題主頁設計。

這是 WordPress 的前模式時代。 界面很笨拙。 事情似乎隨機破裂。 設計工具幾乎不存在,但空氣中有一點魔力。 在該平台的歷史上,用戶從來沒有使用股票 WordPress 直觀地構建如此簡單的佈局。 儘管在 Beta 版運行期間出現了所有錯誤,但這是我成為街區粉絲的那一刻。

直到幾個月後,我才發布了小說家的主題——它是另一個尚未啟動的項目的子項目。

對於“積木建築”系列的這篇文章,我想引導讀者創建一種模式,激發我繼續使用積木系統進行設計和開發。 作為獎勵,我還將展示如何創建書評模式。

在本教程中,我使用 Automattic 的 Archeo 主題。 但是,它應該適用於任何支持塊的主題。 您還將從塊主題中獲得更多里程。

書卡

這張卡片旨在成為想要展示他們的一本書的作者的起點,但它可以應用於任何產品。 有 1,000 種方法可以更改它,我鼓勵每個人在完成這些步驟後對其進行自定義。 最終結果應類似於以下內容:

書卡設計,左側為書籍封面圖片,右側為介紹+購買按鈕。
最後的書卡設計。

最終塊 HTML 代碼可通過 Gist 獲得。 您可以將其複制並粘貼到編輯器中,但我鼓勵您嘗試從頭開始構建第一輪。 這個系列都是關於學習用積木構建的。 準備好複製的代碼就在那裡,以防萬一你卡住了。

第 1 步:容器組(可選)

WordPress 帖子編輯器,帶有一個填充的組塊並具有深藍色背景。
使用填充和顏色分組塊。

幾乎作為一項規則,我在構建模式或塊的部分時從一個組塊開始。 這次我選擇添加它,因為我想要一個深色背景,並在卡片內容周圍添加一些填充。 如果您願意,您可以選擇退出。

塊就位後,為塊添加文本顏色、背景顏色和填充。 我選擇2rem作為填充,因為我的活動主題的默認值在所有方面都不一致。

第 2 步:添加媒體

帶有媒體和文本塊的 WordPress 帖子編輯器。它在左側顯示書籍封面圖像。
組內的媒體和文本塊。

WordPress 中我最喜歡的塊之一是媒體和文本。 它有很多用例,而且它本身有點像一個迷你模式。 一方面,你放棄你的媒體。 另一方面,您可以添加任何您想要的內容。

在步驟 1 的組塊中,插入媒體和文本。 繼續並獲取您選擇的圖像。 如果您手頭沒有,WordPress 照片目錄有很多。

我對此塊所做的唯一更改是在塊選項側邊欄中將“媒體寬度”選項設置為35 。 根據圖像的尺寸,您可以選擇其他選項。 請務必為您的內容留出空間。

第 3 步:分組(可選)

帖子編輯器中的 WordPress 媒體和文本塊。在文本/內容部分內是另一個組。
添加內部組塊。

在媒體和文本塊內,我添加了另一個組。 它支持一致的間距,WordPress 出於某種原因不適用於媒體和文本塊的“內容”區域。 這是一個可選步驟,但它提供了對設計的更多控制。

如果您對主題的間距不滿意,可以更改塊選項側欄中的“塊間距”選項。 我將其調整為2rem ,但這取決於活動主題。

順便說一句,這些是我在其他教程中很少看到的細節——“陷阱”和您可能遇到的其他問題。 我覺得它們是有用的內含物,但可能有點無聊。 如果您希望我繼續介紹此級別的詳細信息,請隨時在評論中告訴我。

第 4 步:卡片內容

WordPress 帖子編輯器中的媒體和文本塊。內容部分的內部是一個標題、幾個段落和一個按鈕。
添加標題、段落和按鈕塊。

創建書卡的最後一步應該相對簡單。 我包括了一個標題、兩個段落和一個按鈕塊。 我鼓勵實驗。

我沒有對標題和段落塊進行任何更改。 但是,我為單獨的 Button 選擇了“大綱”樣式。

而且,就是這樣! 包含內置的媒體和文本塊使其比與其他人一起構建更容易。 如果您更喜歡閱讀書籍而不是寫作和銷售書籍,請繼續閱讀。

書評介紹卡

本演練將引導您創建書評(或評論介紹)卡。 像以前一樣,您可以從 Gist 中獲取完整的塊 HTML。 結果應該類似於以下內容:

書評部分,其中包括左側的封面圖片和右側的書籍詳細信息,包括報價。
最後的書評卡介紹設計。

對之前的食譜卡教程大驚小怪,讓我在本節前做一個簡短的說明。 本教程系列是關於學習使用塊構建,而不是為每個可能的場景創建充實的解決方案。

對於那些想要更多的人,有現有的解決方案。 Donna Peplinskie 的書評區是一個很好的選擇。 它具有 ISBN 集成、評論模式和許多其他的花里胡哨。 我什至在 2020 年寫過它。

這適用於有時書評人、未創建評論網站的人或只想獲得小費的人。

步驟 1-3:沖洗並重複

WordPress 帖子編輯器中的組塊。媒體和文本塊與它自己的嵌套組塊位於其中。
添加組、媒體和文本以及另一個組塊。

這些步驟實際上與上面的書卡相同:添加一個組塊,添加媒體和文本,並在內容區域內嵌套另一個組。 我所做的唯一更改是將媒體部分擴大到40 (之前是35 )。

隨意混合它並嘗試新事物。 如果您不想要填充背景,請跳過初始組塊。

第 4 步:卡片內容

帶有媒體和文本塊的 WordPress 帖子編輯器。標題、列表和引用嵌套在其內容區域內。
添加標題、列表和引用塊。

像早期的書卡一樣,為書名添加一個標題塊。 這位於嵌套在媒體和文本塊內的組內。

內容的下一部分是事情轉移的地方。 對於“信息”一書,您必須插入一個列表塊。 然後,填寫您認為相關的詳細信息,如下所示:

  • ️ 由賈斯汀·塔德洛克 (Justin Tadlock) 撰寫
  • 標記成人小說
  • 文字出版社出版
  • 發表於 2099 年 5 月 1 日
  • 599 頁
  • / 5 顆星

我想用一些表情符號來增加趣味。 如果那不是您的事,則無需包含它們。

在一個真實世界的項目中,我還會為列表塊添加一個“無標記”樣式,允許表情符號充當虛假的項目符號點。 但是,我正在測試的主題沒有這種風格。

這將我們帶到了最後一部分。 我喜歡通過引用最喜歡的名言來開始書評。 它讓我有心情寫這本書,並讓我分享作者的一些東西。 因此,我選擇放置一個報價塊作為最後一塊。

另一種方法可能是快速總結。 您甚至可以直接從那裡直接進入評論或將空間留空。 這是你的卡,你可以用它做你想做的事。