#実装するアプリ
下記画像のように、
ボタンクリックをすると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サイトに実装することができた。