问题描述
如何在我博客的前端显示 WordPress 用户注册表单 (出现在 「www.mywebsite.com/wp-register.php」 页面中的表单)?
我已经定制了注册表。但是不知道如何在前端页面中调用该表单。任何支持都将是非常有帮助的。
提前致谢。 🙂
最佳解决方案
该过程涉及两个步骤:
- 显示前端形式
- 保存提交的数据
有三种不同的方法来到我的头脑来展示前端:
- 使用 built-in 注册表单,编辑样式等使其更多”frontend like”
- 使用 WordPress 页面/帖子,并使用短代码显示表单
- 使用不与任何页面/帖子相关联的专用模板,但由特定网址调用
对于这个答案,我会用后者。原因是:
- 使用 built-in 注册表单可以是一个好主意,深度定制可以很难使用 built-in 形式,如果还想自定义表单字段,疼痛增加
- 使用一个 WordPress 页面与一个短代码组合,不是那么可靠,而且我认为,shorcodes 不应该用于功能,只是为了格式化等
1:构建 URL
我们所有人都知道,WordPress 网站的默认注册表通常是垃圾邮件发送者的目标。使用自定义网址是解决这个问题的一个帮助。另外我还要使用一个变量 url,即注册表单不应该总是相同的,这样可以使垃圾邮件发送者的生活变得更加困难。诀窍是使用 nonce 在 URL 中完成的:
/**
* Generate dynamic registration url
*/
function custom_registration_url() {
$nonce = urlencode( wp_create_nonce( 'registration_url' ) );
return home_url( $nonce );
}
/**
* Generate dynamic registration link
*/
function custom_registration_link() {
$format = '<a href="%s">%s</a>';
printf(
$format,
custom_registration_url(), __( 'Register', 'custom_reg_form' )
);
}
使用这个功能很容易在模板中显示注册表单的链接,即使它是动态的。
2:识别 Custom_RegCustom_Reg
类的 URL,第一个存根
现在我们需要识别 url 。对于倾诉我会开始写一个类,这将在后面的答案中完成:
<?php
// don't save, just a stub
namespace Custom_Reg;
class Custom_Reg {
function checkUrl() {
$url_part = $this->getUrl();
$nonce = urlencode( wp_create_nonce( 'registration_url' ) );
if ( ( $url_part === $nonce ) ) {
// do nothing if registration is not allowed or user logged
if ( is_user_logged_in() || ! get_option('users_can_register') ) {
wp_safe_redirect( home_url() );
exit();
}
return TRUE;
}
}
protected function getUrl() {
$home_path = trim( parse_url( home_url(), PHP_URL_PATH ), '/' );
$relative = trim(str_replace($home_path, '', esc_url(add_query_arg(array()))), '/');
$parts = explode( '/', $relative );
if ( ! empty( $parts ) && ! isset( $parts[1] ) ) {
return $parts[0];
}
}
}
该函数查看 home_url()
后的 url 的第一部分,如果它与我们的随机数匹配,则返回 TRUE 。此功能将用于检查我们的请求并执行所需的操作以显示我们的表单。
3:Custom_RegForm
类
我现在将编写一个类,它将负责生成表单标记。我还将使用它来存储应该用于显示表单的模板文件路径的属性。
<?php
// file: Form.php
namespace Custom_Reg;
class Form {
protected $fields;
protected $verb = 'POST';
protected $template;
protected $form;
public function __construct() {
$this->fields = new ArrayIterator();
}
public function create() {
do_action( 'custom_reg_form_create', $this );
$form = $this->open();
$it = $this->getFields();
$it->rewind();
while( $it->valid() ) {
$field = $it->current();
if ( ! $field instanceof FieldInterface ) {
throw new DomainException( "Invalid field" );
}
$form .= $field->create() . PHP_EOL;
$it->next();
}
do_action( 'custom_reg_form_after_fields', $this );
$form .= $this->close();
$this->form = $form;
add_action( 'custom_registration_form', array( $this, 'output' ), 0 );
}
public function output() {
unset( $GLOBALS['wp_filters']['custom_registration_form'] );
if ( ! empty( $this->form ) ) {
echo $this->form;
}
}
public function getTemplate() {
return $this->template;
}
public function setTemplate( $template ) {
if ( ! is_string( $template ) ) {
throw new InvalidArgumentException( "Invalid template" );
}
$this->template = $template;
}
public function addField( FieldInterface $field ) {
$hook = 'custom_reg_form_create';
if ( did_action( $hook ) && current_filter() !== $hook ) {
throw new BadMethodCallException( "Add fields before {$hook} is fired" );
}
$this->getFields()->append( $field );
}
public function getFields() {
return $this->fields;
}
public function getVerb() {
return $this->verb;
}
public function setVerb( $verb ) {
if ( ! is_string( $verb) ) {
throw new InvalidArgumentException( "Invalid verb" );
}
$verb = strtoupper($verb);
if ( in_array($verb, array( 'GET', 'POST' ) ) ) $this->verb = $verb;
}
protected function open() {
$out = sprintf( '<form id="custom_reg_form" method="%s">', $this->verb ) . PHP_EOL;
$nonce = '<input type="hidden" name="_n" value="%s" />';
$out .= sprintf( $nonce, wp_create_nonce( 'custom_reg_form_nonce' ) ) . PHP_EOL;
$identity = '<input type="hidden" name="custom_reg_form" value="%s" />';
$out .= sprintf( $identity, __CLASS__ ) . PHP_EOL;
return $out;
}
protected function close() {
$submit = __('Register', 'custom_reg_form');
$out = sprintf( '<input type="submit" value="%s" />', $submit );
$out .= '</form>';
return $out;
}
}
类生成表单标记循环所有添加的字段,每个字段都调用 create
方法。每个字段必须是 Custom_RegFieldInterface
的实例。添加一个附加的隐藏字段用于随机验证。表单方法默认为’POST’,但可以使用 setVerb
方法设置为’GET’ 。创建后,标记保存在 output()
方法回显的 $form
对象属性中,挂接到'custom_registration_form'
钩子中:在表单模板中,只需调用 do_action( 'custom_registration_form' )
即可输出表单。
4:默认模板
正如我所说,表单的模板可以很容易地覆盖,但是我们需要一个基本的模板作为后备。我会在这里写一个非常粗略的模板,比一个真正的模板更多的概念证明。
<?php
// file: default_form_template.php
get_header();
global $custom_reg_form_done, $custom_reg_form_error;
if ( isset( $custom_reg_form_done ) && $custom_reg_form_done ) {
echo '<p class="success">';
_e(
'Thank you, your registration was submitted, check your email.',
'custom_reg_form'
);
echo '</p>';
} else {
if ( $custom_reg_form_error ) {
echo '<p class="error">' . $custom_reg_form_error . '</p>';
}
do_action( 'custom_registration_form' );
}
get_footer();
5:Custom_RegFieldInterface
接口
每个字段应该是一个实现以下接口的对象
<?php
// file: FieldInterface.php
namespace Custom_Reg;
interface FieldInterface {
/**
* Return the field id, used to name the request value and for the 'name' param of
* html input field
*/
public function getId();
/**
* Return the filter constant that must be used with
* filter_input so get the value from request
*/
public function getFilter();
/**
* Return true if the used value passed as argument should be accepted, false if not
*/
public function isValid( $value = NULL );
/**
* Return true if field is required, false if not
*/
public function isRequired();
/**
* Return the field input markup. The 'name' param must be output
* according to getId()
*/
public function create( $value = '');
}
我认为评论解释了实现这个界面应该做什么类。
6:添加一些字段
现在我们需要一些领域。我们可以创建一个名为’fields.php’ 的文件,我们定义了这些字段类:
<?php
// file: fields.php
namespace Custom_Reg;
abstract class BaseField implements FieldInterface {
protected function getType() {
return isset( $this->type ) ? $this->type : 'text';
}
protected function getClass() {
$type = $this->getType();
if ( ! empty($type) ) return "{$type}-field";
}
public function getFilter() {
return FILTER_SANITIZE_STRING;
}
public function isRequired() {
return isset( $this->required ) ? $this->required : FALSE;
}
public function isValid( $value = NULL ) {
if ( $this->isRequired() ) {
return $value != '';
}
return TRUE;
}
public function create( $value = '' ) {
$label = '<p><label>' . $this->getLabel() . '</label>';
$format = '<input type="%s" name="%s" value="%s" class="%s"%s /></p>';
$required = $this->isRequired() ? ' required' : '';
return $label . sprintf(
$format,
$this->getType(), $this->getId(), $value, $this->getClass(), $required
);
}
abstract function getLabel();
}
class FullName extends BaseField {
protected $required = TRUE;
public function getID() {
return 'fullname';
}
public function getLabel() {
return __( 'Full Name', 'custom_reg_form' );
}
}
class Login extends BaseField {
protected $required = TRUE;
public function getID() {
return 'login';
}
public function getLabel() {
return __( 'Username', 'custom_reg_form' );
}
}
class Email extends BaseField {
protected $type = 'email';
public function getID() {
return 'email';
}
public function getLabel() {
return __( 'Email', 'custom_reg_form' );
}
public function isValid( $value = NULL ) {
return ! empty( $value ) && filter_var( $value, FILTER_VALIDATE_EMAIL );
}
}
class Country extends BaseField {
protected $required = FALSE;
public function getID() {
return 'country';
}
public function getLabel() {
return __( 'Country', 'custom_reg_form' );
}
}
我使用基类来定义默认接口实现,但是可以添加非常自定义的字段直接实现接口或扩展基类并覆盖一些方法。
在这一点上,我们有一切显示窗体,现在我们需要一些验证和保存字段的东西。
7:Custom_RegSaver
类
<?php
// file: Saver.php
namespace Custom_Reg;
class Saver {
protected $fields;
protected $user = array( 'user_login' => NULL, 'user_email' => NULL );
protected $meta = array();
protected $error;
public function setFields( ArrayIterator $fields ) {
$this->fields = $fields;
}
/**
* validate all the fields
*/
public function validate() {
// if registration is not allowed return false
if ( ! get_option('users_can_register') ) return FALSE;
// if no fields are setted return FALSE
if ( ! $this->getFields() instanceof ArrayIterator ) return FALSE;
// first check nonce
$nonce = $this->getValue( '_n' );
if ( $nonce !== wp_create_nonce( 'custom_reg_form_nonce' ) ) return FALSE;
// then check all fields
$it = $this->getFields();
while( $it->valid() ) {
$field = $it->current();
$key = $field->getID();
if ( ! $field instanceof FieldInterface ) {
throw new DomainException( "Invalid field" );
}
$value = $this->getValue( $key, $field->getFilter() );
if ( $field->isRequired() && empty($value) ) {
$this->error = sprintf( __('%s is required', 'custom_reg_form' ), $key );
return FALSE;
}
if ( ! $field->isValid( $value ) ) {
$this->error = sprintf( __('%s is not valid', 'custom_reg_form' ), $key );
return FALSE;
}
if ( in_array( "user_{$key}", array_keys($this->user) ) ) {
$this->user["user_{$key}"] = $value;
} else {
$this->meta[$key] = $value;
}
$it->next();
}
return TRUE;
}
/**
* Save the user using core register_new_user that handle username and email check
* and also sending email to new user
* in addition save all other custom data in user meta
*
* @see register_new_user()
*/
public function save() {
// if registration is not allowed return false
if ( ! get_option('users_can_register') ) return FALSE;
// check mandatory fields
if ( ! isset($this->user['user_login']) || ! isset($this->user['user_email']) ) {
return false;
}
$user = register_new_user( $this->user['user_login'], $this->user['user_email'] );
if ( is_numeric($user) ) {
if ( ! update_user_meta( $user, 'custom_data', $this->meta ) ) {
wp_delete_user($user);
return FALSE;
}
return TRUE;
} elseif ( is_wp_error( $user ) ) {
$this->error = $user->get_error_message();
}
return FALSE;
}
public function getValue( $var, $filter = FILTER_SANITIZE_STRING ) {
if ( ! is_string($var) ) {
throw new InvalidArgumentException( "Invalid value" );
}
$method = strtoupper( filter_input( INPUT_SERVER, 'REQUEST_METHOD' ) );
$type = $method === 'GET' ? INPUT_GET : INPUT_POST;
$val = filter_input( $type, $var, $filter );
return $val;
}
public function getFields() {
return $this->fields;
}
public function getErrorMessage() {
return $this->error;
}
}
该类有两个主要方法,一个 (validate
) 循环字段,验证它们并将好的数据保存到数组中,第二个 (save
) 保存数据库中的所有数据,并通过电子邮件将密码发送给新用户。
8:使用定义的类:完成 Custom_Reg
类
现在我们可以在 Custom_Reg
类上再次工作,添加对象定义的”glues” 的方法,使它们工作
<?php
// file Custom_Reg.php
namespace Custom_Reg;
class Custom_Reg {
protected $form;
protected $saver;
function __construct( Form $form, Saver $saver ) {
$this->form = $form;
$this->saver = $saver;
}
/**
* Check if the url to recognize is the one for the registration form page
*/
function checkUrl() {
$url_part = $this->getUrl();
$nonce = urlencode( wp_create_nonce( 'registration_url' ) );
if ( ( $url_part === $nonce ) ) {
// do nothing if registration is not allowed or user logged
if ( is_user_logged_in() || ! get_option('users_can_register') ) {
wp_safe_redirect( home_url() );
exit();
}
return TRUE;
}
}
/**
* Init the form, if submitted validate and save, if not just display it
*/
function init() {
if ( $this->checkUrl() !== TRUE ) return;
do_action( 'custom_reg_form_init', $this->form );
if ( $this->isSubmitted() ) {
$this->save();
}
// don't need to create form if already saved
if ( ! isset( $custom_reg_form_done ) || ! $custom_reg_form_done ) {
$this->form->create();
}
load_template( $this->getTemplate() );
exit();
}
protected function save() {
global $custom_reg_form_error;
$this->saver->setFields( $this->form->getFields() );
if ( $this->saver->validate() === TRUE ) { // validate?
if ( $this->saver->save() ) { // saved?
global $custom_reg_form_done;
$custom_reg_form_done = TRUE;
} else { // saving error
$err = $this->saver->getErrorMessage();
$custom_reg_form_error = $err ? : __( 'Error on save.', 'custom_reg_form' );
}
} else { // validation error
$custom_reg_form_error = $this->saver->getErrorMessage();
}
}
protected function isSubmitted() {
$type = $this->form->getVerb() === 'GET' ? INPUT_GET : INPUT_POST;
$sub = filter_input( $type, 'custom_reg_form', FILTER_SANITIZE_STRING );
return ( ! empty( $sub ) && $sub === get_class( $this->form ) );
}
protected function getTemplate() {
$base = $this->form->getTemplate() ? : FALSE;
$template = FALSE;
$default = dirname( __FILE__ ) . '/default_form_template.php';
if ( ! empty( $base ) ) {
$template = locate_template( $base );
}
return $template ? : $default;
}
protected function getUrl() {
$home_path = trim( parse_url( home_url(), PHP_URL_PATH ), '/' );
$relative = trim( str_replace( $home_path, '', add_query_arg( array() ) ), '/' );
$parts = explode( '/', $relative );
if ( ! empty( $parts ) && ! isset( $parts[1] ) ) {
return $parts[0];
}
}
}
该类的构造函数接受 Form
和 Saver
之一的实例。
init()
方法 (使用 checkUrl()
) 查看 home_url()
后的 url 的第一部分,如果与正确的随机数匹配,则检查表单是否已经提交,如果使用 Saver
对象,则验证并保存用户数据,否则只打印表单。
init()
方法也触发动作钩'custom_reg_form_init'
传递表单实例作为参数:该钩子应该用于添加字段,设置自定义模板以及自定义表单方法。
9:把东西放在一起
现在我们需要编写主要的插件文件,我们可以在这里
- 需要所有的文件
- 加载文本域
- 启动整个过程使用实例化
Custom_Reg
类,并使用合理的早期钩来调用init()
方法 - 使用’custom_reg_form_init’ 添加字段来形成类
所以:
<?php
/**
* Plugin Name: Custom Registration Form
* Description: Just a rough plugin example to answer a WPSE question
* Plugin URI: https://wordpress.stackexchange.com/questions/10309/
* Author: G. M.
* Author URI: https://wordpress.stackexchange.com/users/35541/g-m
*
*/
if ( is_admin() ) return; // this plugin is all about frontend
load_plugin_textdomain(
'custom_reg_form',
FALSE,
plugin_dir_path( __FILE__ ) . 'langs'
);
require_once plugin_dir_path( __FILE__ ) . 'FieldInterface.php';
require_once plugin_dir_path( __FILE__ ) . 'fields.php';
require_once plugin_dir_path( __FILE__ ) . 'Form.php';
require_once plugin_dir_path( __FILE__ ) . 'Saver.php';
require_once plugin_dir_path( __FILE__ ) . 'CustomReg.php';
/**
* Generate dynamic registration url
*/
function custom_registration_url() {
$nonce = urlencode( wp_create_nonce( 'registration_url' ) );
return home_url( $nonce );
}
/**
* Generate dynamic registration link
*/
function custom_registration_link() {
$format = '<a href="%s">%s</a>';
printf(
$format,
custom_registration_url(), __( 'Register', 'custom_reg_form' )
);
}
/**
* Setup, show and save the form
*/
add_action( 'wp_loaded', function() {
try {
$form = new Custom_RegForm;
$saver = new Custom_RegSaver;
$custom_reg = new Custom_RegCustom_Reg( $form, $saver );
$custom_reg->init();
} catch ( Exception $e ) {
if ( defined('WP_DEBUG') && WP_DEBUG ) {
$msg = 'Exception on ' . __FUNCTION__;
$msg .= ', Type: ' . get_class( $e ) . ', Message: ';
$msg .= $e->getMessage() ? : 'Unknown error';
error_log( $msg );
}
wp_safe_redirect( home_url() );
}
}, 0 );
/**
* Add fields to form
*/
add_action( 'custom_reg_form_init', function( $form ) {
$classes = array(
'Custom_RegFullName',
'Custom_RegLogin',
'Custom_RegEmail',
'Custom_RegCountry'
);
foreach ( $classes as $class ) {
$form->addField( new $class );
}
}, 1 );
10:缺少任务
现在永远是完美的。我们只需要自定义模板,可能在我们的主题中添加一个自定义模板文件。
我们可以通过这种方式将特定的样式和脚本添加到自定义注册页面
add_action( 'wp_enqueue_scripts', function() {
// if not on custom registration form do nothing
if ( did_action('custom_reg_form_init') ) {
wp_enqueue_style( ... );
wp_enqueue_script( ... );
}
});
使用这种方法,我们可以排队一些 js 脚本来处理客户端验证,例如 this one 。使脚本工作所需的标记可以轻松地处理编辑 Custom_RegBaseField
类。
如果我们要自定义注册邮件,我们可以使用 standard method 并将定制数据保存在 meta 上,我们可以在电子邮件中使用它们。
我们可能要实现的最后一个任务是阻止请求默认注册表单,如下所示:
add_action( 'login_form_register', function() { exit(); } );
所有文件都可以在 Gist here 中找到。
次佳解决方案
TLDR; 将以下表单放入您的主题中,name
和 id
属性很重要:
<form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
<input type="text" name="user_login" value="Username" id="user_login" class="input" />
<input type="text" name="user_email" value="E-Mail" id="user_email" class="input" />
<?php do_action('register_form'); ?>
<input type="submit" value="Register" id="register" />
</form>
我在 Making a fancy WordPress Register Form from scratch 上发现了一个很好的 Tutsplus 文章。这花了相当多的时间在样式的形式,但以下相当简单的部分在所需的 wordpress 代码:
Step 4. WordPress
There is nothing fancy here; we only require two WordPress snippets, hidden within the wp-login.php file.
The first snippet:
<?php echo site_url('wp-login.php?action=register', 'login_post') ?>
And:
<?php do_action('register_form'); ?>
编辑:我从文章中添加了额外的最后一位,以说明放置上述代码片段的位置 – 它只是一个表单,所以它可以在任何页面模板或侧边栏中进行,或者从中创建一个短代码。重要的部分是 form
,其中包含以上代码段和重要的必填字段。
The final code should look like so:
<div style="display:none"> <!-- Registration --> <div id="register-form"> <div> <h1>Register your Account</h1> <span>Sign Up with us and Enjoy!</span> </div> <form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post"> <input type="text" value="Username" id="user_login" /> <input type="text" value="E-Mail" id="user_email" /> <?php do_action('register_form'); ?> <input type="submit" value="Register" id="register" /> <hr /> <p>A password will be e-mailed to you.</p> </form> </div> </div><!-- /Registration -->
Please note that it’s really important, and necessary, to have
user_login
as aname
and as anid
attribute in your text input; the same is true for the email input. Otherwise, it won’t work.And with that, we’re done!
第三种解决方案
这个 Article 提供了一个关于如何创建自己的前端注册/登录/恢复密码表单的 greate 教程。
或者如果您正在寻找一个插件,那么我以前使用过这些插件,可以推荐它们:
第四种方案
前段时间我做了一个网站,正在前端显示一个定制的注册表单。这个网站不再活着,但这里是一些截图。
以下是我遵循的步骤:
1) 激活所有访问者通过设置> 请求新帐户的可能性。一般> 会员选项。注册页面现在出现在 URL /wp-login.php?action=register
2) 自定义注册表单,使其看起来像您的网站 front-end 。这更棘手,取决于您使用的主题。
这是一个例子二十三:
// include theme scripts and styles on the login/registration page
add_action('login_enqueue_scripts', 'twentythirteen_scripts_styles');
// remove admin style on the login/registration page
add_filter( 'style_loader_tag', 'user16975_remove_admin_css', 10, 2);
function user16975_remove_admin_css($tag, $handle){
if ( did_action('login_init')
&& ($handle == 'wp-admin' || $handle == 'buttons' || $handle == 'colors-fresh'))
return "";
else return $tag;
}
// display front-end header and footer on the login/registration page
add_action('login_footer', 'user16975_integrate_login');
function user16975_integrate_login(){
?><div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php%20echo%20esc_url(%20home_url(%20'/'%20)%20);%20?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</a>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
<?php get_search_form(); ?>
</nav><!-- #site-navigation -->
</div><!-- #navbar -->
</header><!-- #masthead -->
<div id="main" class="site-main">
<?php get_footer(); ?>
<script>
// move the login form into the page main content area
jQuery('#main').append(jQuery('#login'));
</script>
<?php
}
然后修改主题样式表,使表单按需要显示。
3) 您可以通过调整显示的消息进一步修改表单:
add_filter('login_message', 'user16975_login_message');
function user16975_login_message($message){
if(strpos($message, 'register') !== false){
$message = 'custom register message';
} else {
$message = 'custom login message';
}
return $message;
}
add_action('login_form', 'user16975_login_message2');
function user16975_login_message2(){
echo 'another custom login message';
}
add_action('register_form', 'user16975_tweak_form');
function user16975_tweak_form(){
echo 'another custom register message';
}
4) 如果您需要 front-end 注册表,您可能不希望注册用户在 log-in 时看到后端。
add_filter('user_has_cap', 'user16975_refine_role', 10, 3);
function user16975_refine_role($allcaps, $cap, $args){
global $pagenow;
$user = wp_get_current_user();
if($user->ID != 0 && $user->roles[0] == 'subscriber' && is_admin()){
// deny access to WP backend
$allcaps['read'] = false;
}
return $allcaps;
}
add_action('admin_page_access_denied', 'user16975_redirect_dashbord');
function user16975_redirect_dashbord(){
wp_redirect(home_url());
die();
}
有很多步骤,但结果是在这里!
参考文献
注:本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛。