您的位置:首页 > 教程笔记 > 综合教程

wordpress网站前台制作登录框

2023-11-16 11:00:50 综合教程 175

使用wordpress建网站时,有时需要在网站前台制作登录框,方便用户登录。

一、制作登录框表单

在网站需要显示登录框的位置,放上以下的代码,用于显示登录框。

<div class="a31">会员登陆</div>        <div class="a32">        <?        /*if(!empty($error)) { '<p class="ludou-error">'.$error.'</p>';}*/if (!is_user_logged_in()) { ?>                <form name="loginform" method="post" action="<? 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="<? 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">&nbsp;&nbsp;<span><img id="ckstr" src="<? 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="<? if(isset($_GET['r'])) echo $_GET['r']; ?>" />      <input type="hidden" name="ludou_token" value="<? 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='<? echo get_option('home'); ?>/?page_id=1215'" type="button"></td></tr>            </tbody></table></form><? } else { ?><p>尊敬的会员&nbsp;&nbsp;<a style="font-weight:600;color:red" href="<? bloginfo('siteurl');?>/wp-admin/profile." target="_blank" rel="nofollow"><strong><? echo $user_identity ?></strong></a>&nbsp;&nbsp;您好!</p><p><a class="log" href="<? bloginfo('siteurl');?>/wp-admin/profile." target="_blank" rel="nofollow">[会员中心]</a></p><p class="ludou-error"><a href="<? echo wp_logout_url( home_url() ); ?>">退出登录</a></p><? } ?>    </div>

二、添加表单数据处理代码

将页面的<? get_header()?>替换为下面的代码。用于验证表单提交的数据。

<?/** * Template Name: 前台登录 */ 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('|^ |', ' ', $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样式作一些样式控制。

相关推荐