Custom-login-page1

وردپرس به شما اجازه ساخت انواع نقش های کاربری را می دهد و هر نقش کاربری را می توان به پنل کاربری مخصوص  به خود هدایت کرد.حال اگر بخواهید یک فرم لاگین یا فرم ورود دلخواه برای هرکدام از گروه های کاربری داشته باشید و آنها با هم فرق داشته باشند می توانید از آموزش زیر استفاده کنید.

در تصویر بالا فرم پیشفرض ورود وردپرس را مشاهده می کنید که شامل یک نام کاربری یا ایمیل و رمز عبور می باشد.

به وسیله کد زیر تعیین می کنیم که فقط مدیریت می تواند وارد پنل کاربری شود و غیر آن به سایت هدایت می شود.

function restrict_admin()
{
	if ( ! current_user_can( 'manage_options' ) && '/wp-admin/admin-ajax.php' != $_SERVER['PHP_SELF'] ) {
                wp_redirect( site_url() );
	}
}
add_action( 'admin_init', 'restrict_admin', 1 );

قبل از هر کاری یک صفحه در قالب فعال خود که در پوشه wp-content/themes می باشد ، بسازید با نام loginpage.php و سپس کد زیر را در آن قرار دهید.

 

<?php
/*
* Template Name: Login Page
*/
?>

حال یک صفحه می سازیم و نام قالبی آن را به صورت زیر قرار می دهیم و بعد از ذخیره سازی آن به قسمت پنل کاربری رفته ، یک صفحه می سازیم و قالب آن را به Login Page تغییر می دهیم.

سپس برای گرفتن هدر و فوتر سایت خود می توانید از کد زیر استفاده کنید.

<?php
/*
* Template Name: Login Page
*/
?>

<?php get_header(); ?>

<?php 
get_sidebar(); 
get_footer(); 
?>

با اینکار یک صفحه که فقط که هدر و فوتر و ساید بار سایت شما را نمایش می دهد.حال می خواهیم با استفاده از تابع ()  wp_login_formکه می توانید آموزش آن را در توابع وردپرس ،تابع wp login form مشاهده کنید .فرم ورود خود را پیشرفته تر کنیم.در زیر کد مربوطه را می بینید

<?php $args = array(
        'echo' => true,
        'redirect' => site_url( $_SERVER['REQUEST_URI'] ), 
        'form_id' => 'loginform',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in' => __( 'Log In' ),
        'id_username' => 'user_login',
        'id_password' => 'user_pass',
        'id_remember' => 'rememberme',
        'id_submit' => 'wp-submit',
        'remember' => true,
        'value_username' => NULL,
        'value_remember' => false ); ?>

 

 

کد زیر کد نهایی شده می باشد

<?php
/**
 * Template Name: Login Page
 */

$args = array(
        'echo' => true,
        'redirect' => 'redirect' => site_url('wp-admin'), 
        'form_id' => 'loginform',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in' => __( 'Log In' ),
        'id_username' => 'user_login',
        'id_password' => 'user_pass',
        'id_remember' => 'rememberme',
        'id_submit' => 'wp-submit',
        'remember' => true,
        'value_username' => NULL,
        'value_remember' => false );
if(isset($_GET['login']) && $_GET['login'] == 'failed')
{
	?>
		<div id="login-error" style="background-color: #FFEBE8;border:1px solid #C00;padding:5px;">
			<p>Login failed: You have entered an incorrect Username or password, please try again.</p>
		</div>
	<?php
}

wp_login_form( $args );
?>

فقط شما باید کد های زیر را در داخل functions.php قرار دهید.یکی از آن ها برای عدم ورود به سیستم  و دیگری برای معتبر سازی نام کاربری و رمز عبور می باشد

add_action( 'wp_login_failed', 'pu_login_failed' ); // hook failed login

function pu_login_failed( $user ) {
  	// check what page the login attempt is coming from
  	$referrer = $_SERVER['HTTP_REFERER'];

  	// check that were not on the default login page
	if ( !empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') && $user!=null ) {
		// make sure we don't already have a failed login attempt
		if ( !strstr($referrer, '?login=failed' )) {
			// Redirect to the login page and append a querystring of login failed
	    	wp_redirect( $referrer . '?login=failed');
	    } else {
	      	wp_redirect( $referrer );
	    }

	    exit;
	}
}

و 

add_action( 'authenticate', 'pu_blank_login');

function pu_blank_login( $user ){
  	// check what page the login attempt is coming from
  	$referrer = $_SERVER['HTTP_REFERER'];

  	$error = false;

  	if($_POST['log'] == '' || $_POST['pwd'] == '')
  	{
  		$error = true;
  	}

  	// check that were not on the default login page
  	if ( !empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') && $error ) {

  		// make sure we don't already have a failed login attempt
    	if ( !strstr($referrer, '?login=failed') ) {
    		// Redirect to the login page and append a querystring of login failed
        	wp_redirect( $referrer . '?login=failed' );
      	} else {
        	wp_redirect( $referrer );
      	}

    exit;

  	}
}

 

البته شما می توانید از کد های زیر نیز برای سفارشی سازی بهتر استفاده کنید

۱

در همان صفحه ای که ساختید (loginpage.php ) کد زیر را قرار دهید.

<div class="wp_login_form">
<div class="form_heading"> Login Form </div>

<?php
$args = array(
'redirect' => home_url(),
'id_username' => 'user',
'id_password' => 'pass',
)
;?>

<?php wp_login_form( $args ); ?>

</div>

<style>

.wp_login_form{
border: 1px solid rgb(162, 46, 51);
width: 400px;
height: 350px;
border-radius: 5px;
margin-left: 35%;
}

.form_heading{
width: 380px;
height: 42px;
background-color: rgb(162, 46, 51);
color: #fff;
padding-top: 15px;
padding-left: 20px;
font-size: 20px;
}

form{
margin-left: 50px;
}

label{
clear:both;
margin-right: 200px;
}

.input{
height: 35px;
width: 270px;
border: 1px solid rgb(201, 201, 201);
background-color: rgb(238, 235, 236);
radius-border: 3px;
}

#wp-submit{
height: 35px;
width: 90px;
border: 1px rgb(162, 46, 51);
background-color: rgb(162, 46, 51);
border-radius: 3px;
color: #fff;
}

.error-msg{
color: red;
margin-left: 35%;
position: relative;
}

</style>

و سپس کد زیر را در functions.php  قرار دهید

$page_id = "";
$product_pages_args = array(
'meta_key' => '_wp_page_template',
'meta_value' => 'loginpage.php'
);

$product_pages = get_pages( $product_pages_args );
foreach ( $product_pages as $product_page ) {
$page_id.= $product_page->ID;
}

function goto_login_page() {
global $page_id;
$login_page = home_url( '/?page_id='. $page_id. '/' );
$page = basename($_SERVER['REQUEST_URI']);

if( $page == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
wp_redirect($login_page);
exit;
}
}
add_action('init','goto_login_page');

function login_failed() {
global $page_id;
$login_page = home_url( '/?page_id='. $page_id. '/' );
wp_redirect( $login_page . '&login=failed' );
exit;
}
add_action( 'wp_login_failed', 'login_failed' );

function blank_username_password( $user, $username, $password ) {
global $page_id;
$login_page = home_url( '/?page_id='. $page_id. '/' );
if( $username == "" || $password == "" ) {
wp_redirect( $login_page . "&login=blank" );
exit;
}
}
add_filter( 'authenticate', 'blank_username_password', 1, 3);

//echo $login_page = $page_path ;

function logout_page() {
global $page_id;
$login_page = home_url( '/?page_id='. $page_id. '/' );
wp_redirect( $login_page . "&login=false" );
exit;
}
add_action('wp_logout', 'logout_page');

$page_showing = basename($_SERVER['REQUEST_URI']);

if (strpos($page_showing, 'failed') !== false) {
echo '<p class="error-msg"><strong>ERROR:</strong> Invalid username and/or password.</p>';
}
elseif (strpos($page_showing, 'blank') !== false ) {
echo '<p class="error-msg"><strong>ERROR:</strong> Username and/or Password is empty.</p>';
}

?>

 

توضیحات کد

 

  • یک مقدار با نام  product_pages_args$ ساخته شده که نگهدارنده قالبی می باشد که با یک نام شناسه تعریف شده است.در اینجا  loginpage.php می باشد.
  • ()get_pages  یک آرایه ای می باشد که لیستی از صفحاتی که  نسبت به پارامتر های آن صفحه را باز می گرداند.
  •  تابع ()goto_login_page  شما را به صفحه لاگین سفارشی هدایت می کند.
  • تابع  ()login_failed برای غیر صحیح بودن نام کاربری و رمز عبور می باشد که شما می توانید پیام دلخواه برای آن قرار دهید.
  • تابع ()blank_username_password وقتی که یکی از نام کاربری و یا رمز عبور را خالی بگذارید می آید 
  • تابع ()logout_page بعد از اینکه از حساب کاربری خود خارج شدید می آید که می توانید یک صفحه دلخواه برای آن بسازید

۲-کافیست تمام موارد زیر را در صفحه loginpage.php قرار دهید

<?php
/**
 * Template Name: Login Page
 */


?>

<div id="login-register-password">

	<?php global $user_ID, $user_identity; get_currentuserinfo(); if (!$user_ID) { ?>

	<ul class="tabs_login">
		<li class="active_login"><a href="#tab1_login">Login</a></li>
		<li><a href="#tab2_login">Register</a></li>
		<li><a href="#tab3_login">Forgot?</a></li>
	</ul>
	<div class="tab_container_login">
		<div id="tab1_login" class="tab_content_login">

			<?php $register = $_GET['register']; $reset = $_GET['reset']; if ($register == true) { ?>

			<h3>Success!</h3>
			<p>Check your email for the password and then return to log in.</p>

			<?php } elseif ($reset == true) { ?>

			<h3>Success!</h3>
			<p>Check your email to reset your password.</p>

			<?php } else { ?>

			<h3>Have an account?</h3>
			<p>Log in or sign up! It&rsquo;s fast &amp; <em>free!</em></p>

			<?php } ?>

			<form method="post" action="<?php bloginfo('url') ?>/wp-login.php" class="wp-user-form">
				<div class="username">
					<label for="user_login"><?php _e('name'); ?>: </label>
					<input type="text" name="log" value="<?php echo esc_attr(stripslashes($user_login)); ?>" size="20" id="user_login" tabindex="11" />
				</div>
				<div class="password">
					<label for="user_pass"><?php _e('Password'); ?>: </label>
					<input type="password" name="pwd" value="" size="20" id="user_pass" tabindex="12" />
				</div>
				<div class="login_fields">
					<div class="rememberme">
						<label for="rememberme">
							<input type="checkbox" name="rememberme" value="forever" checked="checked" id="rememberme" tabindex="13" /> Remember me
						</label>
					</div>
					<?php do_action('login_form'); ?>
					<input type="submit" name="user-submit" value="<?php _e('Login'); ?>" tabindex="14" class="user-submit" />
					<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
					<input type="hidden" name="user-cookie" value="1" />
				</div>
			</form>
		</div>
		<div id="tab2_login" class="tab_content_login" style="display:none;">
			<h3>Register for this site!</h3>
			<p>Sign up now for the good stuff.</p>
			<form method="post" action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" class="wp-user-form">
				<div class="username">
					<label for="user_login"><?php _e('Username'); ?>: </label>
					<input type="text" name="user_login" value="<?php echo esc_attr(stripslashes($user_login)); ?>" size="20" id="user_login" tabindex="101" />
				</div>
				<div class="password">
					<label for="user_email"><?php _e('Your Email'); ?>: </label>
					<input type="text" name="user_email" value="<?php echo esc_attr(stripslashes($user_email)); ?>" size="25" id="user_email" tabindex="102" />
				</div>
				<div class="login_fields">
					<?php do_action('register_form'); ?>
					<input type="submit" name="user-submit" value="<?php _e('Sign up!'); ?>" class="user-submit" tabindex="103" />
					<?php $register = $_GET['register']; if($register == true) { echo '<p>Check your email for the password!</p>'; } ?>
					<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>?register=true" />
					<input type="hidden" name="user-cookie" value="1" />
				</div>
			</form>
		</div>
		<div id="tab3_login" class="tab_content_login" style="display:none;">
			<h3>Lose something?</h3>
			<p>Enter your username or email to reset your password.</p>
			<form method="post" action="<?php echo site_url('wp-login.php?action=lostpassword', 'login_post') ?>" class="wp-user-form">
				<div class="username">
					<label for="user_login" class="hide"><?php _e('Username or Email'); ?>: </label>
					<input type="text" name="user_login" value="" size="20" id="user_login" tabindex="1001" />
				</div>
				<div class="login_fields">
					<?php do_action('login_form', 'resetpass'); ?>
					<input type="submit" name="user-submit" value="<?php _e('Reset my password'); ?>" class="user-submit" tabindex="1002" />
					<?php $reset = $_GET['reset']; if($reset == true) { echo '<p>A message will be sent to your email address.</p>'; } ?>
					<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>?reset=true" />
					<input type="hidden" name="user-cookie" value="1" />
				</div>
			</form>
		</div>
	</div>

	<?php } else { // is logged in ?>

	<div class="sidebox">
		<h3>Welcome, <?php echo $user_identity; ?></h3>
		<div class="usericon">
			<?php global $userdata; get_currentuserinfo(); echo get_avatar($userdata->ID, 60); ?>

		</div>
		<div class="userinfo">
			<p>You&rsquo;re logged in as <strong><?php echo $user_identity; ?></strong></p>
			<p>
				<a href="<?php echo wp_logout_url('index.php'); ?>">Log out</a> | 
				<?php if (current_user_can('manage_options')) { 
					echo '<a href="' . admin_url() . '">' . __('Admin') . '</a>'; } else { 
					echo '<a href="' . admin_url() . 'profile.php">' . __('Profile') . '</a>'; } ?>

			</p>
		</div>
	</div>

	<?php } ?>

</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".tab_content_login").hide();
		$("ul.tabs_login li:first").addClass("active_login").show();
		$(".tab_content_login:first").show();
		$("ul.tabs_login li").click(function() {
			$("ul.tabs_login li").removeClass("active_login");
			$(this).addClass("active_login");
			$(".tab_content_login").hide();
			var activeTab = $(this).find("a").attr("href");
			if ($.browser.msie) {$(activeTab).show();}
			else {$(activeTab).show();}
			return false;
		});
	});
</script>


۳

<div class="Loign-client">
	

	<div class="side">
		<img src="<?php echo THEMEROOT; ?>/img/g74.png">
	</div>
	<div class="main">
		
		<div id="login" class="login">
			
			<form name="loginform" id="loginform" action="/wp-login.php" method="post">
				<h4>Log On</h4>
				<p>
					<label for="user_login">Username or Email<br>
						<input placeholder="Username or Email" type="text" name="log" id="user_login" class="input" value="" size="20"></label>
					</p>
					<p>
						<label for="user_pass">Password<br>
							<input placeholder="Password" type="password" name="pwd" id="user_pass" class="input" value="" size="20"></label>
							<a class="lost-pass" href="<?php echo home_url(); ?>/wp-login.php?action=lostpassword">Forgot password?</a>
						</p>
						<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever"> Remember Me</label></p>
						<p class="submit">
							<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In">
							<input type="hidden" name="redirect_to" value="/wp-admin/">
							<input type="hidden" name="testcookie" value="1">
						</p>
					</form>


					<script type="text/javascript">
						function wp_attempt_focus(){
							setTimeout( function(){ try{
								d = document.getElementById('user_login');
								d.focus();
								d.select();
							} catch(e){}
						}, ۲۰۰);
						}

						wp_attempt_focus();
						if(typeof wpOnload=='function')wpOnload();
					</script>

				</div>
			</div>

		</div>

 


ممنون که با ما همراه هستید

 

 

 

منبع :‌ مردان وردپرس

تاریخ آخرین بروزرسانی : ۸ شهریور ۱۳۹۵
میلاد میلادی

باور هایت را که پرورش دهی به هرچیزی دست خواهی یافت.

ارسال نظر

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.