ساخت فرم سفارشی ورود به پیشخوان وردپرس

caduspro

کاربر عضو
ایجاد یک فرم سفارشی ورود به سایت برای سایت های وردپرسی

llf.jpg


ایجاد یک فرم سفارشی ورود به سایت برای سایت های وردپرسی
وردپرس پرطرفدارترین و یکی از بهترین سیستم مدیریت محتوا در جهان است. به طوریکه بیش از ۶۰ درصد سایت ها را شامل می شود.
به طور پیش فرض، در وردپرس فرم ورود تنها زمانی قابل مشاهده است که بخواهیم وارد داشبورد مدیریت بشویم، اما ممکن است بخوایم یک صفحه ورود سفارشی با کدهای خاص پوسته خودمان طراحی کنیم تا بجای استفاده از صفحه ورود پیش فرض وردپرس از آن استفاده کنیم.
در این آموزش یاد خواهیم گرفت که چگونه یک فرم ورود سفارشی بسازیم که در پست یا صفحه با استفاده از کد کوتاه قابل نمایش باشد. خب تصویر نهایی کارمون این شکلی میشه، اما شما می تونید به هر شکلی که می خواهید بسازید.



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

  • ساخت فایل cadus-login-form.php
  • ایجاد پوشه فایلهای css و فونت
حالا فایل php رو باز می کنیم و افزونه رو به وردپرس معرفی می کنیم:

/* Plugin Name: cadus login form Plugin URI: Description: سفارشی کردن فرم ورود به داشبورد Version: 1.0 Author: caduspro */خب حالا فرم خودمون رو در قرار می دیم که من در اینجا از این فرم استفاده کردم.

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}ما به تائید نام کاربری و گذرواژه ای که در فرم وارد شده است نیاز داریم که از از تابع زیر دسته زیر استفاده می کنیم:

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'));}}فرض رو بر این می گیریم که کاربر نام کاربری یا گذرواژه خودش رو فراموش کرده باشه، و در هنگام ورود یکی از موارد خواسته شده رو اشتباه وارد کرده باشه، یک پیغام آگاه سازی و لینک برگه ” گذرواژه خود را فراموش کرده اید؟” نمایش داده می شود!



حالا تابع dlf_process() بررسی می کنه که آیا فرم ورود ارسال شده است؟ پس از اون برای بررسی درست بودن نام و گذرواژه کاربری تابع dlf_form() رو فراخوانی می کنه تا اگر اطالاعات وارد شده درست بود، کاربر به داشبورد وردپرس راهنمایی بشه:

if (isset($_POST['dlf_submit'])) { dlf_auth($_POST['login_name'], $_POST['login_password']);} dlf_form();}برای اینکه فرم ما جذابیت ویژه خودش رو داشته باشه میایم فایل های کمکی رو وارد افزونه خودمون می کنیم.

function flat_ui_kit() {wp_enqueue_style('bootstrap-css', plugins_url('css/bootstrap.css', __FILE__));wp_enqueue_style('flat-cp-kit', plugins_url('css/login-form.css', __FILE__)); } add_action('wp_enqueue_scripts', 'flat_ui_kit');خب برای اینکه این فرم در جایی که مدنظر داریم قرار بگیره ، باید یک کد کوتاه در نظر بگیریم تا در جای مورد نظر خودم در پوسته وارد کنیم

function dlf_shortcode() {ob_start();dlf_process();return ob_get_clean();} add_shortcode('dm_login_form', 'dlf_shortcode');دیگه کار ما تمومه. تنها کد زیر رو در خط نخست فایل php خودتون قرار بدید.

<?php ob_start();?>شادباش! ما افزونه سفارشی کردن فرم ورود وردپرس رو ساختیم!

استفاده از افزونه
حالا چجوری استفاده کنم؟ کاری نداره! هر جا بخایم کد کوتاه رو فرا خوانی می کنیم!
در پست یا برگه از [dm_login_form] استفاده می کنیم یا برای جاسازی در پوسته خودمون از کد زیر استفاده می کنیم.

<?php echo do_shortcode('[dm_login_form]'); ?>به همین راحتی!


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

 



 

پیوست‌ها

  • designmodo-login-form.zip
    1 مگابایت · بازدیدها: 14
آخرین ویرایش توسط مدیر:

MahdiY

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

به زودی دوباره باز خواهیم گشت!

طبق آموزش پیش بروید و افزونه را بسازید! کاری نداره که

یا منتظر بمونید تا برگردند یا منتظر بمونید اگر دوستی فایلشو داره براتون بذاره

 

lahijsabz

کاربر عضو
تاریخ تاپیک مربوط به 22 آذر 93 می باشد

درضمن از افزونه Theme My Login هم می تونین استفاده کنید

 
بالا