在老版本的WordPress中，对于一名普通博客站长来说，想要在某个页面上创建一个用户登录表单是件比较复杂的事情，因为要这样做，首先必须得建立一个页面模板（page template），然后还得通过使用PHP代码来处理这个表单，想想看吧，那可不是件好玩的事情！

幸好，WordPress后来还是引入并采用了wp_login_form()这个function功能函数，此函数允许你在网站上的任何地方创建并显示一个用户登录表单，如果再配合使用自定义的shortcode 简码API，会将表单做得更加符合个性、更加漂亮。

本教程将通过几个必要步骤来引导你如何在博客上任何支持简码的文章或页面中创建一个调用登录表单的简码。

创建登录表单简码

首先，使用任何一个你自己喜欢的文本编辑器打开主题中的functions.php文件， 或者最好是自建一个插件文件，添加以下代码：

add_action( 'init', 'devpress_add_shortcodes' );
function devpress_add_shortcodes() {
	add_shortcode( 'devpress-login-form', 'devpress_login_form_shortcode' );
}

这段代码的作用在于通过init钩子新建一条函数devpress_add_shortcodes，然后再通过调用WordPress功能函数add_shortcode(), 创建一条新的表单调用简码[devpress-login-form]。

注意：函数中前缀devpress是可以修改的，但必须保持一致。

简码[devpress-login-form]的作用是调出一个登录表单，要运行这一过程，你需要通过添加以下一段函数才能实现：

function devpress_login_form_shortcode() {
	if ( is_user_logged_in() )
		return '';
	return wp_login_form( array( 'echo' => false ) );
}

这段函数会检查当前用户是否已经登录，如果还未登录，则调用wp_login_form(), 结果会显示一个登录表单。

就大多数WordPress简码而言，这算是一条相当简单的简码。好了，[devpress-login-form]这样的一条登录表单调用简码已经创建成功了。

调用登录表单简码

简码创建完成了，调用也相当的简单、方便，在你博客任何文章或页面中插入如下简码即可（就如上图所示一样）：

[devpress-login-form]

高级用法

以下部分是针对简码高级用户来介绍的，也就是说，如果你想要让你的登录表单更具有个性、更漂亮的话，可以继续往下阅读，但所述都不是必须的。

为已经登录的用户显示一条提示信息

上面简码输出的登录表单，对于已经登录的用户是没有任何信息提示的，但你可以添加上去，只需将上面的表单输出代码变成如下即可:

function devpress_login_form_shortcode() {
	if ( is_user_logged_in() )
		return '<p>You are already logged in!</p>';
	return wp_login_form( array( 'echo' => false ) );
}

代码中的“You are already logged in！”就是给已登录用户显示的提示信息，你也可以改为别的语句。

给表单简码添加额外的参数

简码参数本不在该教程讨论范围内，因此这里不再细说，但你可以参考WordPress官方的shortcode API文档，那里有详细的说明。这里只通过举一个例子来作为示范，就以添加个性化的“Username” 和 “Password”为例吧。

首先将以上的表单输出函数改为如下：

function devpress_login_form_shortcode( $attr ) {
	if ( is_user_logged_in() )
		return '';
	/* Set up some defaults. */
	$defaults = array(
		'label_username' => 'Username',
		'label_password' => 'Password'
	);
	/* Merge the user input arguments with the defaults. */
	$attr = shortcode_atts( $defaults, $attr );
	/* Set 'echo' to 'false' because we want it to always return instead of print for shortcodes. */
	$attr['echo'] = false;
	return wp_login_form( $attr );
}

其中的“Username” 和 “Password”是表单输出时默认显示的“用户名”和“密码”，你可以在简码调用中修改为别的名称，比如“Enter Username”和“Enter Password”，调用形式如下：

[devpress-login-form label_username="Enter Username" label_password="Enter Password"]

样式化登录表单

上面简码调出的登录表单外观是比较粗糙的，如果你想要整个表单表现得美观一些，可以通过给WordPress默认的登录表单class类别名添加额外的值，如下：

/* Username wrapper paragraph. */
.login-username {}

/* Username label. */
.login-username label {}

/* Username input. */
.login-username .input {}

/* Password wrapper paragraph. */
.login-password {}

/* Password label. */
.login-password label {}

/* Password input. */
.login-password .input {}

/* Remember me wrapper paragraph. */
.login-remember {}

/* Remember me label. */
.login-remember label {}

/* Remember me checkbox. */
.login-remember input[type="checkbox"] {}

/* Submit button wrapper paragraph. */
.login-submit {}

/* Submit button. */
.login-submit .button-primary {}

如果你对CSS比较熟悉，你也可以给wp_login_form() 函数自定ID属性，然后再添加上想要的值，也就是ID参数。

原文：DevPress