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

WordPressでのプラグインを作成していきます。
前回は、ダッシュボードに、プラグインのメニューを追加するところを実装しました。

プラグイン画面の作成

前回までの作成状態では下のようにindex.phpファイルが1つあるだけです。

そして、コードは以下のように変更します。これは今まで、文字列を表示するだけだった処理を、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' );

こうすることで、プラグインのphpファイルとプラグインの画面部分を分けて書くことができ、修正する時には、どのファイルを修正すれば良いかすぐにわかるというわけです。

ポイント

require_once(plugin_dir_path( __FILE__ ) . '/manage.php');

このコードではrequire_once(plugin_dir_path( __FILE__ ) とパスを作成しています。これをやらないとパスが正しく読み込めないようです。つまり相対パス(./XXX)ではファイルがちゃんと読めませんでした。フォルダ構成は下のようになっています。
![](http://zenryokuservice.com/wp/wp-content/uploads/2020/01/スクリーンショット-2020-01-14-7.42.50.png)

## 実装結果
実装の結果下のような画面ができました。
![](http://zenryokuservice.com/wp/wp-content/uploads/2020/01/スクリーンショット-2020-01-14-7.45.46-300x244.png)

これは、下のようにmanage.phpを作成しています。というかほぼHTMLです、

<?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>

でわでわ。。。