php – 访问WordPress Theme中的本地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 = <?PHP get_template_directory_uri() . '/network.json' ?>

解决方法:

在服务器端使用远程请求时,file_get_contents()函数似乎是一个可靠的选项,但wordpress已经包含一个特别有用的API,称为HTTP API.

HTTP API可用于向远程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() {

    // Helpers to define the $url path
    //$protocol = is_ssl() ? 'https' : 'http';
    $directory = trailingslashit( get_template_directory_uri() );

    // Define the URL
    $url = $directory . 'network.json';

    // Register main js file to be enqueued
    wp_register_script( 'network-js', $directory . 'assets/js/network.js', array('jquery'), false, true  );

    // Make the request
    $request = wp_remote_get( $url );

    // If the remote request fails, wp_remote_get() will return a WP_Error, so let’s check if the $request variable is an error:
    if( is_wp_error( $request ) ) {
        return false; // Bail early
    }

    // Retrieve the data
    $body = wp_remote_retrieve_body( $request );
    $data = json_decode( $body );

    // Localize script exposing $data contents
    wp_localize_script( 'network-js', 'networkJSON', array( 
            'network_url' => admin_url( 'admin-ajax.PHP' ),
            'full_data' => $data
        )
    );

   // Enqueues main js file
    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>

相关文章

统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单,返...
统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单,返...
前言 之前做了微信登录,所以总结一下微信授权登录并获取用户...
FastAdmin是我第一个接触的后台管理系统框架。FastAdmin是一...
之前公司需要一个内部的通讯软件,就叫我做一个。通讯软件嘛...
统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单,返...