Wordpress 後台佈景主題使用ajax

WordPress 後台佈景主題使用ajax

2014-11-1

Aidec Li

7457

簡單的介紹一下如何在wordpress的後台使用ajax，wordpress要在後台使用ajax必須要透過admin-ajax.php來幫我們處理。

本日目標:用ajax更新網站名稱

實現方法:

建立更新網站名稱的函數。(透過update_option更新網站名稱)
建立ajax的js腳本。
引入js腳本。
註冊、調用ajax action動作。

update_option():wordpress的開發者們，相信對這個函數都不陌生，它可以用來更新wp_options的資料。

update_option( ‘blogname’, ‘bbb’ ); //更新網站標題

前端頁面

<form method="post" action="" id="ajax_update">
<h2>網站設定</h2>
網站名稱:<input type="text"  name="sitename" size="100" value="<? echo get_option( 'blogname');  ?>" />
<button name="update" type="submit">更新設定</button>
<input type="hidden" name="check" value="ImChecked" />
</form>

網站名稱:<input type="text" name="sitename" size="100" value="<? echo get_option( 'blogname'); ?>" />

</form>

產生如下頁面:

建立更新網站名稱的功能

function ajax_info_option_update() {
if($_POST['check']=='ImChecked'){  
$update_sitename=$_POST['sitename']; //獲得input name=sitename的值
update_option( 'blogname', $update_sitename ); //更新網站名稱
echo 'OK';  //成功更新後，輸出 OK
die(); //停止函數運行
}
}

function ajax_info_option_update() {

if($_POST['check']=='ImChecked'){

$update_sitename=$_POST['sitename']; //獲得input name=sitename的值

update_option( 'blogname', $update_sitename ); //更新網站名稱

echo 'OK'; //成功更新後，輸出 OK

die(); //停止函數運行

}

建立ajax的js腳本

在wp-content/themes_name/js 新增一個 ajax_test.js

jQuery(document).ready( function($) {   
$(document).on("submit",'#ajax_update',function(event) {  
event.preventDefault(); //禁止原始功能    
ajax_data=$(this).serialize()+ "&action=ajax_test_update_action";  //將所有input序列化
$.ajax({
type: "POST",
data: ajax_data,
url: ajaxurl,            
success: function( $data ) {
alert($data);
}
});
});
});

jQuery(document).ready( function($) {

$(document).on("submit",'#ajax_update',function(event) {

event.preventDefault(); //禁止原始功能

ajax_data=$(this).serialize()+ "&action=ajax_test_update_action"; //將所有input序列化

$.ajax({

type: "POST",

data: ajax_data,

url: ajaxurl,

success: function( $data ) {

alert($data);

}

});

註解:
第1行:wordpress在jquery中使用了noConflict模式(讓渡$符號)，所以必須要用jQuery代替$
第2行:#ajax_update用來對應前端頁面的form id
第4行:action=ajax_test_update_action用來讓wordpress判斷我們使用哪一個ajax action
第8行:ajaxurl為wordpress內建的路徑(指向)admin-ajax.php

引入js腳本

add_action('admin_sitename', 'ajax_update_sitename_script');
function ajax_update_sitename_script() {
$ajax_test_url=get_template_directory_uri().'/js/ajax_test.js';
//註冊一個ajax_sitename_update鉤子，調用的js，宣告為jquery用
wp_enqueue_script('ajax_sitename_update', $ajax_test_url , array('jquery'));
//用來定義本地化參數 在ajax_sitename_update 註冊ajax_test物件，內容 ajax_test.ajaxurl=admin_url('admin-ajax.php') 
wp_localize_script( 'ajax_sitename_update', 'ajax_test', array(
'ajaxurl' =>admin_url('admin-ajax.php'),
));        
}

add_action('admin_sitename', 'ajax_update_sitename_script');

function ajax_update_sitename_script() {

$ajax_test_url=get_template_directory_uri().'/js/ajax_test.js';

//註冊一個ajax_sitename_update鉤子，調用的js，宣告為jquery用

wp_enqueue_script('ajax_sitename_update', $ajax_test_url , array('jquery'));

//用來定義本地化參數在ajax_sitename_update 註冊ajax_test物件，內容 ajax_test.ajaxurl=admin_url('admin-ajax.php')

wp_localize_script( 'ajax_sitename_update', 'ajax_test', array(

'ajaxurl' =>admin_url('admin-ajax.php'),

));

}

註解:
第1行:將ajax_update_sitename_script勾在admin_sitename。在此處我們假設前端頁面的名稱叫admin_sitename。(請自行依實際頁面名稱作更改)
第8行:當ajax_test.js的ajaxurl不起作用時，可以用wp_localize_script自訂admin-ajax.php路徑，並將ajax_test.js的ajaxurl改成ajax_test.ajaxurl

註冊、調用ajax action動作

add_action('wp_ajax_ajax_test_update_action', 'ajax_info_option_update');

1	add_action('wp_ajax_ajax_test_update_action', 'ajax_info_option_update');

註解:
1.wp_ajax_ajax_test_update_action，對應ajax_test.js中的第4行action名稱
2.ajax_info_option_update，對應建立更新網站名稱的功能ajax_info_option_update()

感謝您的閱讀，請用力地分享讓大家知道吧~~

WordPress佈景主題製作教學進階系列-功能表製作(二)

Aidec Li

學我所見，寫我所學。凡事略懂略懂~~

更多 Aidec Li 的文章...

很抱歉，此文章關閉留言

AIDEC SpaceX