WordPressで独自の管理画面を作成してみる

こんちは、コバヤシです。

普段はWordPressをガリガリ作成することはないのですが、とある案件でプラグインを作成して 独自の管理画面を作る機会があったので、簡単に手順をまとめてみたいと思います。

プラグインのベースを作成する

wp-content/pluginsディレクトリ内に、プラグインのディレクトリを作成して その中に同名のphpファイルを作成します。

wp-content/plugins/arms-test/arms-test.php

作成したPHPファイルの先頭に以下のように、プラグインの情報を記述します。
またABSPATHが定義されているかチェックすることで直接のアクセスを禁止します。

<?php
/*
  Plugin Name: Arms Test
  Plugin URI:
  Description: テスト
  Version: 1.0
  Author: Kobayashi
  Author URI: https://arms-soft.co.jp
 */

if (!defined('ABSPATH') ) {
    exit;
}

?>

この状態で、WordPressのプラグインページに行くと、作成しているプラグインが現れていると思いますので「有効」にします。

メニューに表示させる

「add_menu_page」「add_submenu_page」を使用してメニューに登録します。

<?php
class ArmsTest
{
    static function init()
    {
        return new self();
    }

    function __construct()
    {
        add_action('admin_menu', [$this, 'setMenus']);
    }
    
    function setMenus() {
        add_menu_page('テスト', 'テスト', 'manage_options', 'arms-test', null, 'dashicons-list-view',  50);

        add_submenu_page('arms-test', '登録', '登録', 'manage_options', 'arms-test', [$this, 'add']);
        add_submenu_page('arms-test', '設定', '設定', 'manage_options', 'arms-test-config', [$this, 'edit']);
    }
    
    function add() {
        
    }
}

add_action('init', 'ArmsTest::init');

そのまま、サブメニューを追加すると以下のように、親のメニュー名までサブメニューに表示されますが、

親メニューのcallback関数の部分をnullにして、 サブメニューのスラッグを親メニューと同じにすることで以下のように親メニュー名を抜いた表示に出来ます。

表示部分を作成する

echo で記述していくのは面倒なので、別ファイルにして読み込みます。

wp-content/plugins/arms-test/views/arms-test-add.php

<div class="wrap">
    <h1>登録</h1>
    <?php if(get_transient('arms-test')): ?>
    <p><?php echo get_transient('arms-test'); ?></p>
    <?php endif; ?>
    <form method="post" action="<?php echo menu_page_url('arms-test', false) . '&action=save'; ?>">
        <?php wp_nonce_field('arms-test-save', 'name_of_nonce_field'); ?>
        <input type="text" name="hoge" value="">
        <button class="button button-primary">登録</button>
    </form>
</div>

<?php

    function add() {
        include_once 'views/arms-test-add.php';
        exit;
    }

登録部分を作成する

登録処理を作成していきます。 admin_initのフックに保存処理の登録を行う形です。

<?php
    function __construct()
    {
        add_action('admin_menu', [$this, 'setMenus']);
        add_action('admin_init', [$this, 'save']); // 追加
    }

    function add() {
        include_once 'views/arms-test-add.php';
        exit;
    }

    function save() {
        // 保存処理
        if (!empty($_GET['action']) && $_GET['action'] == 'save') {

            // nonceのチェック
            if (!wp_verify_nonce($_POST['name_of_nonce_field'], 'arms-test-save')) {
                exit;
            }
  
            // 何らかの保存処理をする  
  
  
            // メッセージ表示設定
            set_transient('arms-test', '登録しました', 5);
            
            // リダイレクト
            wp_redirect(menu_page_url('arms-test', false));
            exit;
        }
    }

nonceのチェックを行ってOKの時のみ保存処理を行います。
処理が完了したらset_transientでメッセージ保存後、wp_redirectで登録画面にリダイレクトをします。
リダイレクト先の登録画面ではget_transientで値があるかチェックしメッセージがあれば表示しています。

まとめ

調べならが色々でやってみたので、WordPressのお作法に則っているかは分かりませんが比較的簡単に作成できました。 改善しつつプラグインの作成をしていきたいと思います。