独自ログイン・ユーザー管理プラグイン～（３）フロントエンドにユーザー登録フォームを追加～その１～ショートコード編

<?php
//class.wpmop-scripts.phpファイルを読み込ませる
include_once( WPMOP_CLASS_PATH . 'class.wpmop-scripts.php' );

//class.wpmop-payment.phpファイルを読み込ませる
include_once( WPMOP_CLASS_PATH . 'class.wpmop-payment.php' );

class WPMOP {

    //フロントページで読み込ませるスクリプトを登録させる
    add_action( 'wp_enqueue_scripts', 'WPMOPSCRIPTS::front_page_scripts' );
    //ajax用の関数を設定 フォームでname="action"の値をpayment_ajaxにする
    add_action( 'wp_ajax_nopriv_payment_ajax', array( &$this, 'ajax_payment' ) );
    add_action( 'wp_ajax_payment_ajax', array( &$this, 'ajax_payment' ) );

//↓↓↓↓↓新規追加ここから
    // ショートコード
		add_shortcode( 'wpmop_signupform_shortcode', array( &$this, 'wpmop_signupform_shortcode' ) );
//↑↑↑↑↑新規追加ここまで
    public function __construct()
    {
        add_action( 'admin_menu', array( &$this, 'my_admin_page_settings' ) );
    }
    
    public function my_admin_page_settings()
    {
        //管理画面にメニューを追加
        add_menu_page(
            'My Original Pluginメインページ',
            'My Original Plugin',
            'manage_options',
            'wpmop',
            array( &$this, 'wpmop_mainpage' ),
            '',
            99
        );

        //追加した「My Original Plugin」メニューにサブメニューを追加
        add_submenu_page(
            'wpmop',
            'ユーザー管理',
            'ユーザー管理',
            'manage_options',
            'wpmop-subpage-userlist',
            array( &$this, 'wpmop_subpage_userlist' )
        );
    }

    //追加した管理メニューページのコンテンツ
    public function wpmop_mainpage() {
        ?>
<div class="PluginContainer ">
    <h2 class="Plugin__head">My Original Pluginメインページ</h2>    
</div>
<?php
    }    

    //追加した管理メニューサブページのコンテンツ
    public function wpmop_subpage_userlist() {

        global $wpdb;
        //独自ユーザーテーブルからデータを取得
        $query = "
        SELECT
            *
        FROM
            " . WPMOP_USERTABLE;
        //後でカラム名をテーブルヘッダーとして利用したいのでデフォルトのオブジェクト型ではなくて、連想配列型で取得する。
        $results = $wpdb->get_results($query, ARRAY_A);

        //ユーザーテーブルを、ヘッダーとコンテンツのhtmlに分けて保存し後でまとめる。
        $user_table_content = "";
        $user_table_head = "";
        $loop = 0;
        if ($results) {
            foreach ($results as $row) {
                $user_table_content .= "<tr>";
                foreach ($row as $key => $value) {
                    //取得結果の最初のループの時のみ配列のキーをヘッダーとして取得しておく。
                    if (0 === $loop) $user_table_head .= "<th>" . $key . "</th>";
                    $user_table_content .= "<td>" . $value . "</td>";
                }
                $loop++;
                $user_table_content .= "</tr>";
            }
        }
        $user_table = "<table class='wpmop_user_table'><tr>" . $user_table_head . "</tr>" . $user_table_content . "</table>";

        //CSSは適当なものを挿入しておく。
        echo $html = <<<EOI
<div class="PluginContainer ">
    <h2 class="Plugin__head">ユーザー管理</h2>
{$user_table}
<style>.wpmop_user_table th, .wpmop_user_table td { padding: 5px;border: 1px solid;}</style>
</div>
EOI;
    }
    
    public function ajax_payment()
    {
        $payment_result = new WPMOP_Payment();
    }
}

//↓↓↓↓↓新規追加ここから
    public function wpmop_signupform_shortcode( $atts, $content = null, $tag = 'wpmop_signupform_shortcode' ) {
        
        extract( shortcode_atts( array( 'placeholder_username' => '' ), $atts ) );
        
        /*
        WordPressが持つ基本的なCSSにはいくつかあり、
        wp-admin/css/以下のディレクトリには、
        common.min.css
        forms.min.css
        admin-menu.min.css
        dashboard.min.css
        list-tables.min.css
        edit.min.css
        revisions.min.css
        media.min.css
        themes.min.css
        about.min.css
        nav-menus.min.css
        widgets.min.css
        site-icon.min.css
        l10n.min.css
        site-health.min.css

        wp-includes/css/の下には、
        buttons.min.css

        などがある
        */
        wp_enqueue_style( 'forms-min-css',  admin_url('css/forms.min.css') );
        wp_enqueue_style( 'login-min-css',  admin_url('css/login.min.css') );
        wp_enqueue_style( 'buttons-min-css',  includes_url('css/buttons.min.css') );
		
        $html = <<<EOI
    <div class="login wp-core-ui">
        <div id="login">
            <form name="registerform" id="registerform" action="./?action=register" method="post">
                <p>
                    <label for="user_login">ユーザー名</label>
                    <input type="text" name="user_login" placeholder="{$placeholder_username}" id="user_login" class="input" value="" autocapitalize="off">
                </p>
                <p>
                    <label for="user_email">メールアドレス</label>
                    <input type="email" name="user_email" id="user_email" class="input" value="">
                </p>
                <p id="reg_passmail">登録確認のメールが送信されます。</p>
                <input type="hidden" name="redirect_to" value=""><br class="clear">
                <p class="submit">
                    <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="登録">
                    <span class="acf-spinner"></span>
                </p>
            </form>
        </div>
    </div>
    <style>
    body {
        height:unset !important;
    }
    #login {
        width: 320px;
        padding: 8% 0 0;
        margin: auto;
    }
    #login .input {
        font-size:12px;
    }
    </style>
EOI;
		return $html;
	}
//↑↑↑↑↑新規追加ここまで
}