独自ログイン・ユーザー管理プラグイン~(3)フロントエンドにユーザー登録フォームを追加~その1~ショートコード編
フロントエンドにユーザー登録フォームを設置してそこからユーザー登録をしてもらうのだけれど、まずは極力シンプルなステップで進めたいと思います。
登録してもらうデータはWordPressのユーザーと互換性を持たせたいので、WordPressのユーザー登録ページのフォームをそのまま利用し、CSSについてもWordPressがデフォルト準備しているフォームやらボタン用のCSSを呼び出して使用します。(参考:管理画面各ページごとに違うJavaScript,CSSを読み込ませたい | WordPressのプラグインを作ろう)
ショートコードは、独自のショートコードを作りたい | WordPressのプラグインを作ろうを一読して独自ショートコードの使い方について理解してください。使用するショートコード用のタグは
[wpmop_signupform_shortcode placehoder_username="例:hogehoge@hogehoge.com"]
とします。
ファイル構造
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のプラグインを作ろう
このようにフォームが表示されるようになります。
ディスカッション
コメント一覧
まだ、コメントがありません