WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜

WordPressのダッシュボードにプラグインを作成、メニューで開けるようにしました。
1.プラグインメニューの作成
2.プラグイン画面の作成

そして、作成したプラグインでダッシュボードに画面を表示するところまで実装しました。

実装のまとめ

実装(作成)したファイルは以下のものになります。

  1. CustomQuestionary/index.php
  2. CustomQuestionary/manage.php

上記のindex.phpでは、プラグインの説明コメントを作成、ダッシュボードにメニューを追加してメニューをクリックすることでmanage.phpを読み込むよう実装しています。

// 表示する内容
function helloCustomQuestionary() {
    require_once(plugin_dir_path( __FILE__ ) . '/manage.php');

}
// ダッシュボードに追加するための関数
function addCustomQuestionary() {
    // ダッシュボードにこの表示が出るように追加する
    //wp_add_dashboard_widget( 'my_dashboard_widget', 'Featured Dashboard Page', 'helloCustomQuestionary' );
    add_menu_page( 'Test Plugin', 'CustomQuestionary', 'manage_options' , 'test-plugin' , 'helloCustomQuestionary' );
}
// 管理メニューを表示した時に
//add_action('wp_dashboard_setup', 'addCustomQuestionary');
add_action('admin_menu', 'addCustomQuestionary' );
do_action( 'addCustomQuestionary' );

そして、require_once(plugin_dir_path( FILE ) . '/manage.php');の部分で画面作成をしているphpファイルを読み込みます。

<?php
?>
<h1>Custom Questionary Plugin</h1>
<hr>
<dl>
    <dt><h4>Usage(使い方)</h4></dt>
    <dd>1.Create Questions(質問を作成します)</dd>
    <dd>2.Create answers(回答を作成します)</dd>
    <dd>3.Set position(設置する場所を指定します)</dd>
</dl>
<hr>
<h3>Question(質問)</h3>
<table id="questionTable">
    <tr>
        <td>
            <font size="3">Input Question: </font>
        </td>
        <td>
            <input type="text" maxlength="30" size="35" placeholder="質問内容を記入します"/>
        </td>
    </tr>
    <tr>
        <td>
            <font size="3">Input Answer: </font>
        </td>
        <td>
            <input type="text" maxlength="12" size="12"/>
        </td>
    </tr>
</table>
<button type="button" onclick="addRow()">項目追加</button>

<script>
function addRow() {
    let table = document.getElementById("questionTable");
    let row = table.insertRow(table.rows.length);
    let col1 = row.insertCell(0);
    let col2 = row.insertCell(1);
    col1.innerHTML = '<font size="3">Input Answer: </font>';
    col2.innerHTML = '<input type="text" maxlength="12" size="12"/>';
}
</script>

phpファイルだけど、中身は全てHTMLです(JS含み)こんな感じで必要な情報を入力していくようにしたいと思います。

ここから、アンケートの作成に必要な情報を入力します。

でわでわ。。。