WordPress 使用 AJAX 簡單範例

 2022.06.09 網路上 WordPress 使用 Ajax 教學很多，但找了許多篇都看不懂，連  WordPress Codex本身的說明也是清楚到我覺得我真的太敷淺了，幸好找到這篇，以下內容主要依照該邊實作，希望對有需求的人節省寶貴時間。

會使用 Ajax 的原因是想讓使用者不須按下按鈕就可顯示使用者的位置。如圖，以下是我的實作記錄：

使用兩個檔案：

1.將生成 Ajax 內容的 PHP 檔。

該檔可以是佈景主題的"functions.php"，也可以是 WordPress 外掛的主檔（plugin-name.php），檔案最後不要加入"?>"，不然啟用外掛時會出現錯誤。

它必須是 WordPress 在查看相關 HTML 頁面時加載的文件，否則它可能不知道某些 WordPress 相關細節。該檔用於註冊和處理 Ajax Call！

2.顯示給使用者的 HTML 檔。

這將是給使用者看的文件，在格式良好的頁面中顯示您的"數據"。

它可以是一個 HTML檔，也可以是 PHP 檔。該檔進行調用 Ajax Call ！

步驟1：PHP 檔，內容如下，注意函數名稱，cingyue_ajax_call，等一下會用到，內容只有簡單印出經緯度，要測試之前別忘了該檔的佈景主題或外掛必須啟用才行，函數前面要向 WordPress 註冊使用 ajax，如果要改"cingyue_ajax_call"注意每個地方都必須改成"your_ajax_call_name"。

add_action('wp_ajax_cingyue_ajax_call', 'cingyue_ajax_call'); // 登入使用者

add_action('wp_ajax_nopriv_cingyue_ajax_call', 'cingyue_ajax_call'); // 一般使用者

function cingyue_ajax_call(){

    echo '<pre>';

    echo "[longitude:".$_POST['longitude']."]"."[latitude:".$_POST['latitude']."]";

    echo '</pre>';

    wp_die();//一定要有

 }

步驟2： HTML 檔。注意 receiving_div_id，如果要改，都要改成一樣。

<div id='receiving_div_id'>

   <p>還沒內容</p>

</div>

<script type='text/javascript'>

var latitude;

var longitude;

getLocation();//取得使用者經緯度

jQuery(document).ready(function($) //網頁準備好就執行

// 這裡因為 WordPress $ 改成 jQuery

{

var data = {

'action'   : 'cingyue_ajax_call', // 上面的 PHP 函數名稱!

'longitude': longitude,  

'latitude': latitude             

};

  

jQuery.post(ajaxurl, data, function(response) {

jQuery('#receiving_div_id').html(response);

});

});

function getLocation() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition);

} 

}

function showPosition(position) {

latitude=position.coords.latitude;

longitude=position.coords.longitude;

}

</script>

步驟3：PHP 檔前面加入以下內容以免找不到 ajaxurl。

add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {

   echo '<script type="text/javascript">

           var ajaxurl = "' . admin_url('admin-ajax.php') . '";

           </script>';

}

步驟4：PHP 檔加入短代碼，這樣就可以在任何地方隨意使用，完成後編輯頁面或文章輸入短代碼就會有最前面的結果。

function cingyue_setup() {//加入短代碼[cingyuelocation]

    add_shortcode( 'cingyuelocation', 'cingyue_location' );

} 

add_action( 'init', 'cingyue_setup' );起始外掛時新增函數

function cingyue_location() {

    $content=file_get_contents(plugin_dir_path(__FILE__)."includes/location.htm");//前面的 HTM 檔

    return $content;//短代碼函數一定要有回傳值

}