WordPress プラグイン作成〜アンケート作成プラグインを作る〜

前回までに、プラグインのハコを作成しました。
つまりは、ダッシュボードにメニューを追加、クリックすることで自作のページを表示することができるような実装を行いました。

そして、今回はアンケートのための質問と回答するためのボタンを作成するJSプログラムを作成しました。

JSでフォーム作成

できたものは下のようなものです。
<入力前>

<入力後>

下の部分に質問とボタンが表示されています。
これを投稿画面に挿入しようという考えです。

まずはHTMLで質問などの入力部品を作成

<table id="questionTable">
    <tr>
        <td>
            <font size="3">Input Question: </font>
        </td>
        <td>
            <input id="questionMessage" type="text" maxlength="30" size="35" placeholder="質問内容を記入します"/>
        </td>
    </tr>
    <tr>
        <td>
            <font size="3">Input Answer: </font>
        </td>
        <td>
            <input id="ansText0" data-ans="0" type="text" maxlength="12" size="12"/>
        </td>
    </tr>
</table>
<button type="button" onclick="addRow(this)">項目追加</button>
<button type="button" onclick="createForm()">作成</button>
<button type="button" onclick="deleteForm()">削除</button>

そして、質問の数を増やすためのボタン、フォームの作成ボタン、作成したコンポーネントの削除ボタンと用意しました。
具体的なJSの実装は下のようになっています。

// フォーム作成フラグ
let isCreated = false;
// ボタンのカウンタ
let num = 0;
// 質問の回答項目を追加
function addRow(button) {
    num++;
    let table = document.getElementById("questionTable");
    // テーブに行を追加
    let row = table.insertRow(table.rows.length);
    let col1 = row.insertCell(0);
    let col2 = row.insertCell(1);
    col1.innerHTML = 'Input Answer: ';
    col2.innerHTML = '';
}
// 作成したアンケートの入力フォームを生成
function createForm() {
    if (isCreated) {
        return;
    }
    let question = document.getElementById("questionMessage").value;
    let table = document.getElementById("questionTable");
    let inputs = table.getElementsByTagName("input");
// 文言を表示するためのpタグを作成
    let messageElement = document.createElement("p");
    messageElement.innerText = question;
    // フォームを出力するためのdivタグにフォームを追加する
    let dom = document.getElementById("result");
    dom.appendChild(messageElement);
    for(let i = 0; i < inputs.length; i++) {
        console.log(inputs[i].dataset.ans);
        let but = document.createElement("button");
        but.innerText = inputs[i].value;
        but.dataset.ans = inputs[i].dataset.ans
        dom.appendChild(but);
    };
    isCreated = true;
}

// 作成したフォームを削除
function deleteForm() {
    document.getElementById("result").innerHTML = "";
    isCreated = false;
}

こんな感じで実装しました。

でわでわ。。。


関連ページ

  1. WordPress プラグイン作成〜DBを使用する〜
  2. PHP PDO 〜MySQLにアクセスする〜
  3. PHP Ajax 〜DBに登録したデータを受信する〜
  4. Google Maps API PHP連携 〜マップ情報をDBに登録する〜
  5. PHP Image File 〜iPhoneやAndroidでの画像送受信の問題〜
  6. AngularJS Routing 〜PHPをWeb APIにする〜
  7. WordPress PHPカスタム〜根本的に見た目を変える〜
  8. WordPress PHPカスタム〜根本的に見た目を変える2〜
  9. Eclipse PHPプラグイン 〜ElipseでWordPress環境を構築〜
  10. WordPress テスト実装 〜heade-test.phpを表示〜
  11. AngularJS + PHP 〜WordPressと連携する〜
  12. AngularJS + PHP 〜AngularJSの実装〜
  13. AngularJS + PHP 〜AngularJSの実装2〜
  14. WordPress 処理解析 ~index.phpを眺める~
  15. WordPress Plugin NewStatPress ~アクセス解析プラグインAPIを使う~
  16. WordPress 処理解析 ~ログイン処理を調べる~
  17. WordPressカスタム〜アンケートボタンを追加する(設計)〜
  18. WordPressカスタム〜プラグインの作成〜
  19. WordPressカスタム〜ダッシュボードのプラグイン画面作成〜
  20. WordPressカスタム〜ダッシュボードのプラグイン画面作成2〜
  21. WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜
  22. WordPress プラグイン作成〜アンケート作成プラグインを作る〜