用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搜索结果页面

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

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

Desactivar Elementos en GeneratePress

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

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

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

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

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

外观模板

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

定制的可能性很多

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

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

如果你愿意,你甚至可以为那个平淡无奇的默认页面创建另一个模板,当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