如何使用 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 颗星

我想用一些表情符号来增加趣味。 如果那不是您的事,则无需包含它们。

在一个真实世界的项目中,我还会为列表块添加一个“无标记”样式,允许表情符号充当虚假的项目符号点。 但是,我正在测试的主题没有这种风格。

这将我们带到了最后一部分。 我喜欢通过引用最喜欢的名言来开始书评。 它让我有心情写这本书,并让我分享作者的一些东西。 因此,我选择放置一个报价块作为最后一块。

另一种方法可能是快速总结。 您甚至可以直接从那里直接进入评论或将空间留空。 这是你的卡,你可以用它做你想做的事。

类别: 用积木建造

资源

相关文章