如何在不使用插件的情况下在 WordPress 中创建登录页面

您是否正在寻找在 WordPress 中创建登录页面的最佳方式，无需插件且无需自定义默认 WordPress 登录页面？ 如果您想在不使用流行的 WordPress 登录插件的情况下在 WordPress 中创建登录页面，您可以通过在短代码或自定义页面模板中添加登录代码来实现。

在本教程中，我将演示如何使用简码函数在 WordPress 中创建登录页面，以及如何使用自定义页面模板中的登录函数在 WordPress 中创建登录页面。

这些方式中的每一种都应该与任何 WordPress 主题或任何 WordPress 托管环境无缝协作。

在没有插件的 WordPress 中创建登录页面

本教程的目标是帮助您创建一个登录页面，例如默认的 WordPress 登录，允许您在登录后访问 WordPress 仪表板。

理想情况下，这个自定义登录页面应该是您的站点用户登录的前端登录页面。正如我在介绍中提到的，我们将在本教程中介绍两种方式；

1. 登录页面简码
2. 自定义页面模板登录

创建登录页面简码

当我们想在 WordPress 的任何地方创建登录页面时，第一步是使用简码。 短代码可以添加到任何页面或任何帖子，甚至是小部件和自定义页面模板。

在这一步中，我们将为登录表单创建一个简码，用于在 WordPress 的任何页面或帖子上发布登录表单。 这种方法使用户可以灵活地在其站点的任何部分创建登录页面。

要创建短代码，我们将使用以下代码：

 // 创建登录表单简码

功能 njengah_add_login_shortcode() {

                add_shortcode('njengah-login-form', 'njengah_login_form_shortcode');

}

我们在函数中添加了短代码，以便我们稍后可以对其进行初始化。 add_shortcode 函数在 WordPress 中创建一个简码。 add_shortcode() 函数的一般表达式如下：

 add_shortcode( 字符串 $tag, 可调用 $callback )

如您所见，此函数有两个参数，如下所示：

 //第二步：短代码回调
功能 njengah_login_form_shortcode() {
	
	if (is_user_logged_in())
		
	返回'<p>欢迎。 您已登录！</p>'; ?> 
		
<div class ="njengah-login-tutorial" >  
		
	<?php 返回 wp_login_form( 
		大批（ 
			'回声' => 假，
			'label_username' => __('你的用户名'),
			'label_password' => __( '你的密码' ),
			'label_remember' => __('记住我')
			        )
	); ?> 
		
            </div>
  <?php 
   }

如果您仔细检查代码，您会注意到我们已经使用该功能来检查用户是否已登录，正如我在有关如何检查用户是否已登录 WordPress的帖子中所解释的那样。

如果用户没有登录，我们使用 wp_login_form() 函数来显示登录表单。 如果用户已登录，我们有条件地在该页面上显示欢迎消息，而不是显示登录表单。

WP 函数 wp_login_form()

wp_login_form() 是一个 WordPress 函数，它为主题开发人员提供了一种在任何地方显示 WordPress 表单的方法。 这个函数一般可以表示如下：

 wp_login_form（数组 $args = 数组（））

$args 可以是控制表单显示方式的选项数组。

以下是您可以在数组中使用的参数来更改表单的显示方式。

例如，您可以设置参数数组并将其传递给此函数，如下所示：

 <?php 

wp_login_form( 

	 大批（
			'回声' => 真的，
			// 默认“重定向”值将用户带回请求 URI。
			'重定向' => ( is_ssl() ? 'https://' : 'http://' ) 。 $_SERVER['HTTP_HOST'] 。 $_SERVER['REQUEST_URI'],
			'form_id' => 'loginform',
			'label_username' => __('你的用户名'),
			'label_password' => __( '你的密码' ),
			'label_remember' => __('记住我'),
			'label_log_in' => __( '登录' ),
			'id_username' => 'user_login',
			'id_password' => 'user_pass',
			'id_remember' => 'rememberme',
			'id_submit' => 'wp-submit',
			'记住' => 真的，
			'value_username' => '',
			// 将 'value_remember' 设置为 true 以默认选中“记住我”复选框。
			'value_remember' => 假，
		);
		
); ?>

表单将显示您添加到数组中的新标签，而不是默认的 WordPress 登录表单标签。 在上面的代码中，我将用户名更改为您的用户名，将密码更改为您的密码。

创建短代码和回调函数后，我们需要对其进行初始化，以便我们现在可以在 WordPress 帖子或页面的任何位置使用短代码来添加自定义登录表单。

以下是将初始化登录表单短代码的代码：

 // 第三步：初始化简码函数

add_action('init', 'njengah_add_login_shortcode');

在 WordPress 中创建登录表单简码的完整代码片段

现在我们可以将所有这些代码片段放在一个代码片段中，并将代码添加到活动 WordPress 主题的 functions.php 中，然后使用简码 - [njengah-login-form] 显示 WordPress 登录表单。

以下是您应该添加到 functions.php 文件以添加 WordPress 登录表单短代码的完整代码片段：

 /**
 * 创建没有插件的自定义 WordPress 登录表单 [WordPress 登录表单简码] 
 * @作者乔恩杰加 
 * @ gist - https://gist.github.com/Njengah/fa96025717308df1b979e77e5da3eef2
 */ 


// 第 1 步：创建简码
功能 njengah_add_login_shortcode() {
	add_shortcode('jay-login-form', 'njengah_login_form_shortcode');
}

//第二步：短代码回调
功能 njengah_login_form_shortcode() {
	
	if (is_user_logged_in())
		
		返回'<p>欢迎。 您已登录！</p>'; ?> 
		
		<div class ="njengah-login-tutorial" >  
		
			<?php 返回 wp_login_form( 
							大批（ 
								'回声' => 假，
								'label_username' => __('你的用户名'),
								'label_password' => __( '你的密码' ),
								'label_remember' => __('记住我')
			              )
			); ?> 
		
		</div>
  <?php 
   }

// 第三步：初始化简码函数
add_action('init', 'njengah_add_login_shortcode');

//第 4 步：使用简码 [njengah-login-form] 将登录表单嵌入页面或帖子 

当您将此代码添加到 functions.php 时，您应该创建一个登录页面并添加短代码 [njengah-login-form] 以发布登录表单。 登录表单应如下图所示：

WordPress登录表单样式

我添加了以下样式以使登录表单具有吸引力并采用我正在使用的主题的设计：

 .njengah-登录教程 {
    背景：#6379a4；
    填充：20px；
    最大宽度：70%；
    边距：0 自动；
    颜色：#fff;
}

.登录密码标签{
    右边距：120px；
}

.登录用户名 {
    填充顶部：30px；
}

创建登录表单自定义页面模板

在没有插件的情况下在 WordPress 中创建登录页面的另一种方法是创建自定义页面模板并使用 wp_login_form() 函数在该页面上发布登录表单。

以下是用于创建位于自定义页面模板中的自定义登录页面的代码：

 <?php
/**
 * 模板名称：登录页面 
 */
 
 get_header(); 
 
 
 if (is_user_logged_in()){
	 
	     回声'<p>欢迎。 您已登录！</p>'; 
		 
 }别的{ 
	 
	 wp_login_form( 

		 大批（
				'回声' => 真的，
				// 默认“重定向”值将用户带回请求 URI。
				'重定向' => ( is_ssl() ? 'https://' : 'http://' ) 。 $_SERVER['HTTP_HOST'] 。 $_SERVER['REQUEST_URI'],
				'form_id' => 'loginform',
				'label_username' => __('你的用户名'),
				'label_password' => __( '你的密码' ),
				'label_remember' => __('记住我'),
				'label_log_in' => __( '登录' ),
				'id_username' => 'user_login',
				'id_password' => 'user_pass',
				'id_remember' => 'rememberme',
				'id_submit' => 'wp-submit',
				'记住' => 真的，
				'value_username' => '',
				// 将 'value_remember' 设置为 true 以默认选中“记住我”复选框。
				'value_remember' => 假，
			)
						
		);
    }			
	
get_footer();		
				

将此代码保存在一个文件中并将其命名为 login-page.php 并确保它保存在 WordPress 主题的根文件夹中。

创建一个新页面，您将看到登录模板现在在页面属性模板选项上可用，如下所示：

选择模板并发布页面。 当您检查前端时，您应该看到为未登录的用户显示登录表单，并为已登录的用户显示欢迎消息。

结论

在这篇文章中，我概述了在 WordPress 页面中添加登录表单的两种方法。 您可以使用简码功能创建 WordPress 登录表单简码，也可以使用自定义页面模板在 WordPress 中创建登录页面，无需插件。 我希望您现在可以实施其中一种方法来在您的 WordPress 网站上创建自定义前端登录表单。

类似文章

1. 如何为自定义帖子类型创建 WordPress 分页
2. 保护您的网站的 30 个最佳 WordPress 安全插件
3. 如何以编程方式在 WordPress 中创建页面
4. 如何访问 WordPress 管理仪表板或登录到您的 WordPress 仪表板
5. 如何创建自定义订单接收页面 WooCommerce
6. 如何将 Printful 连接到 WooCommerce
7. 如何更新 WooCommerce 扩展
8. 如何在页面店面主题顶部添加搜索框
9. 40 多个用于轻松联系的最佳 WordPress 联系表单插件
10. 如何在 WordPress WooCommerce 中删除未分类的类别
11. 如何从 WordPress 页面中删除侧边栏或隐藏 WordPress 侧边栏
12. 如何通过示例在 WordPress 中创建自定义查询分页
13. WooCommerce vs Magento：哪个是最好的电子商务平台？
14. 如何备份 WooCommerce 数据库
15. 前 30 多个最佳 WordPress 表单插件 » 最佳 WordPress 表单插件
16. 如何在 WooCommerce 中创建单独的登录和注册页面
17. 35+ 最佳自由形式插件 WordPress
18. 如何从 Shopify 迁移到 WooCommerce