WordPress区块使用教程及10大插件推荐
WordPress区块为网站建设和内容展示带来了革命性的变革,它提供了一种全新的方式来定制网站内容和外观。通过区块编辑器,用户可以轻松添加和编辑各种内容元素,包括段落、图像、小部件等,极大地提升了创作的灵活性和效率。在当前的WordPress版本中,超过90种默认区块可供选择,涵盖了文本、媒体、小部件、主题元素和嵌入等六大类别,为用户构建多样化的网站提供了丰富的素材库。
与传统的经典编辑器相比,Gutenberg区块编辑器凭借其直观的拖放功能和实时的内容预览,显著改善了用户体验。这种基于区块的编辑方法不仅操作更便捷,还提供了更多种类的自定义选项,让用户能够更自由地实现设计创意。若想进一步扩展编辑器的功能,安装WordPress区块插件将为您带来更多内容区块选项,满足个性化的设计需求。本文将全面解析区块的相关知识,并指导您如何使用新的WordPress区块编辑器,同时推荐10款精选插件,助您拓展区块应用范围,实现更高级的定制效果。
什么是WordPress区块?
区块是WordPress编辑器中用于创建和编辑文章或页面元素的组件。通过多样化的区块类型,用户可以灵活添加文本、媒体文件和布局元素,从而构建出更具吸引力的内容。无论是简单的文本段落,还是复杂的媒体组合,区块都能轻松实现,让内容创作变得简单高效。
为什么使用WordPress区块?
传统的WordPress编辑器主要侧重于文本编辑,界面类似于常见的文本编辑软件,缺乏直观的页面预览功能。而区块编辑器则不同,它允许用户通过拖放操作改变页面布局,并无缝插入各种视觉和交互式元素,这是经典编辑器无法实现的。此外,区块在易用性方面也进行了大幅提升。例如,嵌入YouTube视频等外部媒体,只需将视频URL粘贴到相应区块即可完成,无需借助额外的HTML代码。可重复使用的区块功能让用户可以保存预先自定义的区块,以便在需要时快速调用,大大节省了重复创建内容的时间。而区块样板则提供了多种预构建的区块布局,适用于不同的内容需求。通过使用基于区块的WordPress主题,用户还可以轻松自定义模板,通过重新排列内容区块来调整模板甚至整个站点的布局,实现更灵活的设计调整。
区块编辑器中有哪些类型的WordPress区块可用?
WordPress的最新版本提供了超过90种区块,分为六大类别:文本、媒体、设计、小工具、主题和嵌入。下面将详细介绍各类区块及其主要功能。
文本区块
文本区块主要用于向内容中添加标题、段落和其他文本元素。常见的文本区块包括:段落、标题、列表、引用、引文、经典、预格式化、代码和表格等。其中,pullquote区块能够突出显示文本摘录,吸引读者注意力;table区块则可以方便地呈现和比较信息。代码和预格式化区块则适合突出显示代码片段,增强内容的可读性和专业性。
媒体区块
媒体区块允许用户将各种文件上传到媒体库并嵌入到内容中。常见的媒体区块包括:图片、画廊、音频、封面、文件、媒体和文字以及视频等。图片和画廊区块是最常用的媒体区块,其中图片区块用于展示单个图像,而图库区块则可以创建图像集群,每个图像都拥有独立的替代文本字段。文件区块可以接受任何文件类型,并将其嵌入到站点中,其独特的PDF查看器功能允许访问者直接在网站上阅读或下载PDF文件。
设计区块
设计区块主要用于自定义内容的布局和样式,虽然不直接添加内容,但能够帮助用户确定内容在网站访问者眼中的呈现方式。常见的设计区块包括:多个按钮、栏目、组、行、分页符、分隔符和空格等。栏目、组和行属于容器区块类型,可以在其中嵌套其他区块。例如,使用栏目区块可以创建侧边栏,将页面宽度划分为不同的比例,并在较大的一侧添加内容,较小的一侧则可以插入WordPress小工具和其他元素。行区块则可以在同一水平位置添加多个区块,适用于页眉和页脚等场景。
小工具区块
小工具区块将传统的小工具以区块的形式呈现,用户可以在页面的任何位置插入,包括页脚和侧边栏。Gutenberg区块编辑器中提供了12种小部件区块,包括:档案、日历、类别、自定义HTML、最新评论、最新文章、页面列表、RSS、搜索、短代码、社会图标和标签云等,这些区块极大地丰富了页面的内容和功能。
主题区块
主题区块主要用于展示网站和主题设计相关的元素,其中大部分是动态的,会自动引入内容信息,如发布内容、查询循环和发布评论等。常见的主题区块包括:导航、网站标志、网站标题、网站标语、标题、页脚、模板部分、登入/登出等。此外,还有一些区块专门用于显示站点标识,如站点徽标、网站标题和网站标语等。与博客文章内容相关的主题区块包括:文章标题、后摘录、发布特色图片、发布内容、文章作者、发布日期、文章类别、发布标签、下一篇文章和上一篇等。
嵌入区块
嵌入区块允许用户通过复制和粘贴URL的方式轻松嵌入外部内容,常见的嵌入区块包括:Twitter、YouTube、视频、Spotify、SoundCloud、Pinterest等。若找不到所需的平台,用户还可以使用嵌入区块粘贴URL来嵌入媒体,实现更多样化的内容展示。
如何使用WordPress区块来自定义您的网站
Gutenberg区块编辑器是WordPress 5.9版本中用于创建文章和页面的默认编辑器,在基于区块的主题中,它还可以用于完整的站点编辑。当您添加新的博客文章或页面时,编辑器会默认提供一个段落区块,方便您立即开始写作。当您按Enter键时,段落区块也会成为默认的新区块,使写作过程更加流畅。
添加新区块的方式有多种:您可以通过单击内容区域中的加号(+)按钮,在弹出的窗口中选择六个最近使用的区块中的一个,或使用搜索栏查找特定区块并插入。另一种方式是单击屏幕左上角的加号(+)按钮,打开区块插入器,左侧将显示所有可用区块,您可以使用搜索栏找到所需的选项并插入。
重新排列区块非常简单,WordPress区块编辑器支持拖放功能。只需选择任何区块,单击其工具栏上的拖动图标,然后将其移动到所需的位置即可。或者,您也可以使用区块工具栏上的向上和向下箭头来调整区块顺序。
每个WordPress内容区块都配备了不同的设置工具。要配置某个区块,只需选择该区块,然后单击屏幕右上角的“设置”按钮,即可打开区块设置面板。设置面板将出现在右侧,例如,段落区块提供了自定义颜色、排版和其他设计元素的选项,让您能够精细调整区块的样式。
10个最佳WordPress区块插件
安装WordPress插件是扩展区块库、添加更多内容区块和自定义工具的好方法。以下是我们推荐的10款最佳WordPress区块插件,它们将帮助您实现更高级的定制效果。
1. Genesis Blocks
Genesis Blocks插件为WordPress区块编辑器添加了14个新区块,其中包括定价区块和call-to-action区块。定价区块可以帮助您创建定价表,而无需使用表区块从头开始构建,它允许添加最多四个定价列,并带有CTA按钮。call-to-action区块则支持图像背景和全角布局,使其在页面中更加突出。高级版本Genesis Pro还增加了两个区块和区块级用户权限,允许只有选定的用户才能访问某些区块。总而言之,Genesis Blocks适用于寻找简单附加区块的博客和小型企业网站。
2. Getwid
Getwid是具有最广泛附加Gutenberg区块的免费区块插件,它提供了38个独特的区块和超过35个预制模板,帮助您创建漂亮的网页设计,而无需安装太多插件。图像滑块、图像框和图像堆栈库等区块提供了在内容上呈现图像的新方法。Getwid还附带了扩展现有嵌入选项的Instagram和Google Maps区块。预制模板类似于WordPress区块样板,但Getwid使用模板库区块而不是模式插入器来选择模板并将其插入到内容中。您还可以禁用未使用的区块以保持编辑器的速度和简单性。
3. Ultimate Addons for Gutenberg (UAG)
UAG是最引人注目的WordPress区块插件之一,除了33个不同的区块,还提供81个整页模板、284个区块样板和56个线框。post grid、post masonry和post carousel等区块以各种格式显示您的文章,而价目表区块则非常适合列出餐厅的菜单或其他产品价格。UAG还带有几个模式区块,用于how-to、review和FAQ内容,这些区块不仅有助于更快地设置内容,还可以提高内容在搜索引擎上的排名。该插件的模板、模式和线框可用于文章和页面,并包括作品集和推荐等选项。
4. Premium Blocks for Gutenberg
Premium Blocks for Gutenberg是一个免费插件,它添加了14个对网站性能和速度影响最小的新区块。该插件提供的独特区块之一是Dual Heading,它将标题分成两部分,您可以单独自定义。Fancy Text区块可让您在文本的各个部分之间添加动画。该插件提供有限的附加区块,专注于每个区块的设置选项,以帮助您调整、编辑和设计内容。例如,您可以修改每个区块的响应能力和容器样式,而几个区块还带有独特的设计工具。有一个选项可以启用或禁用区块,以尽量减少插件的影响。
5. PublishPress Blocks
PublishPress Blocks,以前称为Advanced Gutenberg,带有22个高级区块,您可以通过WordPress管理仪表盘对其进行自定义。独特的区块之一是Login/Register Form,在区块编辑器中提供了一个预制的登录界面。PublishPress Blocks还提供时事通讯和联系表格区块用于潜在客户生成。此插件具有区块访问功能,可以为每个用户角色激活或停用特定区块。区块设置部分允许您修改每个PublishPress区块的全局样式。每个区块都有自己的设置,但它们主要包括颜色、边框选项和其他设计选项。如果您想为您的WordPress网站使用自定义CSS,这个插件还有一个自定义样式面板来添加CSS类。
6. Stackable
Stackable是最通用的区块插件之一。它的免费版本增加了35个区块、100个预建区块布局、8个UI套件和37个线框,而Stackable高级版通过403个预建区块布局和33个UI套件增加了设计选项。预先构建的区块布局和UI工具包可用于文章和页面。通过单击编辑器屏幕顶部的设计库按钮查找所有可用选项。Stackable提供了广泛的区块自定义工具,每个区块的区块、样式和高级设置。区块设置包含一些基本的布局配置,如边框、对齐和间距,而高级设置允许您配置区块的响应能力和HTML标签。还可以使用高级版本添加运动效果。
7. Ultimate Blocks
Ultimate Blocks专注于博主和营销人员,它增加了22个区块,例如Review、Social Share和Call to Action以增加网站的参与度。该插件还包括评论和How to区块上的数据结构化标记以改进SEO。区块管理器功能允许您启用和禁用区块。通过导航到Dashboard -> Ultimate Blocks -> Ultimate Blocks打开区块管理器。Ultimate Blocks拥有一个拥有400多名成员的活跃社区。如果您在使用插件时遇到困难,请查看现有讨论或在论坛上发布您的问题。Dashboard -> Ultimate Blocks -> Contact Us上也提供了联系表格。
8. Kadence Blocks
Kadence Blocks提供的工具可以让您在博客文章或页面中轻松创建复杂的布局。免费版为编辑器增加了15个区块,而Kandace Blocks Pro带有12个高级区块,包括产品轮播和视频弹出窗口。Kadence还提供预构建的部分和入门模板。通过单击文章或页面编辑器顶部的设计库按钮打开Kadence设计库。此外,可以通过单击设置图标旁边的Kadence Blocks徽标来设置区块的全局样式。它允许您更改每个区块的调色板和全局样式。
9. Otter Blocks
Otter Blocks是一个轻量级的免费插件,它向编辑器添加了29个新区块,包括Google地图和添加到购物车的区块。有一个选项可以将部分区块设置为新页面的默认区块。或者,打开模板库以从51个预建部分中进行选择,以快速创建内容。通过单击标题右上角的Otter Blocks徽标并选择Global Defaults来调整默认区块设置。您将能够更改每个区块的默认颜色、版式和间距。该插件还具有适用于Otter区块和默认WordPress区块的动画和自定义CSS功能。例如,使用默认段落区块编写数字时,您可以为其添加计数动画。自定义CSS功能也不同于默认CSS类,因为它允许您直接在编辑器中编写CSS代码。
10. CoBlocks
CoBlocks是一个免费插件,可为Gutenberg区块编辑器添加灵活的页面构建体验。它带有31个新区块,包括用于创建餐厅菜单的食物和饮料区块类型和用于强调重要文本的突出显示区块。该插件还提供了新的嵌入可能性。OpenTable允许您为您的餐厅网站嵌入预订小工具,并且使用Gist区块,您可以显示来自GitHub Gist的代码片段。CoBlocks的另一个独特功能是某些区块(如Row)的拖动调整大小功能。您可以通过单击并拖动行区块或使用行设置上的自定义装订线来调整行区块内列的宽度。
小结
结合WordPress 5.9上推出的新功能和基于区块的主题,区块现在是完整站点编辑和改善用户体验的基础。WordPress区块通过让您在不使用额外代码或插件的情况下构建有吸引力的布局和视觉设计,使内容定制变得更加容易。与之前的编辑器相比,它还有其他几个好处。例如,可重复使用的区块让您可以保存预先设计的区块以供将来使用,从而简化页面和后期创建过程。区块工具栏中提供的拖放功能允许您快速重新排列内容。目前,WordPress有超过90个默认区块,分为六类。虽然它们足以创建一个基本的WordPress网站或博客,但WordPress区块插件可以扩展区块库并提供更多定制工具来满足您的设计需求。