今回はchart.jsを使って、管理画面でチャート表示をするようなプラグインを作成します。

全て作成すると時間がかかってしまうので、実際のデータをせずモックを利用して行います。

こんなのを作ってみます

別のデータを表示するをクリックすると以下のようになります

開発環境の構築

環境構築は個人的なメモみたいになっていますがやっていきます。

プラグイン開発の環境構築を行います。今回はjsファイルを利用するのでバンドルするためにwebpackをインストールします。また、ついでにbabelを使います。

docker-compose.yaml

version: '3.7'
services:
  db:
    image: mysql:8.0.19
    command: '--default-authentication-plugin=mysql_native_password'
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      - MYSQL_ROOT_PASSWORD=somewordpress
      - MYSQL_DATABASE=wordpress
      - MYSQL_USER=wordpress
      - MYSQL_PASSWORD=wordpress
    ports:
      - 3306:3306
    expose:
      - 3306
      - 33060
  wordpress:
    image: wordpress:latest
    ports:
      - 80:80
    restart: always
    environment:
      - WORDPRESS_DB_HOST=db
      - WORDPRESS_DB_USER=wordpress
      - WORDPRESS_DB_PASSWORD=wordpress
      - WORDPRESS_DB_NAME=wordpress
    volumes:
      - ./html:/var/www/html
  phpmyadmin:
    depends_on:
      - db
    image: phpmyadmin/phpmyadmin
    ports:
      - "8081:80"
volumes:
  db_data:

wp-cliは使わずnodeでの環境を整えます。

node_modulesは大きいのでwp-contentなどと同じフォルダにて初期化します。

npm init -y

webpackをインストールします

npm install --save-dev webpack
npm install --save-dev webpack-cli

package.jsonの依存モジュールが追加されます

"devDependencies": {
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  }

ちなみにinstallは一気に行うこともできます

npm init -y
npm install webpack webpack-cli --save-dev

webpack.config.jsを手動で作成します

const path = require("path");

module.exports = {
    mode: 'production',
    entry: './plugins/myplugin/js/index.js', 
    output: {
        path: path.resolve(__dirname , 'plugins/myplugin/dist'),
        filename: 'bundle.js'
    }
};

これはmypluginというフォルダにてプラグインを作成する想定です。そこのjsフォルダにあるindex.jsを起点に、distフォルダにbundle.jsという名前でバンドルします。

npx webpack

babelのインストール

以下のコマンドで必要なものをインストールします。

babelローダーからbabelのコアを呼出し、ついでにプラグインのプリセットをインストールします。

npm install babel-loader @babel/core @babel/preset-env --save-dev

次にwebpackにて設定を行います。

対象となるファイルはjsのみで、node_modulesフォルダのものはbableの対象外にします。

const path = require("path");

module.exports = {
    mode: 'production',
    entry: './plugins/myplugin/js/index.js', 
    devtool: 'none',
    output: {
        path: path.resolve(__dirname , 'plugins/myplugin/dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    }
};

これで準備OKです

chart.jsのインストール

以下のコマンドでインストールします

npm install chart.js

node_modulesフォルダにchart.jsが作成されます。

プラグインの作成

ソースコードはgithubにあげてあります。

ようやくプラグインを作成していきます

今回作成するプラグインの作成は以下のような流れになります。

管理画面にチャートを追加する
チャート画面では、chart.jsを利用する
利用するデータはモックを流し込む

そしてchart.jsはwebpackを利用して一緒にバンドルしてしまいます。

プラグインの定義は以下のようになっています

<?php
/**
 * Plugin Name: MyChart
 */

# ワードプレスのセットアップができていない場合に中止
defined('ABSPATH') || exit;

# プラグインパスを定数定義しておく
define('MY_CHART_DIR', plugin_dir_path(__FILE__));

final class MyChart {

    function __construct() {
        # セットアップを行います
        add_action('plugins_loaded', array($this, 'plugin_setup'), 10);
    }

    public function plugin_setup()
    {
        if (is_admin()) {
            #　ファイルの読み込みを行う
            require_once MY_CHART_DIR . 'Menu.php';
            require_once MY_CHART_DIR . 'view/GraphView.php';
            require_once MY_CHART_DIR . 'AdminAssets.php';
            require_once MY_CHART_DIR . 'DataStore.php';
        }
        
    }

    function activation() {

    }

    function deactivation() {

    }

}

new MyChart();

プラグインのセットアップで必要なのはファイルの読み込みくらいです。

管理画面メニューに追加するためのファイル、グラフのViewを管理するファイル、jsを読み込む設定をするファイル、データを取得するファイルです。

メニューの追加では、よくviewに関する記載をクラスの関数に押し込むことがありますが、基本的には別クラスにするほうが良いです。

なんで良いかというと、大量のメニューを追加する必要がある場合は、設定系の配列を用意して一括してメニューに登録させたいからです。（今回はやってないですが）

その場合は設定系の配列に、subメニューの登録なのか、ファイル名は何か？などの情報を格納しておき、全てviewメソッドを指定するなどの対応をすれば済むからです。

class Menu{

    public function __construct() {
        # 管理ページのチャート画面にjsの利用設定を行います
        add_action('admin_menu', array($this, 'wp_admin_menu'));
    }

    /**
     * $hookで管理ページの呼び出し元管理ページのフック名
     * 
     * 
     */
    public function wp_admin_menu() {

        add_menu_page(
            'グラフ',
            'グラフ',
            'manage_options',
            'graph',
            array('my_plugin\GraphView','view')
        );
    }

}

jsファイルの読み込みを行います。

チャートに表示するためのデータは適当に用意しました。必要でああればDBから取得するためのクラスなどを作成して、取得すれば良いかと思います。

class AdminAssets{

    public function __construct()
    {
        # 管理ページのチャート画面にjsの利用設定を行います
        add_action('admin_enqueue_scripts', array($this, 'admin_scripts'));
    }

    /**
     * $hookで管理ページの呼び出し元管理ページのフック名
     * 
     * 
     */
    public function admin_scripts($hook)
    {

        if($hook != 'toplevel_page_graph'){
            return;
        }
        # $in_footerをtrueにするとjsがfooterにて読み込まれます。
        wp_enqueue_script('my_plugin_chart', plugin_dir_url(__FILE__) . 'dist/bundle.js', false, false, true);
        wp_localize_script('my_plugin_chart', 'chart_data', self::getChartData());   
    }

    /**
     * JSに渡す初期データ
     * 
     */
    public static function getChartData()
    {
        return array(            
            'label' => '当社店舗の販売数',
            'labels' => array('渋谷店','原宿店','新宿店','町田店','川崎店'),
            'data' => array(80,120,100,70,90),
            'backgroundColor' => array(
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
            ),
            'borderColor' => array(
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
            ),
        );
    }

}

View用の設定ファイル

フォームの表示箇所だけ別のファイルにしました。ここは良い方法を考える必要がある箇所です。

一旦は動作してるのですが、なんとも気持ちの悪い記載になってしまったので、別のプラグインとか見て勉強します。

class GraphView{

    public function __construct()
    {
        
    }

    public static function view()
    {
        # 外部定義ファイルの読み込み
        include MY_CHART_DIR . 'view/GraphFormView.php';

        ?>
            <h1>街のまんまる屋さん</h1>
            <div style="height:500px;">
                <canvas id="myChart"></canvas>
            </div>
        <?php
    }
    
}

外部定義したフォーム表示用のファイル

別のデータも別の取得用クラスに全て任せています。ここも必要であればDBから取得するなどのクラスを実装するという感じです。

そうなった場合には処理の共通化もできると思います。ここでwp_localize_scriptを使っているのが非常に気持ち悪いのですが、ちょっとベストな方法が思いつかなかったので他のプラグインを見て勉強します。。

<?php

namespace my_plugin;

# フォームの処理を行います。
if (!current_user_can('manage_options'))  {
    wp_die( __('不正なアクセスです')    );
}

if (isset($_POST['change_graph']) && check_admin_referer('graph_form_csrf')) {
    getGraph();
}

function getGraph()
{
    # データを取得する
    $data = DataStore::getData();
    wp_localize_script('my_plugin_chart', 'chart_data', $data);
}


echo '<form method="post">';
    wp_nonce_field('graph_form_csrf');
    echo '<input type="hidden" value="true" name="change_graph" />';
    submit_button('別のデータを表示する');
echo '</form>';

?>

jsファイル

処理を一つのファイルにまとめてしまったのですが、重要なのはchart.jsをインポートしているところです。

wordpressでは色々なファイルを別ファイルとして読込させることが多いですが、webpackを使っているので一つのファイルにバンドルできます。

import Chart from 'chart.js/auto';
import { getRelativePosition } from 'chart.js/helpers';

const ctx = document.getElementById('myChart').getContext('2d');
ctx.canvas.height = "100%";

function vaildData(){
    if(typeof chart_data === 'undefined'){
        return new Array();
    }
}


function getData(){
    vaildData();
    return chart_data.data;
}

function getLabels(){
    vaildData();
    return chart_data.labels; 
}

function getBackgroundColor(){
    vaildData();
    return chart_data.backgroundColor;
}

function getBorderColor(){
    vaildData();
    return chart_data.borderColor;
}

function getLabel(){
    vaildData();
    return chart_data.label; 
}

const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: getLabels(),
        datasets: [{
            label: getLabel(),
            data: getData(),
            backgroundColor: getBackgroundColor(),
            borderColor: getBorderColor(),
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        animation: {
            duration: 1500,
        },
    }
});

これで管理画面にグラフを利用したページが作成できます。

wordpressでjsと連携したプラグインを作る