WordPress プラグイン作成〜アンケート挿入〜

WordPressのプラグインを作成中です。ようやくアンケート挿入が出来上がって来たところです。

アンケート挿入

今回作成しているプラグインの大まかな処理は以下の通りです。

プラグインを有効にした時、アンケートに必要なデータを保存するDB(テーブル)を作成する
ダッシュボードで投稿に挿入するアンケートを作成する
作成したアンケートを記事が表示する時にDBから作成したアンケート情報を取得する
取得したアンケート情報をJSONでしHTMLに出力する(scriptタグ)
プラグインから読み込んだJSで画面がロードされた時にJSONからランダムに表示するアンケート情報を取得する
取得した情報からアンケート入力フォームを作成する

サンプル

作成したデータ(CSV)は以下のようなものです。

question_id, question, answer1, answer2, answer3, answer4, answer5, html_class, html_style, click_count
15, あなたの性別はどちらですか？, 男, 女, , , , respond, , 0
16, あなたの年齢は？, 10才以下, 10代, 20代, 30代, 40以上, site-navigation, , 0
17, あなたの職業は？, 学生, フリーター, 自営業, 社員(非IT関連), 社員(IT関連), main, , 0
18, あなたの趣味は？, 音楽系, ゲーム系(将棋など), アウトドア系, スポーツ系, 学問系(文学や歴史など), reply-title, , 0
19, あなたはブロガーですか？, はい, いいえ, , , , primary, , 0, 
20, あなたは日本人ですか？(Are You Japanese?), はい(Yes), いいえ(No), , , , comments, , 0

これでとりあえずは、アンケートが表示できました。

まとめ

プラグインを有効にした時の処理(index.php)
キモになるのは下の部分です。

add_action('admin_menu', 'addCustomQuestionary' );
add_action('wp_enqueue_scripts', 'insertQuestionary' );
do_action( 'addCustomQuestionary' );

WordPressで使用できるアクションフックに以下のメソッドを登録します。

addCustomQuestionary(ダッシュボードのメニュー)
insertQuestionary(これはアンケート挿入する時)

そしてaddCustomQuestionaryを実行するように設定します。do_action( 'addCustomQuestionary' );

これで、ダッシュボードで作成したアンケート情報を投稿記事に挿入します。
ちょっと長くなりましたが、ここら辺で失礼いたします。

でわでわ。。。

    // HTML挿入用のJSを読み込む
    echo '';

2020年2月12日2020年2月11日

WordPressプラグイン作成〜HTML挿入まで完了〜

WordPressプラグインの作成中です。このプラグインを有効にしたときに、作成したアンケート(HTML)を投稿画面の指定した部分に挿入するのが目標です。

大まかに作成したものを画面のmainクラス(HTMLクラス)の下に配置したのが下のキャプチャーです。

はっきり言って使い物になりません。。。

しかし、作成したアンケートを挿入することができたのでとりあえずは一区切りです。ここまでのソースはgitに登録してあります。

HTML挿入

HTMLを挿入するのに実装したものは以下のものになります。

プラグイン.php

/*
Plugin Name: CustomQuestionaryPlugin
Plugin URI: (プラグインの説明と更新を示すページの URI)(未決定)aaa
Description: アンケートを作成、ブログ記事の中に埋め込むことができ、集計結果をダッシュボードで確認ができる。
Version: 1.0
Author: ZenryokuService
Author URI: https://zenryokuservice.com/
License: GPL2
*/
// 表示する内容
function helloCustomQuestionary() {
}

// アンケートを記事に挿入するスクリプト
function insertQuestionary() {

}

// ダッシュボードに追加するための関数(プラグイン有効時)
function addCustomQuestionary() {
    // ダッシュボードにこの表示が出るように追加する
    add_menu_page( 'Test Plugin', 'CustomQuestionary', 'manage_options' , 'test-plugin' , 'helloCustomQuestionary' );
    // 投稿記事にアンケートを表示するスクリプトをリンクする
    add_action( 'wp_enqueue_scripts', 'insertQuestionary' );
}
// プラグインをダッシュボードに表示する
add_action('admin_menu', 'addCustomQuestionary' );
// プラグイン用のJSを読み込むようにする
add_action('wp_enqueue_scripts', 'insertQuestionary' );
do_action( 'addCustomQuestionary' );

ダッシュボードに表示.php

これは普通のPHPファイルで、サーバーサイド処理をPHPで、クライアント側に表示するものをHTMLで実装します。

<?php サーバーサイド ?>
<h1>Custom Questionary Plugin</h1>
・
・
・

InsertQuery.php

これは、ダッシュボード画面からDBに作成したアンケート情報を登録するためのphpです。
JS側から、非同期リクエストを送信しそれを受けてDB登録処理を行います。

DeleteQuery.php

上と同様に、削除処理を行います。

表示位置に関して

上のように表示している部分は、アンケートのボタンと質問です。
いかんせんダッシュボードではBootStrapを使用していたのですが、WordPressにあるstyle.cssが使用されているので、上のような表示になります。部分的にスタイルを適用できると良いのですが。。。

表示位置を変えるにはHTMLクラスの指定を変えます。

初めはid="main"のタグの後ろ。。。つまりは、記事の一番下にアンケートを追加しました。
上の表示はDBに登録している”hrml_class"（スペルミス)のデータ部に対応するidを持つタグの下に配置するようにしていますのでヘッダーメニューの下に来ました。

アンケートの表示がイマイチですが、とりあえずはアンケート登録〜表示(挿入)までの実装ができました。

でわでわ。。。

2020年2月9日2020年6月10日

WordPress プラグイン作成〜$wpdbでのSELECT〜

今回は、WordPress($wpdb)でのDBからデータの取得を行います。

$wpdbとは？

前回の記事にも記載していますが、まぁBugFix（バグ退治)なので細かいところは記載しませんでした。

$wpdbは便利クラス

早い話が、DBへのコネクションをすでに持っているDBアクセス用のクラス(オブジェクト)です。

これを使用するのにはわけがあります。

$wpdbを使用しない場合

使用しているDBがMySQLなのでmysqlのDBコネクションを取得するためにユーザー名とパスワードをセットしてコネクションを取得します。
そして取得したオブジェクトからSQLを発行します。
取得したデータを実装します。

$wpdbを使用する場合

上記の手順1が要らなくなります。

実装サンプル

データの件数を取得する場合

global $wpdb;
$dataCount = $wpdb->get_var('SELECT count(question_id) FROM QUESTIONARY');

データを取得する場合

$result = $wpdb->get_results('SELECT * FROM QUESTIONARY', ARRAY_A);

取得するときにどの型で取得するか？をARRAY_Aで指定しています。
この場合は連想配列になります。

でわでわ。。。

php BugFix foreach 〜foreachに入らない〜

PHPでのforeach文に処理が入らないケースに関してつまづいたので記載します。

どんなコードで動かないか？

ズバリ下のコードです。

get_results('SELECT * FROM QUESTIONARY', ARRAY_A);
    echo count($result);
    // ここから下はデータがある時のみ表示
    foreach($result as $key => $data) {
        echo '';
        echo '' . $data->question . '';
        echo '' . $data->answer1 . '';
        echo '' . $data->answer2 . '';
        echo '' . $data->answer3 . '';
        echo '' . $data->answer4 . '';
        echo '' . $data->answer5 . '';
        echo '';
    }
?>

$resultの中には配列が入っていることを確認しているのですが、いかんせん。。。動かない。。。

Fix(解決)

foreach文の中の処理が昨日していなかったようです。。。
echo "Hello"；と処理を記載したところ問題なく処理が動きました。。。

つまり、$data->プロパティ名の呼び出し方が悪い。
$data['プロパティ名']の形で実装するのが正しいということでした。

修正結果

具体的には以下のようなコードです。

get_results('SELECT * FROM QUESTIONARY', ARRAY_A);
    // ここから下はデータがある時のみ表示
    foreach($result as $key => $data) {
        echo '';
        echo '' . $data['question'] . '';
        echo '' . $data['answer1'] . '';
        echo '' . $data['answer2'] . '';
        echo '' . $data['answer3'] . '';
        echo '' . $data['answer4'] . '';
        echo '' . $data['answer5'] . '';
        echo '';
    }
?>

でわでわ。。。

WordPress $wpdb 使い方〜エラーの出力を行う〜

WordPressプラグインの作成中です。
そして、DBに作成したデータを登録する処理を作成しようとしています。

$wpdb

このオブジェクトを使用してやると、自力でDBコネクションとかトランザクションの管理をしなくて良いです。
そーゆーフレームワークがWordPressです。

そんなわけで、使い方です。

$wpdbの使い方

参考サイト：WordPress Codex(日本語)

ここのページによると、global $wpdbと宣言してから使用しましょうとあります。

しかし、プラグインで使用するときはイベントで起動するfunctionにて宣言する必要があります。
詳細はこちらのページに記載しました。

実装サンプル

リクエストの送信はJSで非同期に送信します。

// 作成したフォームを出力する
function outputForm() {
    if (isCreated == false) {
        alert("Please create form ");
    }
    let dom = document.getElementById("result");
    if (dom == null || typeof dom == 'undefined') {
        alert("Error");
        return;
    }
    let question = document.getElementById("question").innerText;
    let inputs = dom.getElementsByTagName("button");
    let ansArray = [];
    let htmlClass = document.getElementById("insertPos").value;
    let htmlStyle = "";
    for (let i = 0; i < inputs.length; i++) {
        ansArray.push(inputs[i].innerText);
    }
    // 送信するデータ(リクエストパラメータ)
    let data = createSendData(question, ansArray, htmlClass, htmlStyle);
    // DBへデータの登録(汎用的に作成したメソッドなので後ろの引数は全てnullにしている)
    // 下のメソッドは次のように書いても良い(JSの場合) => createXHR("POST", stateChangeMethod);
    let xhr = createXHR(stateChangeMethod, null, null);
    // JSONで送信する
    xhr.open("POST", '');
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify(data));

}

そして、送信するJSONを作成するのに下のメソッドで作成しました。

function createSendData(question, ansArray, htmlClass, htmlStyle) {
    let obj = {};
    obj.question = question;
    for (let i = 0; i < ansArray.length; i++) {
        obj["ans" + i] = ansArray[i];
    }
    obj.hrml_class = htmlClass;
    // 未使用
    obj.html_style = "";
    return obj;
}

大まかにこのような実装です。

サーバーサイド

phpで実装しているものです。

// JSONリクエストを受け取る
$json = file_get_contents('php://input');
$data = json_decode($json);
// (プラグインフォルダにあるので)WordPressはすでに読み込まれている
$vals = json_decode($json, true);

// JSONプロパティの値を取得する

$insertSQL = "insert into questionary('question', 'answer1', 'answer2', 'answer3', 'answer4', 'answer5', 'hrml_class', 'html_style') values (";

$array = get_object_vars($data);
$keys = array('question', 'ans0', 'ans1', 'ans2', 'ans3', 'ans4', 'hrml_class', 'html_style');

for($count = 0; $count < 8; $count++) {
    if (array_key_exists($keys[$count], $array)) {
        $dd = $array[$keys[$count]];
    } else {
        $dd = "";
    }
    if ($dd != "") {
        $insertSQL .= "'" . $dd . "',";
    } else {
        $insertSQL .= "'',";
    }
}
// $insertSQL .= "'" . $vals['htmlClass'] . "','" . $vals['htmlStyle'] . "'";
$insertSQL = substr($insertSQL, 0, -1);
$insertSQL .= ");";

global $wpdb;

$wpdb->query($insertSQL);

wpdbではinsertとかselectなどSQLを組まなくても実行できるようにできていますが、自分はSQLでやったほうが楽だったのでSQLを使用しました。
したがって、使用するメソッドは「query」のみになります(笑)

早速エラー！

上のコードで、SQLを実行してもデータが登録できませんでした。
なので下のようなコードでエラーを出力します。
echo $wpdb->last_error;関数ではないので注意です。

そして出力されたエラーは「SQL間違っているよ」でした。
結局できたのは下のようなコードでした。

    // 宣言しないと落ちる
    global $wpdb;
    // テーブルを作成する(ヒアドキュメントはタブが入流ので)
$sql = <<<EOM
CREATE TABLE IF NOT EXISTS MYSQL.QUESTIONARY(
question_id int NOT NULL PRIMARY KEY AUTO_INCREMENT,
question varchar(60),
answer1 varchar(60),
answer2 varchar(60),
answer3 varchar(60),
answer4 varchar(60),
answer5 varchar(60),
hrml_class varchar(15),
html_style varchar(15),
click_count bigint NOT NULL DEFAULT 0);
EOM;
    $wpdb->query( $sql );
    // Footerの文言削除
    add_filter('admin_footer_text', '__return_empty_string');
    // 画面作成用のPHPファイルを読み込みます。
    require_once(plugin_dir_path( __FILE__ ) . '/manage.php');
}

ポイント

登録時にデータを投入しないカラム「click_count」に関して、CREATE TABLE時に「DEFAULT」を定義していないとエラーになる。
PHPではエラーを意図的に出力する必要がある。

以上のところでした。

    // 宣言しないと落ちる
    global $wpdb;
    // テーブルを作成する(ヒアドキュメントはタブが入流ので)
$sql = <<<EOM
CREATE TABLE IF NOT EXISTS MYSQL.QUESTIONARY(
question_id int NOT NULL PRIMARY KEY AUTO_INCREMENT,
question varchar(60),
answer1 varchar(60),
answer2 varchar(60),
answer3 varchar(60),
answer4 varchar(60),
answer5 varchar(60),
hrml_class varchar(15),
html_style varchar(15),
click_count bigint NOT NULL DEFAULT 0);
EOM;
    $wpdb->query( $sql );
    // Footerの文言削除
    add_filter('admin_footer_text', '__return_empty_string');
    // 画面作成用のPHPファイルを読み込みます。
    require_once(plugin_dir_path( __FILE__ ) . '/manage.php');
    }

でわでわ。。。

WordPress フッター削除

WordPressプラグインの作成中にフッターの表示部分「バージョンX.X.X」の部分が入力項目に被り。。。
早い話がじゃマナになったので削除することにしました。

調べてみると、以下のような方法があるようです。

プラグインで削除
設定で削除（英語なので翻訳が必要)
自力で削除

そして、上のどれも自分のやりたいこととちょいと違ったのでそれを解決するのに少し強引な方法を使用しました。
下のように、「バージョン〜」と言う表示があるのですが、それが邪魔になるのは「項目追加」を行ったときなので。。。。

邪魔になるタイミングで対象になるDOM(エレメント)を削除しました。

// 質問の回答項目を追加
function addRow(button) {
    // WPフッターが邪魔なので削除する
    let delDom = document.getElementById("wpfooter");
    delDom.parentNode.removeChild(delDom); ...

上のようなコードで削除できました。仕様としてはイマイチなものです。。。

でわでわ。。。

2020年1月31日2020年1月30日

XMLHttpRequestエラー〜JSONが送信できない〜

下のようなエラーが出ました。

Uncaught DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.
    at outputForm (http://localhost:8888/wp/wp-admin/admin.php?page=test-plugin:322:9)
    at HTMLButtonElement.onclick (http://localhost:8888/wp/wp-admin/admin.php?page=test-plugin:191:147)

実装しているコードは下のようなコードです。

// 作成したフォームを出力する
function outputForm() {
    let dom = document.getElementById("result");
    if (dom == null || typeof dom == 'undefined') {
        alert("Error");
        return;
    }
    let question = document.getElementById("question").innerText;
    let inputs = dom.getElementsByTagName("button");
    let ansArray = [];
    for (let i = 0; i < inputs.length; i++) {
        ansArray.push(inputs[i].innerText);
    }
    // 送信するデータ(リクエストパラメータ)
    let data = createSendData(question, ansArray);
    // DBへデータの登録(汎用的に作成したメソッドなので後ろの引数は全てnullにしている)
    // 下のメソッドは次のように書いても良い(JSの場合) => createXHR("POST", stateChangeMethod);
    let xhr = createXHR(stateChangeMethod, null, null);
    // JSONで送信する
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.open("POST", '');
    xhr.send(data);

}

function createSendData(question, ansArray) {
    let obj = {};
    obj.question = question;
    for (let i = 0; i < ansArray.length; i++) {
        obj["ans" + i] = ansArray[i];
    }
    return obj;
}

/*
 * XMLHttpRequest生成のメソッド
 * @param stateChangeMethod レスポンスを取得する時の処理
 * @param btnId 謳歌したときに起動するボタンのID
 * @param clickMethod ボタンのクリック時の処理
 */
function createXHR(stateChangeMethod,　btnId, clickMethod) {
    xhr = new XMLHttpRequest();
    if (btnId != null && typeof btnId == "undefined") {
        document.getElementById(btnId).addEventListener('click', clickMethod);
    }
    xhr.onreadystatechange = stateChangeMethod;
    return xhr;
}

エラーメッセージから「XMLHttpRequestをOPENしてからコンテントタイプなどを指定してね！」と言っているので
そのようにします。

    // JSONで送信する
    xhr.open("POST", '');
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(data);

そしたら解決しました(笑)

2020年1月30日2020年6月10日

WordPress Plugin作成〜PHP版WebAPI XMLHttpRequest〜

XMLHttpRequest

いきなり、本題に入ります。WordPressプラグインを作成中ですが、今回の実装の肝になるものです。
ちなみにチュートリアルはこちらにありました。MDNのちゃんとしたドキュメントです。そして日本語です。

どーゆーこと？

アンケートの作成時に、作成したアンケートをDBに登録します。動きとしては下のような感じです。

しかし、この状態では出力したHTMLをアラートで表示するだけです。

ここで、DB登録を行うための処理を作成するのが今回の記事になります。

非同期通信処理

本記事の初めに記載した「XMLHttpRequest」を使用します。
これは、非同期通信の基本となるものです。
今までに紹介したAngularなどもXMLHttpRequesを使用しています。($httpオブジェクト)

XMLHttpRequestは、HTMLのFormタグで作成したボタン<form action="リクエストの送信先"/>のような、コードで送信する、同期通信に対して、非同期で処理を行います。

同期と非同期の違い

早い話が、リクエストに対してレスポンスがありますが、そのレスポンスを待つのが「同期処理」、対して待たないのが「非同期処理」となります。

具体的には、以下の通りです。

<同期通信>
HTMLのFormタグで送信したら、画面の全てを更新する形でHTMLファイルを再度読み込みます。

<非同期通信>
JSでリクエストを飛ばします、そして、飛ばしたリクエストが帰ってくるのを待たずに次の処理が走ります。

HTMLではなく、JSでリクエストを飛ばします、具体的には、GoogleMapでの地図表示が例としてあげられます。ドラッグ&ドロップでの地図の位置を移動したときに地図情報を非同期で通信してデータを取得して画面上に描画します。

<非同期通信の場合>
画面がすぐに描画されずに灰色になってたりするのは通信中と言うことです。

<同期通信>
データ通信が完了するまで画面が表示されません。

大まかにこんな感じです。
それでは実装に入りましょう。

JSで非同期通信

実装するのはXMLHttpRequestを使用した非同期通信処理になります。非同期通信処理になります。左のリンク先にリファレンスがあるのでそれを見てもらうのが良いのですが、読み慣れないと「意味がわからん。。。」となるので、補足をつけます。ここのページを参考にしました。やはりMDNです(笑)

ポイント

リクエストの送信方法

httpRequest.onreadystatechangeプロパティにメソッドを設定する
こちらの、プロパティを下のように使用します。

(function() { // ここから下は無名関数の内容です。
  var httpRequest; // XMLHttpRequestの変数
 // ajaxボタンをクリックするとmakeRequestが動くように設定 document.getElementById("ajaxButton").addEventListener('click', makeRequest);
// イベントリ砂に登録するメソッド
function makeRequest() {
    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
      alert('中断 :( XMLHTTP インスタンスを生成できませんでした');
      return false;
    }
    // 通信時のやりとり中に呼び出されるメソッドを定義する
    httpRequest.onreadystatechange = alertContents;
    // 通信する先の指定する（この場合は同じディレクトリにあるtest.htmlにGETリクエストを飛ばします。
    httpRequest.open('GET', 'test.html');
    httpRequest.send();
  }
  //通信時のやりとり中に動くメソッド
  function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('リクエストに問題が発生しました');
      }
    }
  }
})();

大まかにこんな感じです。
そして、実装した(テストしていません)コードは下のようになります。ほぼパクりです(笑)

/*
 * XMLHttpRequest生成のメソッド
 * @param methdoName GET or POST
 * @param sendURL リクエストの送信先のURL
 * @param btnId 謳歌したときに起動するボタンのID
 * @param stateChangeMethod レスポンス
 */
function createXHR(methdName, sendURL, btnId, stateChangeMethod, clickMethod) {
    xhr = new XMLHttpRequest();
    document.getElementById(btnId).addEventListener('click', clickMethod);
    xhr.onreadystatechange = stateChangeMethod;
    xhr.open(methodName, sendURL);
    xhr.send();
}

これで汎用的に使用できるかと思います。

でわでわ。。。

アンケート調査アプリ1〜WordPressプラグイン作成中〜

WordPressプラグイン作成中です。このプラグインは以下のようなものです。

アンケートプラグイン

自分自身もそうですが、記載した記事や自分のブログサイトのアクセス数、今後どんな記事を書いていこうとか。。。
読者の皆さんがどのようなもの(記事)を期待しているか？を知るための手段として作成しようと考えたのが今回の動機です。

アンケート実施方法

アンケート調査を行うためのアンケートForm(入力)作成と入力してもらったデータ集計を行うの作成中です。
現状としては、アンケートの質問Formを作成するところまでできている状況です。

アンケートの集計

アンケート調査を行なったらその結果をグラフなどにして分析、今後の方針を決めるための情報を導き出さないくては「アンケートの意味」がありません。

しかし、ここである問題が浮き彫りになりました。

「アンケートの集計はどうやるか？」

上記の通り集計方法として以下のようなものがあることはすぐに調べがついたのですが、如何せん。。。集計した結果をどのようにまとめるか？を考える必要があります。

アンケートプラグインの仕様

アンケートはユーザーが作成し、投稿する記事の中にアンケートのINDEX番号順で閲覧者が見つけられるように挿入する
アンケートは質問１つにつき回答が複数でボタン押下により回答する
アンケートの回答ボタンをDBに登録し回答数をカウント・アップしていく
全てのアンケートがクリックされた回数をDBに登録する
回答された時の時間も登録する(24H)
回答ボタンが押された時のユーザーのロケール(日本とかイギリスとか)

実装方法

画面上に必要な情報を入力するFormを作成します。上記の仕様からすると必要な入力項目は以下の通りです。

質問
回答(複数)

そして、欲しい情報はなるべく多く欲しいので以下のものをプログラムで取得します。

回答した時の時間
ロケール(日本とかアメリカとか)
画面サイズより使用しているデバイス(PCとか)

現状で思いつくのは以上になります。
これらの情報から顧客(読者)のニーズを分析するための情報を導き出す方法を考えます。

使えそうな方法は以下のものがわかっています。
クロス集計法これだけです。。。

次回は集計方法に関して調べたいと思います。

でわでわ。。。

WordPress プラグイン作成〜ダッシュボードでフォーム登録する〜

前回はダッシュボードにフォームを作成するJSプログラムを作成しました。このフォームはアンケートの質問と回答を入力するためのフォームです、このフォームをDBに登録します。

フォームをDBに登録

以前作成したDB(テーブル)作成処理も関連してきます。プラグインを有効にした時にDB（テーブル)が存在しなければDB(テーブル)を作成するスクリプトを作成したので、今回はフォームを投稿の中に挿入することを考えながら実装します。

フォームの挿入

本来ならば、ここら辺の処理を全て「設計」してから実装するのが望ましいのですが、手探りでやっているので理想通りにはいきませんでいした。
フォーム挿入に関して、やり方は色々ありますが、今回は、以下のような手順でやろうと思います。

プラグインを有効にした時にフォームを挿入するJSを生成(PHPで出力する)
ダッシュボードで挿入するタグを指定
質問〜回答までの情報をDBに登録
投稿画面を開いた時にJSで、アンケートフォームを挿入する

上記のような手順で処理を行おうと思います。
作成中のコードはGitにアップしてあります。
・index.php
・manage.php

ダッシュボードの追加実装

DBに登録した情報を表示するためには、ダッシュボードで作成したアンケートを登録する必要があるのでアンケートの登録処理を実装しようと思います。
現状は、下のように作成したフォームHTMLをアラートで表示するだけになっています。

ちょっと余談ですが、プラグインを作成している時に「WordPressのご利用〜」とフッターメッセージが邪魔になるのでそれを削除したい場合はこちらのリンクによると下のようなコードを追加してやると削除できるようなのでそれを実装します。
add_filter('admin_footer_text', '__return_empty_string');

そして、作成したフォームは下のように表示できました。

ついでに、プラグインの有効時にBootStrapを使用したいのでBootSrapへの参照を追加しました。
echo '';
BootStrapのファイルはダウンロードしてきてドキュメントルートにフォルダを配置しているので上のようなパス(URI)を指定して参照を追加します。

さらに、作成したアンケートをどこに挿入するか？をWordPressで使用しているポジション(クラス名)を指定するように入力フィールドを追加しいました。

必要な入力フォームがあれば良いのです。。。(見た目のセンスは申し訳ない程度です)

次は、以下の点でどのように実装するか悩みました。

表示したフォームをDBに登録
必要な情報のみをDBに登録してPHP+JSでフォーム生成

そして、 2: PHP+JSで生成する方向に決めました。

というわけで、PHPでの登録処理を作成することにします。

でわでわ。。。

アンケート挿入

サンプル

まとめ

HTML挿入

プラグイン.php

ダッシュボードに表示.php

InsertQuery.php

DeleteQuery.php

表示位置に関して

$wpdbとは？

$wpdbは便利クラス

$wpdbを使用しない場合

$wpdbを使用する場合

実装サンプル

関連ページ

どんなコードで動かないか？

Fix(解決)

修正結果

関連ページ

$wpdb

$wpdbの使い方

実装サンプル

サーバーサイド

早速エラー！

ポイント

関連ページ

どーゆーこと？

非同期通信処理

同期と非同期の違い

JSで非同期通信

ポイント

リクエストの送信方法

関連ページ

アンケートプラグイン

アンケート実施方法

アンケートの集計

「アンケートの集計はどうやるか？」

アンケートプラグインの仕様

実装方法

関連ページ

フォームをDBに登録

フォームの挿入

ダッシュボードの追加実装

関連ページ