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

WordPressプラグインを使用する時にはダッシュボードでプラグインの機能を使用するために必要な情報を入力、カスタムしたいものです。
なのでプラグインのユーザーが使いたい機能(今回はアンケート)を作成できるようにプラグインの実装を進めていきます。

ダッシュボードで入力フォーム

今回の作成する「アンケートブラグイン」はしようとして以下のようなものを考えています。

アンケートするための質問１つにつき回答のボタンを複数個(ユーザーが作成)
作成したアンケート(複数)を記事の中にバラバラに挿入する
ダッシュボードでアンケートの集計結果を表示する(まずはクリックの階数表示のみ)

上記のように考えています。
そして、ダッシュボードでは「アンケートの作成」を行いたいので下のようにアンケート作成フォームを用意します。

使用するための簡単な説明もつけました。のちにドキュメントをちゃんと作成しようと考えています。

フォームの作成には以下のようなJSプログラムで作成しようと考えています、というか作成しました。
プラグインのディレクトリ構成は下のような感じで、プラグインの実装を行なっております。

index.php(ダッシュボードにメニューを作成)

manage.php(ダッシュボードメニューより画面部分を開く)

この時点でのmanage.phpはPHPファイルなのにPHPの実装を行なっていません(笑)。
必要なのはHTMLとJSの部分なので。。。
以下はmanage.phpのJS部分のコードです。

// 作成したアンケートの入力フォームを生成
function createForm() {
if (isCreated) {
    return;
}
let question = document.getElementById("questionMessage").value;
let table = document.getElementById("questionTable");
let inputs = table.getElementsByTagName("input");

let messageElement = document.createElement("p");
messageElement.innerText = question;
let dom = document.getElementById("result");
dom.appendChild(messageElement);
for(let i = 1; 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; }

// 作成したフォームを出力する function outputForm() { let dom = document.getElementById("result"); if (dom == null || typeof dom == 'undefined') { alert("Error"); return; } alert(dom.innerHTML); }

そして、実行した結果は以下のような見た目です。

項目追加ボタンでInput Anwersを追加して最後に登録ボタンを押下しました。

登録処理はJSからリクエストをPHPへ送信し、そのデータをDBに登録します。
このような仕組みをAjaxといい非同期通信でリクエストをサーバーへ送信します。
そうすると、サーバーのレスポンスを待たないので画面の操作で何かの待ち時間が発生しません。

そして、同じような仕組みでレスポンスを受け取る時、これをWebAPIとよんだりします。
JSONでデータを取得するものです。天気予報などRESTfiulAPIと呼ばれているのもがそうです。

ここら辺で失礼いたします。

でわでわ。。。

WordPress プラグイン作成〜DBを使用する〜

今回はWordPressプラグイン作成でDBを使用する場合の記事を記載します。

DBは何に使う？

はっきり言って、何にでも使用できます。例として以下のようなものが挙げられます。

ユーザー管理、ログインを使用してユーザー専用ページ、機能などの実装に使用します。
データの集計、今回作成しようとしている「アンケートプラグイン」でも使用します。クリックした時に対象になるデータをDBに登録、登録した情報を元にアンケートの集計を行います。
3, WordPressのようなCMSの投稿記事の管理(表示)
独自調査のまとめなど。。。

挙げればきりがないので、ここら辺にしておきますが。こんな感じで使用できます。

プラグインで使用するには？

一応、プラグインの作成に関しては以下の記事を参照してください。
・ローカルサーバーを立てる
 ・ダッシュボードにプラグイン画面を追加する
 ・プラグインでダッシュボードにメニューを追加する
 ・プラグインでダッシュボードにメニューを追加する２
 ・プラグインでダッシュボードにメニューを追加する３

そして、DBの使用方法に関して設計をします。
最近発見したのですが、このファイルがなかなか設計しやすいと思いご紹介いたします。

上のようなものですが、子供用だと思って甘くみてはいけません。
作るものを考える時に初めに「結論(結果)」をイメージすると思いますが、以下のような手順で使用すれば、大人も十二分に使用できるツールだと思います。

「結論」を真ん中の酢ページに記載します。
「結論」のものを作成するのに必要な部品を両サイドに書き出します。当然線を引っ張るなどの手間を加えてやれば、それだけ直感的に理解できるものになると思います。
そして、作業手順を適当な形で記載してやります。書き方はものによるのでなんとも言えません。。。

しかし、このような形でかかれた設計図は「直感的」で「シンプル」なものになるのでユースケースとしても使用することができると思います。

プラグインへのDB作成

今回は、わかりやすい方法で、自分がそのように使用するのですが。。。

プラグインを有効にした時に作成

上記のように、プラグインを有効にした時に必要になるDBを作成するようにしようと思います。
懸念点としては、プラグインを有効にした時に「毎回テーブル(DB)が作成されると困る」というところです。。。

とりあえずは、テーブルの設計をします。
使用したいデータを列挙します。例えばログイン機能であれば、ID、ユーザー名、パスワード。。。などです。今回は使用しませんが、「パスワード」はDBのデータが盗まれたりすると大変危険(情報漏洩)なのでパスワードの登録は暗号化を使用します。

テーブルの作成方法

そして、設計ができたら「プラグインを有効にした時に作成する」プログラムを作ります。
先ほど懸念していた「毎回テーブルが作成されるのでは？」という部分も解決できます。

SQLを使用する

DBサーバーの名前にもある通り「SQL」を使用してテーブルを作成します。
SQLはDB操作に使用するプログラミング言語です。有名なものとしてはMySQLもそうでるがORACLEもあります。

ますはテーブル作成

テーブルを作成するのには「Create Table文」を使用します。今回はWordPressを使用しているのでMySQLのドキュメントをリンクに貼り付けています。
書き方は決まっていて下のように書きます。ちなみにコメントは「#」と「--」が使用できるようです。

CREATE TABLE 
pet  -- 作成するテーブル名
(name VARCHAR(20), -- "name"というカラム名
owner VARCHAR(20), -- "owner"は20文字分
species VARCHAR(20),
sex CHAR(1),  -- 性別は一文字
birth DATE,  -- 誕生日は日付型のデータ
death DATE);

上のような文でテーブルを作成することができます。
そして、懸念点の解決方法としては以下のようにCreate Table文に「if not exists」をつけてやれば解決です。
MySQLのCreate Table文の文法
create table 自作テーブル if not exists
自分の作成したSQL(Create Table文)は下のようになりました。

create table if not exists questionary(
    question_id int not null PRIMARY KEY AUTO_INCREMENT,
    question varchar(60),
    answers varchar(60),
    hrml_class varchar(15),
    html_style varchar(15),
    click_count bigint);

これはローカルのDBサーバーに作成したので公開されていません。

ポイント

テーブルのキーになるカラム(question_id)はプライマリキーなのでこのテーブルでは必ず一意(テーブルの中では１つしか存在しない)なのでquestion_id=1というのは必ず１つになります。

そして、「AUTO_INCREMENT」をつけているのでデータが登録された時にバックエンドプログラムがquestion_idの値を追加してくれるというわけです。

まとめ

今回はアンケートプラグインで使用するDB(テーブル)を作成しました。使用したプログラミング言語は(SQL)というものです。
SQLはDB操作のためにいろんなことができます。メールの送信などもできます。
そんなわけでSQLが使えると色々と便利です。

でわでわ。。。

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;
}

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

でわでわ。。。

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

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

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

実装のまとめ

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

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

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

でわでわ。。。

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

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

プラグイン画面の作成

前回までの作成状態では下のように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' );

こうすることで、プラグインの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>

でわでわ。。。

### 関連ページ
1. [WordPress プラグイン作成〜DBを使用する〜](https://zenryokuservice.com/wp/2020/01/18/wordpress-%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e3%80%9cdb%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%99%e3%82%8b%e3%80%9c/)
1. [PHP PDO 〜MySQLにアクセスする〜](https://zenryokuservice.com/wp/2019/07/11/php-pdo-%e3%80%9cmysql%e3%81%ab%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e3%81%99%e3%82%8b%e3%80%9c/)
1. [PHP Ajax 〜DBに登録したデータを受信する〜](https://zenryokuservice.com/wp/2019/07/13/php-ajax-%e3%80%9cdb%e3%81%ab%e7%99%bb%e9%8c%b2%e3%81%97%e3%81%9f%e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e5%8f%97%e4%bf%a1%e3%81%99%e3%82%8b%e3%80%9c/)
1. [Google Maps API PHP連携〜マップ情報をDBに登録する〜](https://zenryokuservice.com/wp/2019/07/14/google-maps-api-php%e9%80%a3%e6%90%ba-%e3%80%9c%e3%83%9e%e3%83%83%e3%83%97%e6%83%85%e5%a0%b1%e3%82%92db%e3%81%ab%e7%99%bb%e9%8c%b2%e3%81%99%e3%82%8b%e3%80%9c/)
1. [PHP Image File 〜iPhoneやAndroidでの画像送受信の問題〜](https://zenryokuservice.com/wp/2019/08/13/php-image-file-%e3%80%9ciphone%e3%82%84android%e3%81%a7%e3%81%ae%e7%94%bb%e5%83%8f%e9%80%81%e5%8f%97%e4%bf%a1%e3%81%ae%e5%95%8f%e9%a1%8c%e3%80%9c/)
1. [AngularJS Routing 〜PHPをWeb APIにする〜](https://zenryokuservice.com/wp/2019/11/14/angularjs-routing-%e3%80%9cphp%e3%82%92web-api%e3%81%ab%e3%81%99%e3%82%8b%e3%80%9c/)
1. [WordPress PHPカスタム〜根本的に見た目を変える〜](https://zenryokuservice.com/wp/2019/12/13/wordpress-php%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%80%9c%e6%a0%b9%e6%9c%ac%e7%9a%84%e3%81%ab%e8%a6%8b%e3%81%9f%e7%9b%ae%e3%82%92%e5%a4%89%e3%81%88%e3%82%8b%e3%80%9c/)
1. [WordPress PHPカスタム〜根本的に見た目を変える2〜](https://zenryokuservice.com/wp/2019/12/16/wordpress-php%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%80%9c%e6%a0%b9%e6%9c%ac%e7%9a%84%e3%81%ab%e8%a6%8b%e3%81%9f%e7%9b%ae%e3%82%92%e5%a4%89%e3%81%88%e3%82%8b2%e3%80%9c/)
1. [Eclipse PHPプラグイン〜ElipseでWordPress環境を構築〜](https://zenryokuservice.com/wp/2019/12/31/eclipse-php%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3-%e3%80%9celipse%e3%81%a7wordpress%e7%92%b0%e5%a2%83%e3%82%92%e6%a7%8b%e7%af%89%e3%80%9c/)
1. [WordPress テスト実装〜heade-test.phpを表示〜](https://zenryokuservice.com/wp/2020/01/03/wordpress-%e3%83%86%e3%82%b9%e3%83%88%e5%ae%9f%e8%a3%85-%e3%80%9cheade-test-php%e3%82%92%e8%a1%a8%e7%a4%ba%e3%80%9c/)
1. [AngularJS + PHP 〜WordPressと連携する〜](https://zenryokuservice.com/wp/2020/01/05/angularjs-php-%e3%80%9cwordpress%e3%81%a8%e9%80%a3%e6%90%ba%e3%81%99%e3%82%8b%e3%80%9c/)
1. [AngularJS + PHP 〜AngularJSの実装〜](https://zenryokuservice.com/wp/2020/01/06/angularjs-php-%e3%80%9cangularjs%e3%81%ae%e5%ae%9f%e8%a3%85%e3%80%9c/)
1. [AngularJS + PHP 〜AngularJSの実装2〜](https://zenryokuservice.com/wp/2020/01/07/angularjs-php-%e3%80%9cangularjs%e3%81%ae%e5%ae%9f%e8%a3%852%e3%80%9c/)
1. [WordPress 処理解析～index.phpを眺める～](https://zenryokuservice.com/wp/2020/01/09/wordpress-%e5%87%a6%e7%90%86%e8%a7%a3%e6%9e%90-%ef%bd%9e%ef%bd%9e/)
1. [WordPress Plugin NewStatPress ～アクセス解析プラグインAPIを使う～](https://zenryokuservice.com/wp/2020/01/08/wordpress-plugin-newstatpress-%ef%bd%9e%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e8%a7%a3%e6%9e%90%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3api%e3%82%92%e4%bd%bf%e3%81%86%ef%bd%9e/)
1. [WordPress 処理解析～ログイン処理を調べる～](https://zenryokuservice.com/wp/2020/01/10/wordpress-%e5%87%a6%e7%90%86%e8%a7%a3%e6%9e%90-%ef%bd%9e%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3%e5%87%a6%e7%90%86%e3%82%92%e8%aa%bf%e3%81%b9%e3%82%8b%ef%bd%9e/)
1. [WordPressカスタム〜アンケートボタンを追加する(設計)〜](https://zenryokuservice.com/wp/2020/01/11/wordpress%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%80%9c%e3%82%a2%e3%83%b3%e3%82%b1%e3%83%bc%e3%83%88%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e8%bf%bd%e5%8a%a0%e3%81%99%e3%82%8b%e3%80%9c/)
1. [WordPressカスタム〜プラグインの作成〜](https://zenryokuservice.com/wp/2020/01/12/wordpress%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%80%9c%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%81%ae%e4%bd%9c%e6%88%90%e6%96%b9%e6%b3%95%e8%aa%bf%e6%9f%bb%e3%80%9c/)
1. [WordPressカスタム〜ダッシュボードのプラグイン画面作成〜](https://zenryokuservice.com/wp/2020/01/13/wordpress%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%80%9c%e3%83%80%e3%83%83%e3%82%b7%e3%83%a5%e3%83%9c%e3%83%bc%e3%83%89%e3%81%ae%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e7%94%bb%e9%9d%a2%e4%bd%9c/)
1. [WordPressカスタム〜ダッシュボードのプラグイン画面作成２〜](https://zenryokuservice.com/wp/2020/01/14/wordpress%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%80%9c%e3%83%80%e3%83%83%e3%82%b7%e3%83%a5%e3%83%9c%e3%83%bc%e3%83%89%e3%81%ae%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e7%94%bb%e9%9d%a2%e4%bd%9c-2/)
1. [WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜](https://zenryokuservice.com/wp/2020/01/15/wordpress%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%80%9c%e3%83%80%e3%83%83%e3%82%b7%e3%83%a5%e3%83%9c%e3%83%bc%e3%83%89%e3%81%ae%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e7%94%bb%e9%9d%a2%e4%bd%9c-3/)
1. [WordPress プラグイン作成〜アンケート作成プラグインを作る〜](https://zenryokuservice.com/wp/2020/01/16/wordpress-%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e3%80%9c%e3%82%a2%e3%83%b3%e3%82%b1%e3%83%bc%e3%83%88%e4%bd%9c%e6%88%90%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%82%92/)

2020年1月13日2020年6月10日

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

前回は、プラグイン自体の作成を行いました。単純にプラグインを有効にしてダッシュボードにメニューが追加されることを確認しました。

プラグイン画面の中身

現状では、「Hello World」的な感じで、適当な文字列を表示するだけです。これでは意味がないので中身を実装していきます。

現状確認

WordPressのフォルダ(プラグイン)に以下のような
「CustomQuestionary」というフォルダがあります。

これが作成中のプラグインで、ダッシュボードには下のように表示されています。

プラグインのフォルダにある「index.php」は下のようなコードを実装しました。

// 表示する内容
function helloCustomQuestionary() {
    echo "
        helloCustomQuestionary
    ";
}
// ダッシュボードに追加するための関数
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' );

ライセンスとか、プラグインのコメントとかは割愛しています。

そして、画面上に表示されている部分は関数「helloCustomQuestionary()」の中に実装しています。

プラグイン画面の作成

今回の作成するものは「カスタム・アンケート」プラグインなので、仕様を確認します。

仕様

アンケートのボタンを投稿画面に追加する
クリックされたアンケートボタンの集計を行いグラフに表示する
アンケートボタンは質問と回答を１セットにする
※アンケートの質問は以下のような形で行う
[Ex]
Question: この記事はわかりやすかったですか？
Answer: 「わからない」「わかりづらい」「普通」「わかりやすい」「大変わかりやすい」
回答はボタン押下で集計します。

複数の質問を行いたい場合は、QuestionとAnswerをバラバラに記事の中に配置する。

ポイント

アンケートを取る時に入力数が多いと回答が面倒なので、QAを１つずつ行えるようにする。

ユースケース

・ダッシュボードにて、アンケートの作成を行う
・QuestionとAnswerをセットで作成する
・アンケート挿入部分を投稿に記載する
-> TypeA: 投稿(POST)に直接アンケート挿入用のHTMLタグを挿入する
-> TypeB: アンケートを挿入するスタイルを指定する(指定の投稿以外にも挿入できる)

以上のように考えています。

実装に関して

うまく行けるかどうか不安な部分がありますが、不可能ではないと思いますので、こんな感じで実装を進めていこうと思います。

でわでわ。。。

WordPressカスタム〜プラグインの作成〜

WordPressと連携してアンケート調査ができるプラグインを作成しようと考えています。

元々は、WordPressを使用して何かしらのWebサービスを作成したいと思っていますが、アイディアが浮かばないので、自分の欲しい機能を作成しようと考えました。

仕様などに関してはこちらのページに記載しています。

プラグインの作成方法

早速プラグイン作成の方法を調査します。そして、以下の部分に関して「できる」「できない」を判断しようと考えています。参考にするサイトはWordPress Codex日本語版です。

手順

プラグインの名前をつける
プラグインのファイル(PHP)を作成する
説明書の作成
紹介ページの作成

大まかには上のような手順でやるようです。

1.プラグインの名前

今回は「アンケート調査のためのプラグイン」なので「アンケートプラグイン？」とか思ったのですが、１つのアンケートしか作れないのでは弱いのでちょと考えます。。。
アンケートの集計結果はDBの１レコードで済むので、アンケートの種類＝１レコードとなるように作成する方向で考えたいと思ったら、好きなだけアンケートを作成できる方が現実的だ、という結論に至りました。なので「CustomQuestionary」にしようと思います。

2.プラグインのファイル作成

シンプルに開発の行程です。ここが今回の記事のメイン部分になります。

プラグインのヘッダー

参考サイトによると下のようなフォーマットで作成するようです。

<?php
/*
Plugin Name: (プラグインの名前)
Plugin URI: (プラグインの説明と更新を示すページの URI)
Description: (プラグインの短い説明)
Version: (プラグインのバージョン番号。例: 1.0)
Author: (プラグイン作者の名前)
Author URI: (プラグイン作者の URI)
License: (ライセンス名の「スラッグ」 例: GPL2)
*/
?>

そして、ライセンスに関しては、WordPressがGPL２を使用しているようなので、同じものを使用します。

/*  Copyright 作成年 プラグイン作者名 (email : プラグイン作者のメールアドレス)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License, version 2, as
    published by the Free Software Foundation.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

これらのコードはindex.phpというファイルに作成しました。プラグイン名/index.php

そのほか

・コーディング規約は軽く目を通しておいた方が良さそうです。
・国際化に関して、プラグインを広く配布するのであれば、国際化対応をした方が良いです、しかし自分のものはそこまで考えていないので「売れ行きがよければ。。。」(ダウンロード数が多ければ)ということにします。

実装に関して

この部分はスライドでの説明があったのでそちらを参考にします。

実装手順

wp-content/pluginにPHPファイルを置く

これだけのようです、細かい実装は「どんなプラグインを作成するか？」によるのでまずは、「WordPressプラグイン版・ハローワールド」をやってみます。

プラグイン実装

下のようにプラグインファイル(フォルダ)を配置します。

そして、ローカルサーバー(MAMP)を起動します。ローカルサーバーに関してはこちらのページでセットアップしています。
そして、ローカルサーバーのダッシュボードを開いてみると下のように表示されています。

しかし、ハローワールドが確認できません。

これは「いつ呼ばれるの？」に対する疑問に答える必要がありました。つまり、アクションフックの一覧からどのタイミングで呼ばれるか？を決定してそれに対応するように実装する必要があるということでした。
今回は「ハローワールド」なので管理メニューを表示する時に呼ばれるようにしようと思いますので以下のコードを追記します。
add_action('admin_menu');
そして実行！

エラーになりました。意味がわからないのででバックできるようにします。以下のコードをさらに追記。。。参考サイトはこちら
define( 'WP_DEBUG', true );
そして、コードの部分を以下のように関数に変更しました。

function helloCustomQuestionary() {
    echo "Hello WordPress Plugin!";
}

すると下のように、エラーが出ました。

Fatal error: Uncaught ArgumentCountError: Too few arguments to function add_action(), 1 passed in /WP_DEV/wp/wp-content/plugins/CustomQuestionary/index.php on line 34 and at least 2 expected in /WP_DEV/wp/wp-includes/plugin.php:403 Stack trace: #0 /WP_DEV/wp/wp-content/plugins/CustomQuestionary/index.php(34): add_action('admin_menu') #1 /WPDEV/wp/wp-admin/includes/plugin.php(2223): include('/Users/takk/WP...') #2 /WP_DEV/wp/wp-admin/plugins.php(175): plugin_sandbox_scrape('CustomQuestiona...') #3 {main} thrown in /WP_DEV/wp/wp-includes/plugin.php on line 403

つまりはadd_actionの関数が間違っているということです。こちらの関数リファレンスで解決します。そして、追記したコードを以下のように修正します。
// 管理メニューを表示した時に add_action('admin_menu', 'helloCustomQuestionary');
これでエラーは出なくなりましたが、画面の確認がまだできません。。。

調べてみた結果以下のようにコードを作ってやるとダッシュボードに追加されました。

// 表示する内容
function helloCustomQuestionary() {
    echo "
        helloCustomQuestionary
    ";
}
// ダッシュボードに追加するための関数
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)を作成する。今回はフォルダの下に配置したのでプラグイン名/index.phpを作成
ダッシュボードを開いた時のフック(add_action())を追加する
ダッシュボードのメニューに追加する(add_menu_page())
メニューをクリックした時に表示する画面を出力するPHP処理を実装

以上のような処理を実装してやればOK!

お疲れ様でした。

でわでわ。。。

WordPressカスタム〜アンケートボタンを追加する(設計)〜

WordPressカスタム

ここ最近はWordPressに関して調査しています。
大まかに以下のようなことを調べました。

テーマのindex.phpの処理内容
WordPressへのログイン処理の実装方法

ログインの方法に関しては自前実装の方が簡単なのでそのようにしたいと思いますが、投稿に関しては中をいじった方が楽なのでそのようにしたいと思います。

アンケートボタンを作成する

アンケートのボタンを作成したいと思います。
要件としては以下のものです。

読まれた記事の評価を５段階でつけてもらう

これだけです、この情報をDBに登録し、アンケート結果をもとに良い記事を書けるように頑張ろうという次第です。

仕様

画面のフッター部分に評価のためのボタンを５つ配置する。
各ボタンには「大変わかりやすい」「わかりやすい」「普通」「わかりにくい」「わからない」の評価を示すボタンを配置し各ボタンを押下することでアンケートの集計を行う。

設計

大変わかりやすい〜わからないまでの評価ボタンをフッター部分に配置
各ボタンを押下することで、全てのボタンを非活性にする
評価をした時の値をDBに登録するため以下のデータをAJAX(非同期通信)でinsertAaggregate.phpへ送信する

集計用のDB作成

これは、phpAdminでテーブルを作成します。
カラムは以下のようなものを作成しようと考えています。

投稿ID(post_ID)
記事のタイトル
評価(大変わかりやすい〜わからない)

集計結果表示

これはダッシュボードを改造して上の作成したDBよりデータを取得、集計したデータを評価できる形にしてそれを表示できるようにしたいと思います。
この部分に関しては、ダッシュボードの表示、カスタム方法らへんを調査する必要があります。

とりあえずは、上のような感じで実装しようと思います。が集計方法を明確にする必要がありますのでそこも調査する必要ありです。

まとめ

【やること】
・アンケートボタンの配置
・ボタン押下によるデータの送信とDB登録処理の実装

【調査すること】
・集計方法の調査(アンケートの集計)
・ダッシュボードのカスタム方法、できればプラグインのような形で機能追加できると良い

こんな感じです。

でわでわ。。。

WordPress 処理解析～ログイン処理を調べる～

WordPressのダッシュボードへのログインする処理を調査して、自作するログイン処理に応用(連携)できないか検討します。

WPのログイン処理

WordPressのログイン処理はURL/wp-adminを指定した時に表示されるので。。。眺めるファイルは/wp-admin/index.phpファイルになります。
というわけで早速。。。そして、参考にするサイトはWordPressのドキュメントサイトです。

コードを眺める

参照するファイルは/wp-admin/index.phpです。頭から眺めます。

/**
 * Dashboard Administration Screen
 *
 * @package WordPress
 * @subpackage Administration
 */

/** Load WordPress Bootstrap */
require_once( dirname( __FILE__ ) . '/admin.php' );

/** Load WordPress dashboard API */
require_once( ABSPATH . 'wp-admin/includes/dashboard.php' );

wp_dashboard_setup();

wp_enqueue_script( 'dashboard' );

上のrequire_once()はファイルを読み込むということなので「なるほど！」となるけど、wp_dashboard_setupとwp_enqueue_scriptはそういきませんので調べることにします。

wp_dashboard_setup()

このWorPress関数(テンプレート)はダッシュボードのセットアップを行うようで、ここに関連する処理(ライブラリ(API))でダッシュボードのカスタムができるようです。

wp_enqueue_script()

こちらは説明書きがあったのでそれを眺めると。。。

スクリプトファイルがまだインクルードされていない場合、また、すべての依存するスクリプトが登録済みの場合、依存関係に従った適切なタイミングでファイルを生成されたページにリンクします。スクリプトのリンクは、wp_register_script() 関数ですでに登録済みのハンドル、またはこの関数に必要なパラメータを与えることで行えます。
これは WordPress が生成するページに JavaScript をリンクする際に推奨されている方法です。

そして、実際にあるコードは下のようになっているので
wp_enqueue_script( 'dashboard' );説明とコードからして、下のファルダにあるJSファイルを読み込んでいるだろうと予測します。
予測したら、それを確認します。

dashboad.jsを発見することができました。

ログイン処理はどこに？

横道に逸れましたが、ログイン処理はどこにいるのでしょうか？
確かにログインの画面は/wp-admin/で表示させていました。
どうやらログイン処理部分を通り過ぎてしまったようです。
なので初めのrequire_onceのとこまで戻り、読み込んでいるファイルを眺めます。

admin.phpを眺める

今までは、丁寧に眺めてきましたが、Login部分を見つけたいので、かっ飛ばして眺めます。
require_once( dirname( dirname( FILE ) ) . '/wp-load.php' );
このコードより、/wp-load.phpを眺めてもloginが見つからないので飛ばします。。。そして、インターネットで調べたほうが早そうなので、そうすると。。。このサイトでは、functions.phpを編集する方法でログイン画面をカスタムする方法を記載していました。

結論

ダッシュボード、ログイン画面共にベースになるファイルは発見することができたので、これをベースにカスタムすれば良いということがわかりましたが、当然、テーマを変更すると作成したファイルが参照されなくなるので。。。ファイルの配置場所は考える必要があります。
しかし、これで

自作のログイン画面からログインした場合は、自作のダッシュボード画面へ遷移する

というような処理を実装してみるのも良いかと思いました。

でわでわ。。。

WordPress Plugin NewStatPress ～アクセス解析プラグインAPIを使う～

NewStatPressというWPプラグインを使用しています。
しかし、あまりその恩恵には預かっていません。。。
ちょいと(心に)余裕ができたので調べてみました。

NewStatPress API

アクセス解析を行おうとしたときには「統計や数学的な知識」が求められると思いますが、そのまえに、データを取得できないと学習も何もないのでデータの取得を先にやってしまおうと思います。
詳細に関しては、下の手順でページをご覧ください。

自分のダッシュボードにアクセス。
左のサイドバーNewStatPressをクリック
NewStatPress Settingsをクリック
APIタブをクリック
「Full documentation (PDF)」をクリック

そうするとドキュメントのPDFがみれるのでそれを参照して、APIの使い方を理解します。

APIというのは？

早い話が、リクエストを飛ばすと情報が手に入るというとこです。

[site]/wp-content/plugins/newstatpress/includes/api/external.phpにリクエストを飛ばし、レスポンスを取得する

こういうことです。
パラメータは、以下の通り

・VAR the variable for the query (like 'Version')
・ KEY the MD5 of date at minute level plus the key you enter into option
(e.g in PHP: md5(gmdate('m-d-y H i').key) )
・ PAR the parameter associated with the VAR
・ TYP the type of result: JSON (default) of HTML

あとは実際に実行してみるのが一番ですが、「どーやるか？」という部分に関して
PHPなどのプログラムを使用してPOSTリクエストを送信するひつようがあるようで。。。

実装に関してはまたの機会に(気が向けば)やろうと思います。

でわでわ。。。