用GeneratePress和GenerateBlocks定制WordPress搜索结果页面

 

WordPress的搜索引擎很糟糕

我不知道任何使用WordPress的人对它的搜索引擎有什么好的评价,我仍然不明白,自从第一个版本以来,它几乎没有发展。

它不仅在工作方式上是原始的,而且不提供任何配置。甚至它的结果页面的外观也有很多需要改进的地方。根据你使用的模板,它可能有一个稍好的设计,但总的来说,它仍然是史前的。

结果的外观可以通过CSS和响应性得到一些改善,可以使用一个免费的插件(有付费版本),如Relevanssi(尽管它会使你的数据库的重量增加三倍)或其他这个与外部服务Algolia连接的插件(每月最多可以免费提供10000个搜索请求)。

但我将把性能问题留待以后讨论,因为我还在纠结这个问题,我将处理纯粹的美学改革问题,使用 生成新闻(GP)和 GenerateBlocks(GB)。

GeneratePress 和GenerateBlocks

GPGB仍然是两个来自年轻项目的工具,有很多可用性需要改进,GB不提供你可能期望的学习曲线,如果你来自使用像Elementor或类似的构建器。

正如我们在这个例子中所看到的,用GenerateBlocks构建某些东西的过程要长得多,也更费劲,在第一次尝试时可能会有点绝望。随着你添加越来越多的块,事情就会变得越来越复杂。

另一方面,一旦你理解了它们的工作原理并掌握了它们,你对每个元素的外观和感觉就有了更多的控制。

它的难度被它的文档和无可挑剔的支持所平衡,它的创造者甚至帮助解决不属于他们能力范围的具体设计问题,所以它仍然是一个伟大的选择,因为他们仍然忠实于他们的理念;公平、干净和轻量级的代码。

块状元素

块状元素,以下简称元素,于2020年7月在GeneratePress Premium 1.11.0版本中加入。它可以作为一个普通的钩子使用,几乎可以在你的博客上的任何地方插入内容,而不需要摆弄代码。

当与GenerateBlocks结合使用时,它允许你使用WordPress的块状编辑器来创建钩子、页眉、页脚、侧边栏、"英雄 "页面、内容模板,等等。

让我们进入正题。

结构模板

我们要做的第一件事是创建一个我们称之为 "结构模板 "的东西。这一步是可选的,但创建一个也无妨,以防有一天我们想通过几次点击来改变什么。

我给它起这个名字是因为它将只定义结构方面,而不是其内容。也就是说,如果我们想显示或不显示页眉、页脚或其小部件、侧边栏或定义宽度等,这样我们就不会被其余步骤中的块的名称所混淆。

从主菜单外观/元素或从顶部,我们可以访问元素的创建和管理。

Elements de GeneratePress- Layout o diseño

对于我们关心的具体用途,当添加一个新元素时,我们选择 设计并按下创建。

然后,我们告诉这个元素我们想应用在哪个页面。要做到这一点,我们移动到 "显示规则 "选项卡,在这个位置我们从下拉菜单中选择 "搜索结果"。

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面

元素提供了很多定制的可能性。正如你将看到的,在该下拉菜单中,你可以选择你的博客的大部分位置,这样这些设置就会应用在那里。

我们还可以决定我们要隐藏哪些元素。在我的例子中,我只打算使用一个选项来做无侧栏,所以我选择"内容(无侧栏)"。

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 2

还有其他隐藏边栏的方法,但这个方法,除了最简单和最快速之外,还允许我们通过简单地返回这里或直接 "取消发布 "这个元素/模板到 "草稿 "状态来恢复任何改变,从而使应用它的页面回到它的原始外观。

此外,在"停用元素"选项卡中,你可以让页面实际上是干净的。你可以说它相当于Elementor的"Canvas"页面模板,甚至稍有改进,使用起来更简单。

Desactivar Elementos en GeneratePress

一个好的做法,也是在其中一个配置选项卡中推荐的,就是用内部注释记录每个元素的作用,以防标题不够描述,或者我们不希望它太长。

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 4

我已经习惯了在每件事情上添加注释和评论,因为当你做了很多修改,随着时间的推移,你最终难免会忘记它们是在哪里和/或怎么做的。因此,在内部注释中,你将永远拥有所有你需要的信息,如果出了问题,或者你想做新的修改,你可以回溯你的步骤。

通过发布这个模板,我们已经将结果页配置成我们喜欢的样子,但是,当然,现在在进行搜索时,它将是空白的,因为我们需要创建和发布一个新的元素,它将决定这些搜索的外观。

在我们做这件事的时候,你可以把这个模板暂时放在草稿里,等一切准备好了再发布。

外观模板

虽然这只是另一个元素,但我在这个小指南中称它为 "外观模板",因为当时我对事物的命名和它们不同的可能用途感到有点困惑。

这就是真正的定制工作开始的地方。

我们创建一个新元素,这次是一个,并给它一个描述性的名字。

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 5

我们添加一个GenerateBlocks容器,并在该容器中放入一个Query Loop块。

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 6

这就是我们将看到的情况。

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 7

我选择了"Start blank"来复制结果的原始结构,但你可以选择这个块所提供的任何模板。

最好的办法是在你决定之前尝试一下,因为一旦你开始处理其中一个模板,你就无法应用另一个模板,如果你想改变它,你将不得不从头开始整个过程(这一点应该解决GB的问题)。

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 8

选择模板后,选择查询循环块(1),你会看到右侧的 "块 "标签(2)。点击它,在 "查询参数 "下勾选"从模板继承查询"(3)的选项。最后,在底部的 "显示规则"/"位置"(4)下,我们搜索并设置 "搜索结果 "并保存为草稿。

当我们展开查询循环时,我们会看到这个:

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 9

我们在 "查询模板 "内添加另一个网格块,并选择我们想要的结构。

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 10

对于这个例子,我们将使用两个容器 中的一个,作为列左边一栏将是特色图片的位置,右边一栏将显示条目的摘录。

你也可以使用三个容器,并将中间的容器配置为一个空间。我坚持认为,可能性有很多,最好的办法就是玩一玩。

正如你可能已经注意到的,我们几乎是从头开始建立一个容器,里面有所有的部件,这些部件将构成我们想要展示的最终方面。在这种情况下,搜索结果,但你也可以对任何其他内容这样做。

现在让我们清空这两个容器。

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 11

我们选择第一个容器并将其宽度设置为33(实际上是设置为33.33),如果你向下滚动到调整大小的选项,你会看到。

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 12

我们对第二个容器做同样的处理,并选择66(它将自动被设置为66.66)。很明显,重点是你使用的所有容器加起来都是100,这样它们就不会超出页面的水平空间,并显示在同一行。

现在,在选择了第一个容器后,我们在里面添加一个GenerateBlocks图像块。

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 13

这时会出现的情况是,不同的图像空间会出现。不要惊慌,这是因为该块检测了Loop并重新创建了它的行为。如果你的搜索引擎显示了十个结果,这些就是将出现的空间。只要继续在图片容器上下功夫,其余的大部分内容就可以了,这只不过是结果页面的预览。

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 14

我们再次选择包含图像的容器(1)。在右边的块的菜单中,我们下拉到 "启用动态数据并激活它(2)。在背景图片源中选择 "特色图片"(3),图片将出现在编辑器中。

在链接源中,我们选择 "单独链接"(4),这样每张图片就会链接到其相应的帖子,我们再次保存为草稿。

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 15

现在我们进入第二个容器,选择它并从GenerateBlocks中添加一个 "标题 "块。

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 16

选择激活了动态数据的 "标题 "块(1)( 2),并重复前面的过程(3),但这次选择 "标题 "作为内容的来源(4)和链接来源中的个别条目 (5)

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 17

最后,我们将在下面添加另一个 "标题 "块,它将被用来显示这些步骤之后的条目的摘要。

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 18

一旦添加,我们再次重复同样的过程。选择了这个新的块后(1),我们激活动态数据 (2),作为数据来源(3)的当前条目和内容的来源 "摘录"(4)。现在你还可以设置摘录的字数长度(5)

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 19

最后,我们将添加分页,它将出现在结果下面。要做到这一点,请选择查询循环块(1),并点击编辑栏中的带点的小+符号(2)。

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 20

分页是由一个按钮块建立的,你必须给它以符合你所寻找的外观的格式、颜色和形状。 所有可能的配置,这不是少数,在该块的菜单中,你总是有选项来微调每个块的移动、平板和桌面。

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 21

我就不多说了,免得这篇文章太长。

我建议你先在测试环境中做这一切,看看在编辑器提供的预览之外,它到底是如何工作的,当你确定它显示得很好时再发布。

还请记住,如果你做了一开始提出的那个设计块,我们称之为 结构模板我们称之为结构模板,你需要发布它。

这将是根据你的审美偏好进一步定制结果页面的外观的起点。

定制的可能性很多

用GeneratePress和GenerateBlocks定制WordPress搜索结果页面 22

你可以继续编辑或添加你想要的东西,例如在标题和摘录之间有两个容器的网格块,并在那里添加出版日期、条目作者的编号或任何你喜欢的东西。

如果你愿意,你甚至可以为那个平淡无奇的默认页面创建另一个模板,当WordPress在搜索时没有找到结果时,添加帮助按钮或任何其他帮助访问者的元素。

你可以改变字体类型和大小,把它调整到一边或另一边,调整元素的间距和尺寸,通过添加图像和形状来玩弄背景颜色,添加图标、边框、链接的悬停效果、容器的阴影等等。

所有这些都不需要离开编辑器,也不需要摆弄CSS或触摸你的模板文件。

在这里,你可以试试我的搜索结果的基本布局,我还需要打磨一些东西,比如添加阅读时间和访问次数,写上空的摘录和添加缺少的特色图片。

奖励球:如果你需要在结果中添加典型的"显示(数量)结果为:( 搜索的 "、 这里你可以找到必要的代码代码和说明,使其与你的查询循环块一起工作,感谢GB支持的David。


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

Artículos relacionados

Este blog se aloja en LucusHost

LucusHost, el mejor hosting