在WordPress主题中访问本地JSON文件

14 浏览
0 Comments

在WordPress主题中访问本地JSON文件

背景：

当用户在WordPress后台保存页面时，我会动态创建一个JSON数据文件。我通过' save_post'钩子来完成这个操作，并使用file_put_contents将文件' network.json'保存到我的主题文件夹的根目录中。我这样做是为了在我的主题中的js脚本中访问特定的数据。

当前方法：

我在我的主题中加载了一个带有以下JS的js文件。下面的代码是有效的，但我想知道这是否是在WP主题中调用本地JSON文件的最佳方法。

$.getJSON("../wp-content/themes/ihdf/network.json", function(data) {

console.log(data);

});

上述方法是否是正确和技术上最合理的方式？

其他方法：

以前我在WordPress中使用ajax，通过加载一个脚本并设置正确的ajax函数来调用admin-ajax.php。这似乎对我的需求来说过于复杂。

我也可以在我的模板文件中设置一个js变量，如下所示：

var networkJSON =

0

2 答案

0 Comments

问题的原因是在WordPress主题中，使用file_get_contents()函数无法读取本地的JSON文件。这可能会导致无法获取JSON文件的内容。

解决方法是使用以下的get_local_file_contents()函数来代替file_get_contents()函数。该函数会通过包含文件的方式读取本地的JSON文件，并返回文件内容。

function get_local_file_contents( $file_path ) {
    ob_start();
    include $file_path;
    $contents = ob_get_clean();
    return $contents;
}

通过使用get_local_file_contents()函数，我们可以成功读取本地的JSON文件，从而解决了无法访问本地JSON文件的问题。这对于需要在WordPress主题中读取本地JSON文件的开发者来说是一个很有用的解决方案。

参考链接：[https://github.com/markjaquith/feedback/issues/33](https://github.com/markjaquith/feedback/issues/33)

0
0 Comments

在Wordpress主题中访问本地JSON文件的问题通常可以使用file_get_contents()函数来解决，但是Wordpress已经包含了一个非常有用的API，叫做HTTP API。

HTTP API可以用于向远程API发送数据和获取数据，这也意味着可以用它来发送对自己服务器的请求。

在WordPress中，HTTP API由四个主要的函数组成：

- wp_remote_get() - 用于从端点检索数据

- wp_remote_post() - 用于向端点发送数据

- wp_remote_head() - 用于发送HEAD请求

- wp_remote_retrieve_body() - 用于从服务器响应中检索主体内容

例如，可以使用wp_remote_get()来从network.json文件中获取数据，然后与wp_localize_script()函数一起解析数据，将所需的数据暴露给已加载的js文件。

请参考以下函数（未经测试），但是您不应该遇到任何问题。

-- 函数 --

function wp_request_localize_my_json_data() {
    // 定义$url路径的辅助函数
    //$protocol = is_ssl() ? 'https' : 'http';
    $directory = trailingslashit( get_template_directory_uri() );
    // 定义URL
    $url = $directory . 'network.json';
    // 注册要加载的主要js文件
    wp_register_script( 'network-js', $directory . 'assets/js/network.js', array('jquery'), false, true  );
    // 发起请求
    $request = wp_remote_get( $url );
    // 如果远程请求失败，wp_remote_get()将返回一个WP_Error，所以我们需要检查$request变量是否是一个错误：
    if( is_wp_error( $request ) ) {
        return false; // 提前结束
    }
    // 获取数据
    $body = wp_remote_retrieve_body( $request );
    $data = json_decode( $body );
    // 使用wp_localize_script将$data内容暴露给脚本
    wp_localize_script( 'network-js', 'networkJSON', array( 
            'network_url' => admin_url( 'admin-ajax.php' ),
            'full_data' => $data
        )
    );
   // 加载主要的js文件
    wp_enqueue_script( 'network-js' );
}
add_action( 'wp_enqueue_scripts', 'wp_request_localize_my_json_data', 10);

如果一切顺利，您可能会从network.json文件中获取到本地化的数据。

现在假设在network.json文件中有一个名为current_user的变量。为了在已加载的JS文件中访问这个变量，您只需要这样做：

<script type="text/javascript">
    var my_data = networkJSON.full_data;
    var user = my_data.current_user;
</script>

非常感谢这个非常好的方法。我没有考虑使用HTTP API，因为我是在自己的服务器上工作，但是这确实有道理。一个问题是如何避免在这里使用绝对URL $url = ''. $protocol . '://example.com/wp-content/themes/ihdf/network.json';

嗨，抱歉，$url变量应该是$url = $directory . 'network.json'; - 假设文件存在于您主题的主目录中。您也可以将其更改为其他路径，例如$url = $directory . 'dynamic_data/network/network.json'; - 假设这些目录也存在于您主题的主目录中。我已经更新了代码以反映这一点。

0