#実装するアプリ
下記画像のように、
ボタンクリックをするとDBのデータを非同期でインプットに表示する簡単なアプリをWordpressサイトに実装する。
クリック前↓
クリック後↓
実装するアプリは、
「index.html」「main.js」「pdo.php」の3ファイルからなる。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wordpress, ajax</title>
</head>
<body>
<button id="get_ajax_button">データを非同期で取得</button>
<input id="result">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js
// ボタンクリック
jQuery('#get_ajax_button').click(function() {
//pdo.phpへアクセス
$.ajax({
// 通信先ファイル名
url: "pdo.php",
// 通信が成功した時
success: function(data) {
jQuery('#result').val(data);
},
// 通信が失敗した時
error: function(){
console.log("通信失敗");
}
});
})
pdo.php
<?php
try {
$pdo = new PDO('mysql:dbname=mysql;host=localhost;charset=utf8','root','root');
$sql = "SELECT * FROM test";
$stmt = $pdo->query($sql);
foreach ($stmt as $row) {
echo $row['column'];
}
} catch (PDOException $e) {
echo 'DB接続エラー！: ' . $e->getMessage();
}
?>
#実装するWordpressサイト
テンプレートにTwenty Nineteenを使用したメインページに実装する。
#実装
テーマエディターより、index.phpの好きな箇所に以下を挿入
<button id="get_ajax_button">データを非同期で取得</button>
<input id="result">
メインページにボタンとインプットが挿入される
index.phpにjsを読み込ませる
下のようにscriptタグで読み込ませるもよし、jsフォルダ内でjsファイルとして読み込むもよし。
<script>
// ボタンクリック
jQuery('#get_ajax_button').click(function() {
//pdo.phpへアクセス
$.ajax({
// 通信先ファイル名
url: "pdo.php",
// 通信が成功した時
success: function(data) {
jQuery('#result').val(data);
},
// 通信が失敗した時
error: function(){
console.log("通信失敗");
}
});
})
</script>
wordpressでは指定されたファイルでしか、ajax通信を行えない。
functions.phpにてadmin-ajax.phpのURLを取得し、変数ajaxurlにしておく。
functions.php
/////////----略-----///////////
<?php
function add_my_ajaxurl() {
?>
<script>
var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
</script>
次にPDO部分だが、functions.phpに関数化して記述する必要がある。
今回はget_dbdata()という名前の関数とする。
functions.php
/////////----略-----///////////
<?php
function get_dbdata(){
try {
$pdo = new PDO('mysql:dbname=*****;host=**********;charset=utf8','****','****');
$sql = "SELECT * FROM test";
$stmt = $pdo->query($sql);
foreach ($stmt as $row) {
echo $row['column'];
}
} catch (PDOException $e) {
echo 'DB接続エラー！: ' . $e->getMessage();
}
add_action( 'wp_ajax_get_dbdata', 'get_dbdata' );
add_action( 'wp_ajax_nopriv_get_dbdata', 'get_dbdata' );
?>
先ほどのjs(ajax)部分を編集する。
url, data, を編集する。
<script>
// ボタンクリック
jQuery('#get_ajax_button').click(function() {
//pdo.phpへアクセス
$.ajax({
// 通信先ファイル名
url: "ajaxurl", //編集
data: {'action' : 'get_dbdata'}, //追加
// 通信が成功した時
success: function(data) {
jQuery('#result').val(data);
},
// 通信が失敗した時
error: function(){
console.log("通信失敗");
}
});
})
</script>
以上でHTML+CSS+Javascript(jquery)+ajax+PHP(PDO)を用いた非同期アプリをWordpressサイトに実装することができた。