WordPressのプラグインを作ろう

自分と誰かのためのメモシリーズーその1

  • ホーム
  • サンプルページ
  • ユーザー登録フォーム
  • 決済用サンプ~商品ページ
  • メニュー

  • サイドバー

  • 前へ

  • 次へ

  • 検索

  •   RSS 
  •   Feedly 
  1. ホーム>
  2. 独自ログイン・ユーザー管理プラグイン

独自ログイン・ユーザー管理プラグイン~(3)フロントエンドにユーザー登録フォームを追加~その1~ショートコード編

2020年1月15日2020年2月4日

  •  Twitter
  •  Facebook
  •  Pin it
  •  LinkedIn
  •  Pocket
  •  Copy

フロントエンドにユーザー登録フォームを設置してそこからユーザー登録をしてもらうのだけれど、まずは極力シンプルなステップで進めたいと思います。

登録してもらうデータはWordPressのユーザーと互換性を持たせたいので、WordPressのユーザー登録ページのフォームをそのまま利用し、CSSについてもWordPressがデフォルト準備しているフォームやらボタン用のCSSを呼び出して使用します。(参考:管理画面各ページごとに違うJavaScript,CSSを読み込ませたい | WordPressのプラグインを作ろう)

ショートコードは、独自のショートコードを作りたい | WordPressのプラグインを作ろうを一読して独自ショートコードの使い方について理解してください。使用するショートコード用のタグは

[wpmop_signupform_shortcode placehoder_username="例:hogehoge@hogehoge.com"]

とします。

ファイル構造

  • wp-content(dir)
    • plugins(dir)
      • my-original-plugin(dir)
        • my-original-plugin.php
        • script(dir)
          • form-ajax.js
        • class(dir)
          • class.wpmop.php・・・ここにショートコードが用いられた時のコードを追記します。
          • class.wpmop-script.php
          • class.wpmop-payment.php
          • payment(dir)
            • class.wpmop-payment-sbps.php

class.wpmop.phpファイル

<?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;
	}
//↑↑↑↑↑新規追加ここまで
}

投稿ページに

と入力し保存すると、

ユーザー登録フォーム | WordPressのプラグインを作ろう

このようにフォームが表示されるようになります。

独自ログイン・ユーザー管理プラグイン

Posted by webmaster


よろしければシェアお願いします

  •  Twitter
  •  Facebook
  •  Pin it
  •  LinkedIn
  •  Pocket
  •  Copy
【閑話休題コラム】プラグインで使うコードをどのようにまとめるか
Next
独自ログイン・ユーザー管理プラグイン~(2)管理画面に独自ユーザーデータを表示
Prev

関連記事

No Image

独自ログイン・ユーザー管理プラグイン~(1)データベースにユーザーテーブルを追加

これから、独自ログイン・ユーザー管理用のプラグインを作成していきたいと思います。 ...

No Image

独自ログイン・ユーザー管理プラグイン~(2)管理画面に独自ユーザーデータを表示

これから作業を色々進めるうえで、管理画面に独自に追加したテーブル内容を見る事がで ...

ディスカッション

コメント一覧

まだ、コメントがありません

コメントをどうぞ コメントをキャンセル

メールアドレスが公開されることはありません。* が付いている欄は必須項目です

この記事のトラックバックURL

新着記事

No Image

【WordPressの動き方シリーズ】(5)メインクエリがテンプレートでどのように働いているか

【WordPressの動き方シリーズ】(4)メインクエリができるまで | Wor ...

No Image

【WordPressの動き方シリーズ】(4)メインクエリができるまで

ここからは一歩進んで、メインクエリが出来上がるまでの流れを見ていきたいと思います ...

No Image

【WordPressの動き方シリーズ】(3)オブジェクト・クラス・インスタンス

メインクエリ・サブクエリの詳細を始める前に、オブジェクト・クラス・インスタンスに ...

No Image

【WordPressの動き方シリーズ】(2)メインクエリとサブクエリの概要

メインクエリの概要 【WordPressの動き方シリーズ】(1)WordPres ...

No Image

【WordPressの動き方シリーズ】(1)WordPressで作ったサイトへのアクセスから出力までの概要

WordPressが各ページのデータを出力するまでの流れは大まかにこのような順番 ...

カテゴリー

  • WordPressの動き方
  • 基本
  • 決済用プラグイン
  • 独自ログイン・ユーザー管理プラグイン
  • 雑談

目次

  • 1. ファイル構造
    • 1.1. class.wpmop.phpファイル

Copyright © 2022 WordPressのプラグインを作ろう All Rights Reserved.

WordPress Luxeritas Theme is provided by "Thought is free".

PAGE TOP