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
特別注意：本站所有轉載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權歸原作者所有，如需使用，請與原作者聯系。
最新資訊
熱門推薦