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

时间:2018-08-06 04:11:37

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

我有一堆JSON-LD文件,我想有条件地注入到各个页面的头部。我使用的是WordPress,建议使用wp_enqueue_script之类的函数。困难之处在于,我还没有找到一种使用<type>函数编辑wp_enqueue_script属性的方法。

我可以像这样用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",否则整个功能将无法正常工作。

2 个答案:

答案 0 :(得分:0)

我当前的操作方式是使用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。

答案 1 :(得分:0)

我找到了一种方法:

//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”类型。