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含み)こんな感じで必要な情報を入力していくようにしたいと思います。

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

でわでわ。。。


関連ページ

  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 プラグイン作成〜アンケート作成プラグインを作る〜