訪問Wordpress主題中的本地JSON文件

Question

背景 我在用戶將頁面保存在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); 
}); 

上述是否正確，技術上最合理？

其他方法我以前排隊通過一個腳本，並設置適當的AJAX功能以admin-ajax.php調用使用AJAX在WordPress的

。這似乎過於複雜，我的需求。

我也可以設置一個js變量我的模板文件中像下面：

var networkJSON = <?php get_template_directory_uri() . '/network.json' ?> 

Answer 1

當談到與服務器端的遠程請求工作時，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>