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リクエストを送信するひつようがあるようで。。。

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

でわでわ。。。

プラグイン画面の中身

現状確認

プラグイン画面の作成

仕様

ポイント

ユースケース

実装に関して

関連ページ

プラグインの作成方法

手順

1.プラグインの名前

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

プラグインのヘッダー

そのほか

実装に関して

プラグイン実装

まとめ

関連ページ

WordPressカスタム

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

仕様

設計

集計用のDB作成

集計結果表示

まとめ

関連ページ

WPのログイン処理

コードを眺める

wp_dashboard_setup()

wp_enqueue_script()

ログイン処理はどこに？

admin.phpを眺める

結論

関連ページ

NewStatPress API

APIというのは？

関連ページ