将 JSON-LD (Schema) 脚本注入 WordPress 网站的头部答案

【问题标题】：Injecting JSON-LD (Schema) scripts into head of WordPress site将 JSON-LD (Schema) 脚本注入 WordPress 网站的头部
【发布时间】：2019-01-12 23:45:33
【问题描述】：

我有一堆 JSON-LD 文件，我想注入到各个页面的头部，其中一些是有条件的。我正在使用 WordPress，他们的建议是使用像 wp_enqueue_script 这样的函数。困难在于我还没有找到使用wp_enqueue_script 函数编辑<type> 属性的方法。

我可以像这样用 PHP 笨拙地做到这一点（也许有更好的 PHP 函数？）：

// header.php

<head>
    ...all the regular stuff..

    ..near the bottom..
    <?php
        if ( is_front_page() ) {
            echo file_get_contents(get_template_directory() . '/assets/structured-data/local-business.js');
        } 
    ?>

</head>

我尝试注入的脚本格式如下：

// JSON-LD format
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "localBusiness",
    "currenciesAccepted": ...
}
</script>

所以我只是想读取其中的文件。当我尝试包含多个脚本时，这会中断。

我想遵循 WP 的建议并使用像 wp_enqueue_script() 这样的方法，但到目前为止，我还没有找到这样做的方法。除非我可以将脚本标记为 JSON-LD 所需的 type="application/ld+json"，否则整个函数将无法工作。

【问题讨论】：

我决定暂时将它们硬编码到 header.php 文件中。 new core WP function 也正在开发中，以更改脚本/样式标签生成上的 attr 值，希望很快就会推出。

标签： javascript wordpress schema json-ld structured-data

【解决方案1】：

我目前这样做的方式是使用 add_action();

add_action( 'wp_head', 'my_theme_schema' );

然后在 my_theme_schema 中，我构建我的模式，并使用脚本标签将其输出。（我通常使用数组构建架构）。

function my_theme_schema() {
  $schema = [];
  ... // build up the schema
  $output = json_encode( $schema, JSON_UNESCAPED_SLASHES );
  ?>
    <script type="application/ld+json">
      <?= $output; ?>
    </script>
  <?php
}

这让我有机会将其放入functions.php中。

另外，我通常不把它放在头部，我把它放在页脚。

add_action( 'wp_footer', 'my_theme_schema' );

我不知道是不是天生更好，我只是更喜欢页脚的JS。

【讨论】：

【解决方案2】：

我找到了一种方法：

//here we enqueue a dummy script to help us with what we want to achieve
add_action('wp_enqueue_scripts', 'myslug_wp_load_files');
function myslug_wp_load_files()
{
    wp_register_script( 'myslug-dummy-handle-json-footer', plugins_url('scripts/loader.js', __FILE__), [], '', true );
    wp_enqueue_script( 'myslug-dummy-handle-json-footer'  );
}

//here we construct our ldjson and add it to our enqueued script
add_action('wp_head', 'myslug_construct_ldjson');
function myslug_construct_ldjson()
{
    $my_ldjson = '{construct_here_your_ldjson}';
    wp_add_inline_script( 'myslug-dummy-handle-json-footer', $my_ldjson );
}

//here we add a filter to the script loader, and modify text/javascript to application/ld+json
add_filter( 'script_loader_tag', 'myslug_async_tag', 10, 3 );

function myslug_async_tag( $tag, $handle, $src ) 
{
    if ( $handle !== 'myslug-dummy-handle-json-footer' ) 
    {
        return $tag;
    }
    $tag = str_replace("type='text/javascript'", "type='application/ld+json'", $tag);
    return $tag;
}

上面的脚本注册并入队一个虚拟脚本 - 它实际上可以是任何东西（甚至是空白）。此外，它将动态生成的 JSON-LD 添加到虚拟脚本中，然后过滤所有脚本，仅选择我们创建的脚本并将类型 'text/javascript' 替换为类型 'application/ld+json'。

【讨论】：