wordpress前台登录框制作
2018-11-02 来源：学做网站论坛
在之前的建站教程中，我们讲解过如何制作WP网站的登录功能，注册功能，这种功能是使用二个超链接，引导用户进入注册和登录页面。
但在使用wordpress建网站时，有时需要在网站前台制作登录框，方便用户登录。如下图：
如何在自己做网站时能够制作这样的前台登录框呢？下面学做网站论坛就来介绍一下wordpress前台登录框制作步骤。
一、制作登录框表单
在网站需要显示登录框的位置，放上以下的代码，用于显示登录框。
<div class="a31">会员登陆</div>
<div class="a32">
<?php
/*if(!empty($error)) {
?'<p class="ludou-error">'.$error.'</p>';
}*/
if (!is_user_logged_in()) { ?>
? <form name="loginform" method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>" class="ludou-login">
? <table width="100%" cellspacing="0" cellpadding="0" border="0">
? <tbody><tr>
? <td style="color:#03C; font-weight:bold;" width="30%" height="30" align="center">用户名</td>
? <td width="70%" align="center"><input name="log" id="log" class="input" value="<?php if(!empty($user_name)) echo $user_name; ?>" style="width:140px;" type="text"></td>
? </tr>
? <tr>
? <td style="color:#03C; font-weight:bold;" width="30%" height="30" align="center">密 码</td>
? <td width="70%" align="center"><input name="pwd" id="pwd" class="input" style="width:140px;" type="password"></td>
? </tr>
? <tr>
? <td style="color:#03C; font-weight:bold;" width="30%" height="30" align="center">验证码</td>
? <td width="70%" align="center"><input name="validate" id="validate" class="login_input" maxlength="4" style="width:40px" type="text"> <span><img id="ckstr" src="<?php bloginfo('template_directory'); ?>/images/ckstr.jpg" style="cursor:pointer;" onclick="this.src=this.src+'?'" align="absmiddle"> <a href="javascript:;" onclick="var v=document.getElementById('ckstr');v.src=v.src+'?';return false;" style="font-size:12px; color:#FFF">看不清?</a></span></td>
? </tr>
? <tr><td colspan="2" height="30" align="center"><input type="hidden" name="redirect_to" value="<?php if(isset($_GET['r'])) echo $_GET['r']; ?>" />
? <input type="hidden" name="ludou_token" value="<?php echo $token; ?>" /><input value="登录" style="width:50px;" type="submit"><input value="重置" style="width:50px;" type="reset"><input value="注册" style="width:50px;" onclick="javascript:window.location.href='<?php echo get_option('home'); ?>/?page_id=1215'" type="button"></td></tr>
? </tbody></table></form>
<?php } else { ?>
<p>尊敬的会员 <a style="font-weight:600;color:red" href="<?php bloginfo('siteurl');?>/wp-admin/profile.php" target="_blank" rel="nofollow"><strong><?php echo $user_identity ?></strong></a> 您好！</p>
<p><a class="log" href="<?php bloginfo('siteurl');?>/wp-admin/profile.php" target="_blank" rel="nofollow">[会员中心]</a></p>
<p class="ludou-error"><a href="<?php echo wp_logout_url( home_url() ); ?>">退出登录</a></p>
<?php } ?> </div>
二、添加表单数据处理代码
将页面的<?php get_header()?>替换为下面的代码。用于验证表单提交的数据。
<?php
/**
?* Template Name: 前台登录
?* 代码来源：学做网站论坛 https://www.xuewangzhan.com/
?*/
?
if(!isset($_SESSION))
? session_start();
?
if( isset($_POST['ludou_token']) && ($_POST['ludou_token'] == $_SESSION['ludou_token'])) {
? $error = '';
? $secure_cookie = false;
? $user_name = sanitize_user( $_POST['log'] );
? $user_password = $_POST['pwd'];
? if ( empty($user_name) || ! validate_username( $user_name ) ) {
? $error .= '<strong>错误</strong>：请输入有效的用户名。<br />';
? $user_name = '';
? }
?
? if( empty($user_password) ) {
? $error .= '<strong>错误</strong>：请输入密码。<br />';
? }
?
? if($error == '') {
? // If the user wants ssl but the session is not ssl, force a secure cookie.
? if ( !empty($user_name) && !force_ssl_admin() ) {
? if ( $user = get_user_by('login', $user_name) ) {
? if ( get_user_option('use_ssl', $user->ID) ) {
? $secure_cookie = true;
? force_ssl_admin(true);
? }
? }
? }
? if ( isset( $_GET['r'] ) ) {
? $redirect_to = $_GET['r'];
? // Redirect to https if user wants ssl
? if ( $secure_cookie && false !== strpos($redirect_to, 'wp-admin') )
? $redirect_to = preg_replace('|^http://|', 'https://', $redirect_to);
? }
? else {
? $redirect_to = admin_url();
? }
? if ( !$secure_cookie && is_ssl() && force_ssl_login() && !force_ssl_admin() && ( 0 !== strpos($redirect_to, 'https') ) && ( 0 === strpos($redirect_to, 'http') ) )
? $secure_cookie = false;
? $creds = array();
? $creds['user_login'] = $user_name;
? $creds['user_password'] = $user_password;
? $creds['remember'] = !empty( $_POST['rememberme'] );
? $user = wp_signon( $creds, $secure_cookie );
? if ( is_wp_error($user) ) {
? $error .= $user->get_error_message();
? }
? else {
? unset($_SESSION['ludou_token']);
? wp_safe_redirect($redirect_to);
? }
? }
? unset($_SESSION['ludou_token']);
}
$rememberme = !empty( $_POST['rememberme'] );
?
$token = md5(uniqid(rand(), true));
$_SESSION['ludou_token'] = $token;
get_header();>
三、表单样式的美化
通过上面的代码，我们的网站就已经拥有前台登录框了，如果想美化登录框，可以使用CSS样式作一些样式控制。
除了制作wordpress前台登录框，我们还可以制作wordpress网站添加前台注册功能。
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。
最新资讯
热门推荐