HTML+CSS+Javascript(jquery)+ajax+PHP(PDO)を用いた非同期アプリをWordpressサイトに実装するまで(備忘録

#実装するアプリ
下記画像のように、
ボタンクリックをするとDBのデータを非同期でインプットに表示する簡単なアプリをWordpressサイトに実装する。

クリック前↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328246/e9b42463-9d18-37e4-cda0-b50d1dcaaf77.png)
クリック後↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328246/79e55ac4-4674-29cc-8534-e87767a85c9f.png)

実装するアプリは、
「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サイト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328246/c57757d5-1548-f362-7a6e-207cebdc1534.png)

テンプレートにTwenty Nineteenを使用したメインページに実装する。

#実装
テーマエディターより、index.phpの好きな箇所に以下を挿入

```
    <button id="get_ajax_button">データを非同期で取得</button>
    <input id="result">
```
メインページにボタンとインプットが挿入される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328246/314e6008-58a1-f9f1-73e0-ad6e42d8fbef.png)

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サイトに実装することができた。