如何以编程方式将模式标记添加到 WordPress

已发表: 2022-04-21

您想以编程方式将模式标记添加到 WordPress吗？ 如果是这样，您可以以各种方式为您的 WordPress 网站使用许多代码片段。

但在我们了解如何添加它们之前，让我们简要了解一下模式标记的含义。

什么是模式标记？

Schema 标记是 schema.org 提供的标准化数据结构。 基本上，它将向搜索引擎提供有关当前页面的信息。 所以他们的爬虫机器人可以理解内容是什么，并在搜索结果上构建丰富的片段。

模式中包含的数据以键值对的形式呈现，例如 [“telephone”: “152234029”]。 它还可以具有多个继承级别。 它们对于提高您网站的点击率 (CTR)非常重要，并且也被认为是最佳 SEO 实践之一。

有许多类型的键属性可以与模式一起使用。 它们因基于开放和封闭层次结构的数据和数据类型而异。 访问shcema.org 网站，了解当前可以使用的所有可用类型。

如何以编程方式将模式标记添加到 WordPress？

我们在上一篇文章中讨论了如何使用插件将模式添加到 WordPress。 同样，我们已经讨论了通过仪表板和主题向 WordPress 添加模式标记的更多方法。

但是现在，我们将学习如何以编程方式实现相同的结果。 通过这种方式，您的网站将不需要加载插件提供的所有额外代码。 您将只添加您的网站需要的代码。

为了在一段内容中包含架构，我们需要将架构标签添加到我们的网站 HTML 输出中。 我们可以通过多种方式编辑我们网站的 HTML。 最好的方法是覆盖子主题上的主题模板文件。

您需要一个子主题才能以编程方式包含架构标记。 因此，如果您还没有安装，请继续创建并安装子主题。 您甚至可以使用其中一个子主题插件来创建它。

您可以通过两种主要方式以编程方式将模式标记添加到 WordPress：

  1. 在头部添加 JSON-LD 文件
  2. 将微数据标记添加到 HTML 输出

两者都是有效的方法，您可以自由使用更适合您需求的方法。

1.添加JSON-LD文件

JSON-LD 文件是一种特定类型的格式，基于 JSON，用于对链接数据进行编码。 就像它发生在 JSON 文件上一样，它包含一个键值对列表：

 {
    “电话”：“152234029”，
    "name": "名字",
    “地址”：“约翰街 N 433”，
    "url": "https://QuadLayers.com",
    "priceRange": "19 - 90",
    "legalName": "四层",
    "@context": "http://schema.org",
    "@type": "本地企业"
}

如您所见，甚至语法都与 JSON 文件非常相似。

您可以使用多种 JSON-LD 生成器来获取更适合您需求的文件。

因此，下一步是在网站的 HTML <head>部分打印此代码。

我们可以在子主题的functions.php文件中使用如下函数来实现。

注意：在我们继续之前，请确保您也备份了您的网站。 我们将修改您网站的核心文件，任何不需要的更改都可能给它带来更多问题。

 add_action('wp_head','QuadLayers_add_schema');
函数 QuadLayers_add_schema(){
echo '<script type="application/ld+json">
{
“电话”：“152234029”，
"name": "名字",
“地址”：“约翰街 N 433”，
"url": "https://QuadLayers.com",
"priceRange": "19 - 90",
"legalName": "四层",
"@context": "http://schema.org",
"@type": "本地企业"
}';
}

您可以看到 JSON-LD 文件是如何包含在<script>标记中的。 只是不要忘记更新文件。

要了解架构的工作原理，请注意前面的示例代码会将 JSON 添加到网站的所有页面。 因此，当搜索引擎或任何其他类型的机器人读取它时，它将被设置为存在脚本的所有页面的有效模式。 在这种情况下，它是整个网站。

我们可以通过将一些条件逻辑应用于我们的 PHP 函数来将 JSON 代码应用于特定页面。 但是模式标记也可以包含在我们内容的内部 HTML 中，允许我们将复杂的标记包含到一些非常具体的内容中。

2. 将微数据标记添加到 HTML

顺应现代趋势，推荐使用前一种方法。 但是使用微数据标记将允许我们在模板文件中嵌入模式标记。

将我们的脚本粘贴到子主题的functions.php文件中也可以正常工作。 为了将正确的模式应用于每条内容，我们最终会拥有大量复杂的代码。

因此，要在 HTML 中添加微数据标记，我们需要覆盖您的 WordPress 网站的模板文件。

2.1。 将架构标记添加到 WP 帖子

在这个例子中，我们的子主题继承了二十一二十一主题，所以我们需要覆盖的文件是content-single.php 。 这是我们可以在 HTML 输出中添加我们的模式的文件。

在某些主题上，此文件可能位于不同的名称或文件夹下。

在您的子主题（模板部分和内容）上创建所需的文件夹，并在内容文件夹中创建一个新的content-single.php文件。

 儿童主题
/__模板部分
__/__内容
__/__/__content-single.php

复制/粘贴父主题content-single.php文件的所有代码。

覆盖帖子模板文件

我们要编辑的代码如下：

 <article <?php post_class(); ?>>

添加架构范围和类型，如下面的片段。

 <article itemscope itemtype ="http://schema.org/Article" <?php post_class(); ?>>

这告诉搜索引擎<article> HTML 标记中的内容是文章类型。
在声明了类型和范围之后，我们就可以使用一些标准的属性了。 例如，将帖子标题声明为项目名称：

源代码：

 <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

添加名称属性：

 <?php the_title( '<h1 itemprop="name" class="entry-title">', '</h1>' ); ?>

此外，我们可以使用articleBody键属性来标记我们帖子的内容。

源代码：

 <div class="entry-content">
<?php 

内容（）;

添加 articleBody 属性：

 <div itemprop="articleBody" class="entry-content">
<?php
内容（）;

2.2. 向 WooCommerce 产品添加模式标记

以类似的方式，我们可以覆盖 WooCommerce 产品模板文件以包含我们的模式。

我们需要覆盖的文件是content-single-product.php文件。 此文件必须位于子主题中的WooCommerce 文件夹中。 如果您很难找到它，请确保您也正确设置了 WooCommerce。

 儿童主题
__/woocommerce
__/__content-single-product.php

完成与上面相同的过程，在其位置创建一个新文件。

在主 div 包装器上定义范围和模式类型：

 <div itemscope itemtype ="http://schema.org/Product" <?php wc_product_class( '', $product ); ?>>

我们也可以在这个文件上使用“description”属性：

 <div itemprop="description" class="summary entry-summary">

但是，为了向我们的产品添加更多标记，我们需要覆盖不同的文件。

例如，要将产品的价格添加到架构中，请在子主题文件上创建一个新路径：

woocommerce/templates/single-product/price.php

 儿童主题
__/woocommerce
__/__/单一产品
__/__/__/price.php

覆盖 woocommerce 模板文件

将price.php文件复制到其位置后，编辑如下：

源代码：

 <p class="<?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"><?php echo $product->get_price_html(); ?></p>

添加标记：

 <p itemscope itemtype="https://schema.org/Offer" itemprop="price" class=" <?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"><?php echo $product->get_price_html(); ?></p>

请注意，我们创建了一个具有“报价”类型的新项目来定义价格。 这是了解我们如何按照原始 HTML 结构将不同的项目类型相互嵌套的线索。

您可以覆盖其他一些文件以包含更多标记。

  • title.php
  • stock.php
  • review.php
  • rating.php
  • product-image.php

结论

这使我们结束了关于如何以编程方式将模式标记添加到 WordPress 的教程。 为此，您需要对模式如何工作以及一些编程知识有基本的了解。

了解所有属性和类型必须与 schema.org 网站上定义的属性和类型相匹配也非常重要。 这也包括具有多级继承的属性。

总而言之，您可以使用两种主要方式将架构添加到您的网站：

  • 在头部添加 JSON-LD 文件
  • 将微数据标记添加到 HTML 输出

添加 JSON-LD 文件是一种非常简单的方法，并且被大多数用户考虑。 您所要做的就是将 JSON-LD 代码打印到您网站的<head>部分。

但是，使用微数据标记方法将模式标记直接嵌入到模板文件中也对您非常有用。 如果您有所需的资源，覆盖模板文件可以帮助您更灵活地自定义网站。 您甚至可以将架构标记添加到您网站的特定元素，例如帖子和 WooCommerce 产品。

那么您现在可以使用这些代码片段将架构标记添加到您的网站吗？ 请在评论中告诉我们本教程是否有帮助。

同时，这里还有一些您可能会感兴趣并帮助您改进 WordPress 网站的帖子：

  • 如何创建自定义 WordPress 插件
  • 将电报添加到 WordPress（完整指南）
  • 如何在 WordPress 中编辑 HTML