背景
当用户在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.这似乎对我的需求过于复杂.
var networkJSON = <?PHP get_template_directory_uri() . '/network.json' ?>
解决方法:
在服务器端使用远程请求时,file_get_contents()函数似乎是一个可靠的选项,但wordpress已经包含一个特别有用的API,称为HTTP API.
HTTP API可用于向远程API发送数据和从远程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>