WordPressの自作プラグインでAJAXを使ってMySQLデータを操作するための簡単なサンプルを作成します。以下の手順に従ってください。 ### 1. プラグインの基本ファイルを作成 まず、WordPressの wp-content/plugins ディレクトリに新しいフォルダを作成します。例えば、 my-custom-plugin という名前のフォルダを作成します。その中に my-custom-plugin.php というファイルを作成します。

php<?php
/**
 * Plugin Name: My Custom Plugin
 * Description: A simple plugin to demonstrate AJAX with MySQL.
 * Version: 1.0
 * Author: Your Name
 */

// セキュリティのためのチェック
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

// AJAXハンドラの登録
add_action( 'wp_ajax_my_custom_action', 'my_custom_action' );
add_action( 'wp_ajax_nopriv_my_custom_action', 'my_custom_action' );

function my_custom_action() {
    global $wpdb;

    // データの取得
    $action = $_POST['action_type'];
    $table_name = $wpdb->prefix . 'my_custom_table';

    if ($action == 'insert') {
        $data = $_POST['data'];
        $wpdb->insert($table_name, ['data' => $data]);
        wp_send_json_success('データが挿入されました。');
    } elseif ($action == 'update') {
        $id = $_POST['id'];
        $data = $_POST['data'];
        $wpdb->update($table_name, ['data' => $data], ['id' => $id]);
        wp_send_json_success('データが更新されました。');
    } elseif ($action == 'select') {
        $results = $wpdb->get_results("SELECT * FROM $table_name");
        wp_send_json_success($results);
    }

    wp_die(); // 終了
}

// スクリプトの登録
function my_custom_plugin_scripts() {
    wp_enqueue_script('my-custom-script', plugin_dir_url(__FILE__) . 'my-custom-script.js', array('jquery'), null, true);
    wp_localize_script('my-custom-script', 'my_ajax_obj', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'my_custom_plugin_scripts');

// テーブルの作成（プラグインが有効化されたとき）
function my_custom_plugin_create_table() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'my_custom_table';
    $charset_collate = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE IF NOT EXISTS $table_name (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        data text NOT NULL,
        PRIMARY KEY  (id)
    ) $charset_collate;";

    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}
register_activation_hook(__FILE__, 'my_custom_plugin_create_table');

### 2. JavaScriptファイルの作成 次に、 my-custom-plugin フォルダ内に my-custom-script.js というJavaScriptファイルを作成します。

javascriptjQuery(document).ready(function($) {
    // データを挿入
    $('#insert-button').click(function() {
        var data = $('#data-input').val();
        $.post(my_ajax_obj.ajax_url, {
            action: 'my_custom_action',
            action_type: 'insert',
            data: data
        }, function(response) {
            alert(response.data);
        });
    });

    // データを更新
    $('#update-button').click(function() {
        var id = $('#id-input').val();
        var data = $('#data-input').val();
        $.post(my_ajax_obj.ajax_url, {
            action: 'my_custom_action',
            action_type: 'update',
            id: id,
            data: data
        }, function(response) {
            alert(response.data);
        });
    });

    // データを取得
    $('#select-button').click(function() {
        $.post(my_ajax_obj.ajax_url, {
            action: 'my_custom_action',
            action_type: 'select'
        }, function(response) {
            if (response.success) {
                console.log(response.data);
            }
        });
    });
});

### 3. フロントエンドにボタンと入力フィールドを追加 最後に、プラグインを有効化した後、ショートコードやテンプレートファイルを使ってボタンと入力フィールドを追加します。例えば、以下のようなHTMLを追加します。

html<input type="text" id="data-input" placeholder="データを入力" />
<input type="text" id="id-input" placeholder="IDを入力" />
<button id="insert-button">挿入</button>
<button id="update-button">更新</button>
<button id="select-button">取得</button>

### 4. プラグインの有効化 WordPressの管理画面に移動し、「プラグイン」セクションから「My Custom Plugin」を有効化します。 これで、AJAXを使用してMySQLデータを挿入、更新、取得する簡単なプラグインが完成しました。必要に応じて、スタイルやエラーハンドリングを追加してください。

タイトルとURLをコピーしました