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

在 2018 年首次亮相之前的幾個月里,我對區塊系統非常了解。這也恰好與我完成的第一個 11 月相吻合 全國小說寫作月,為期 30 天的挑戰,寫出 50,000 字的小說初稿。 此後,我在 2021 年第二次獲勝。

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

how-to-build-book-and-book-review-cards-with-wordpress-blocks 如何使用 WordPress 塊構建書籍和書評卡小說家主題主頁設計。

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

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

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

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

書卡

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

how-to-build-book-and-book-review-cards-with-wordpress-blocks-1 如何使用 WordPress 塊構建書籍和書評卡最後的書卡設計。

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

第 1 步:容器組(可選)

how-to-build-book-and-book-review-cards-with-wordpress-blocks-2 如何使用 WordPress 塊構建書籍和書評卡使用填充和顏色分組塊。

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

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

第 2 步:添加媒體

how-to-build-book-and-book-review-cards-with-wordpress-blocks-3 如何使用 WordPress 塊構建書籍和書評卡組內的媒體和文本塊。

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

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

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

第 3 步:分組(可選)

how-to-build-book-and-book-review-cards-with-wordpress-blocks-4 如何使用 WordPress 塊構建書籍和書評卡添加內部組塊。

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

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

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

第 4 步:卡片內容

how-to-build-book-and-book-review-cards-with-wordpress-blocks-5 如何使用 WordPress 塊構建書籍和書評卡添加標題、段落和按鈕塊。

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

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

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

書評介紹卡

本演練將引導您創建書評(或評論介紹)卡。 像以前一樣,你可以抓住完整的 阻止來自 Gist 的 HTML. 結果應該類似於以下內容:

how-to-build-book-and-book-review-cards-with-wordpress-blocks-6 如何使用 WordPress 塊構建書籍和書評卡最後的書評卡介紹設計。

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

對於那些想要更多的人,有現有的解決方案。 唐娜·佩普林斯基 書評塊 是一個很好的選擇。 它具有 ISBN 集成、評論模式和許多其他的花里胡哨。 我什至 早在 2020 年就寫過.

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

步驟 1-3:沖洗並重複

how-to-build-book-and-book-review-cards-with-wordpress-blocks-7 如何使用 WordPress 塊構建書籍和書評卡添加組、媒體和文本以及另一個組塊。

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

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

第 4 步:卡片內容

how-to-build-book-and-book-review-cards-with-wordpress-blocks-8 如何使用 WordPress 塊構建書籍和書評卡添加標題、列表和引用塊。

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

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

  • ✍️ 由賈斯汀·塔德洛克 (Justin Tadlock) 撰寫
  • 🔖 標記為成人小說
  • 📚 Words & Press 出版
  • 📅 發表於 2099 年 5 月 1 日
  • 📃 599 頁
  • ⭐⭐⭐⭐⭐ / 5 顆星

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

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

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

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

類別: 用積木建造

資源

相關文章