WordPress 後台佈景主題使用ajax

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

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

實現方法:

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

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

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

前端頁面

產生如下頁面:
wordpress-admin-ajax-1

建立更新網站名稱的功能

建立ajax的js腳本

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

註解:
第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腳本

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

註冊、調用ajax action動作

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

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

Aidec Li
學我所見,寫我所學。凡事略懂略懂~~
更多 Aidec Li 的文章...

推薦文章

發表評論