如何通過 WordPress 塊編輯器構建食譜卡

去年夏天,我在一個製作圖案的彎曲機上。 在兩個月內,我設計了近 100 個塊模式。 在工作和必要的家務之外,我在每一個清醒的時刻都在用塊編輯器構建東西以獲得樂趣。 我有完全的創作自由,不需要推出商業產品,除了我自己,沒有人可以取悅。

作為一名藝術家,我實現了夢想。 除了創造任何想到的東西之外,沒有做任何事情的壓力。 當然,過了一會兒我就崩潰了。 現實世界總是趕上來,但我在夏天建立了一些整潔的模式。

6 月中旬大約有三天的時間,我只專註於美食博主和食譜網站的模式。 我清楚地記得我的姐姐,她待了一個星期,問我為什麼在電腦上而不是在電視上看電影。

我把筆記本電腦轉向她的方向說:「看看這個。 我正在為美食博主建立一種在他們的帖子中插入食譜卡的方法。 你知道嗎,就像你在尋找食譜時滾動瀏覽某人生活故事的 2,000 多個單詞後看到的那張卡片一樣? 很酷,對吧?」

這可能不是一個準確的引述,但它足夠接近——這是我的故事,所以我會像我記得的那樣講述它。

在這段建立美食博客模式的過程中,我遇到了其中一個關鍵時刻。 如果我現在能做到這一點,最終,設計師將能夠創建和捆綁任何帶有主題的布局,並且用戶可以通過單擊按鈕來插入它們,我想。

那時我已經加入了街區潮流。 然而,總有那些事情似乎走到了一起的時刻。 燈泡發出咔噠聲。 星星對齊。 不管你想怎麼稱呼它。

不幸的是,只有 21 年夏天的少數模式在某個不起眼的 GitHub 存儲庫上的文件夾之外看到了任何內容。 對於今天的進入 用積木建造 系列,我抽出一個來分享。 它還提供了使用更新的塊設計工具從頭開始重建它的機會。

製作食譜卡

對於這個積木搭建教程,我將引導您完成創建簡單食譜卡的每個步驟。 我建議激活 二十二二 相同結果的主題。 但是,我故意只使用黑色和白色作為文本、背景和邊框顏色,以便儘可能多地轉移主題。

完成後,您的食譜卡應類似於以下內容:

how-to-build-a-recipe-card-via-the-wordpress-block-editor 如何通過 WordPress 塊編輯器構建食譜卡

雖然我鼓勵自己嘗試每一步,但請隨意 從 Gist 複製模式 HTML 並將其直接粘貼到編輯器中。

本演練的最後一步需要 社交分享塊 尼克迭戈的插件。 如果您更喜歡堅持使用核心 WordPress 塊,則可以省略最後一部分。

第一步:卡組

how-to-build-a-recipe-card-via-the-wordpress-block-editor-1 如何通過 WordPress 塊編輯器構建食譜卡插入帶邊框的組塊。

讓我們用一些簡單的東西來開始這個演練。 沒有必要這麼早把事情複雜化。

在您的 WordPress 管理員中打開一個新帖子或頁面並添加一個組塊。 在右側的塊選項面板中,查找「尺寸」部分並將「塊間距」選項設置為 0。這是獲得我們所追求的卡片設計所必需的。 然後,添加您選擇的邊框。

注意:您可以在此步驟中為整張卡片添加背景顏色。 但是,如果您這樣做,WordPress 將添加一些默認填充。 因此,您還需要將「填充」選項設置為 0。

第 2 步:卡片圖片標題

how-to-build-a-recipe-card-via-the-wordpress-block-editor-2 如何通過 WordPress 塊編輯器構建食譜卡為卡頭插入圖像塊。

這是您真正可以對您的卡做出決定的第一個時刻。 食譜卡圖像的兩個最明顯的選擇是圖像和封面塊。 我從第 1 步中選擇了一個圖像並將其放入組塊中。

素食披薩圖片來自 詹妮弗伯恩 並且是 可在 WordPress 照片目錄中找到.

如果您決定添加一個封面塊,您可以在其中添加第 4 步中的食譜標題和描述。

第 3 步:卡片內容組

how-to-build-a-recipe-card-via-the-wordpress-block-editor-3 如何通過 WordPress 塊編輯器構建食譜卡在 Image 塊之後插入帶有填充的 Group 塊。

讓我們現在繼續保持簡單。 我們需要將食譜卡的「內容」組合在一起。 再次,添加一個新的組塊。

您需要對此塊進行的唯一更改是在其周圍添加一些空間。 在側邊欄的塊選項面板中,將「填充」選項設置為 2rem 或您的首選值。

第 4 步:卡片標題和說明

how-to-build-a-recipe-card-via-the-wordpress-block-editor-4 如何通過 WordPress 塊編輯器構建食譜卡插入標題和段落塊。

在步驟 #3 的 Group 塊內,插入一個 Heading 塊。 用這個作為你的菜的標題。 然後,緊跟其後插入一個段落作為描述。

這更像是一個自由形式的步驟,所以瘋狂地添加儘可能多的細節或儘可能少的細節。

第 5 步:卡元

how-to-build-a-recipe-card-via-the-wordpress-block-editor-5 如何通過 WordPress 塊編輯器構建食譜卡為配方元插入行塊。

到目前為止,一切都應該相對簡單。 前面的四個步驟並沒有對布局做任何複雜的事情。 這即將改變。

您需要為此步驟創建一個四列部分,顯示烹飪時間和其他食譜元數據。 WordPress 中最好的解決方案是 Row 塊。 如果您願意,可以使用 Columns 進行嘗試。 在狹小的空間里,這兩種體驗都會讓人覺得有點笨拙。

在您一直在使用的 Group 塊內添加一個新的 Row 塊。我為「對齊」控制項選擇了「項目之間的空間」選項。 這樣可以確保所有內容都均勻分布,但選擇權在您手中。

然後,單擊行中的「+」圖標並在其中添加一個段落塊。 對於我的第一個段落塊,我首先添加了文本「準備時間」。 然後,我按鍵盤上的 Shift + Enter 創建換行符並添加「2 小時」。 為了好玩,我彈出了一個表情符號。

讓其餘部分變得簡單的訣竅是讓第一個段落塊的樣式像你想要的那樣,複製它三遍,然後自定義文本。

第6步:卡片成分和說明

how-to-build-a-recipe-card-via-the-wordpress-block-editor-6 如何通過 WordPress 塊編輯器構建食譜卡為配方成分和方向插入標題 + 列表塊。

困難的部分已經不在了。 我承諾。 下一步就像為成分部分添加標題和列表塊並為方向部分執行相同操作一樣簡單。 這些仍應放置在先前塊所在的同一組中。

對於標題塊,我將級別設置為 H3。 我所做的唯一其他設置更改是在「方向」下的列表的工具欄中選擇「轉換為有序列表」按鈕。

第七步:卡片社交分享

how-to-build-a-recipe-card-via-the-wordpress-block-editor-7 如何通過 WordPress 塊編輯器構建食譜卡插入新的群組和社交分享圖標。

如果沒有社交部分,您就不可能擁有現代食譜卡,對嗎? 您將需要為此安裝社交共享塊插件。 或者,您現在可以停止使用已完成的卡。

對於本節,在用於容納配方內容的組之後(不在內部)插入一個新組。 將文本顏色更改為白色並添加深色背景顏色。 您還可以修改填充(我將其設置為 2rem),或者如果您想要額外的呼吸空間,可以使用 Spacer 塊。

對於「喜歡這個食譜?」 文本,添加一個 H3 級別的標題塊。 然後,在其下方插入社交共享塊。 隨意玩設計。 我使用居中對齊並啟用「顯示標籤」選項。

那是一個包裝!

筆記和其他想法

我想為這張食譜卡中的所有內容使用核心 WordPress 塊。 社交分享部分是明顯的障礙,所以我需要依賴第三方插件。

與我在網上看到的許多現代食譜卡相比,這個解決方案仍然缺少兩個功能:

  • 用於劃掉成分或步驟的任務式複選框或無線電輸入。
  • 「列印此食譜」按鈕。

對於任務列表, 待辦事項塊插件 David Towoju 是 List 塊的一個很好的替代品。 它是輕量級的,並且允許網站訪問者在他們完成食譜時劃掉項目。

對於列印按鈕,我沒有推薦的解決方案。 通過代碼實現並不是特別困難,我希望看到主題作者採用這種模式的想法並運行它。

類別: 用積木建造

像這樣

載入中…

資源

相關文章