login-form-wordpress

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

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

در این آموزش، به چگونگی  ساخت یک فرم ورود سفارشی می پردازیم.برای زیبا شدن فرم از Flat UI استفاده می کنیم.

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

در زیر تصویر مربوط به فرمی که می خواهیم بسازیم را مشاهده می کنید

 

تابع زیر را در functions.php قرار دهید

function dlf_form() {
 
?>
 
<form method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
    <div class="login-form">
        <div class="form-group">
            <input name="login_name" type="text" class="form-control login-field" value="" placeholder="Username" id="login-name" />
            <label class="login-field-icon fui-user" for="login-name"></label>
        </div>
 
        <div class="form-group">
            <input  name="login_password" type="password" class="form-control login-field" value="" placeholder="Password" id="login-pass" />
            <label class="login-field-icon fui-lock" for="login-pass"></label>
        </div>
        <input class="btn btn-primary btn-lg btn-block" type="submit"  name="dlf_submit" value="Log in" />
</form>
</div>
<?php
}

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

function dlf_auth( $username, $password ) {
global $user;
$creds = array();
$creds['user_login'] = $username;
$creds['user_password'] =  $password;
$creds['remember'] = true;
$user = wp_signon( $creds, false );
if ( is_wp_error($user) ) {
echo $user->get_error_message();
}
if ( !is_wp_error($user) ) {
wp_redirect(home_url('wp-admin'));
}
}

و هنگامی که با خطایی مواجه می شوید که متن آن اینست که نام کاربری و یا رمز خود را فراموش کرده اید

  در زیر کد پردازش فرم را مشخص می کند که اگر خطایی نباشد  شما را به صفحه پنل وردپرس می برد.

برای اینکه کد های css را به تم خود وصل کنیم از کد زیر استفاده می کنیم

function flat_ui_kit() {
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . 'bootstrap/css/bootstrap.css', array(), 'all');
wp_enqueue_style( 'flat-ui', get_template_directory_uri() . 'css/flat-ui.css', array(), 'all');
}
add_action('wp_enqueue_scripts', 'flat_ui_kit');

حال نیاز داریم که یک کد کوتاه کننده از آن بسازیم تا در هر صفحه ای که نیاز است فراخوانی کنیم.در زیر یک shortcode می سازیم با نام dm_login_form

function dlf_shortcode() {
ob_start();
dlf_process();
return ob_get_clean();
} 
add_shortcode('dm_login_form', 'dlf_shortcode');

برای استفاده از shortcode مربوطه به کنترل پنل خود رفته و یک صفحه بسازید با نام login و کد کوتاه زیر را در آن قرار دهید.و آن را مشاهده نمایید.

<?php echo do_shortcode('[dm_login_form]'); ?>

در زیر فایل های بالا به صورت پلاگین شده موجود می باشد که  می توانید آن را نصب کرده و اجرا کنید

designmodo-login-form

  

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

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

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

ارسال نظر

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

Time limit is exhausted. Please reload CAPTCHA.