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

جایگزین صفحه لاگین در وردپرس

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

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

فیلم آموزش جایگزین صفحه لاگین در وردپرس

 

قدم اول : طراحی صفحه لاگین

در ابتدا باید یک فایل php در مسیر پوسته وردپرس برای صفحه لاگین بسازیم ، من برای این فایل نام custom-login.php انتخاب کردم و شما هم می تونید به دلخواه هر نامی برای فایلتون بزارید.

بعد از ساخت فایل ، اون رو باز کرده و کدهای زیر رو به فایل اضافه می کنیم.

کد خط دوم برای معرفی این صفحه به عنوان قالب صفحه با نام Login Page به وردپرس استفاده میشه. (حتما باید اولین خط در فایل باشد) برای اطلاعات بیشتر مقاله ساخت قالب برگه ها در وردپرس رو مطالعه کنید.

خط سوم هم محتوای موجود در header قالب رو به صفحه اضافه میکنه.

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

1 – با استفاده از تابع wp_login_form:

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

2 – طراحی با Html :

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

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

با یکی از دو روش اشاره شده صفحه خودتون رو طراحی کنید و توجه داشته باشید که از لحاظ ظاهری هیچ تفاوتی با هم ندارند.

قدم دوم :  تنظیمات اولیه

قبل از ادامه کار ابتدا باید به قسمت تنظیمات وردپرس رفته و از قسمت پیوندهای یکتا در بخش تنظیمات عمومی گزینه “نام نوشته” را انتخاب کرده و ذخیره کنید.

جایگزین صفحه لاگین در وردپرس

اگر مراحل را در localhost انجام می دهید ممکن است این تغییر باعث مشاهده صفحه 404  در وردپرس شود جهت رفع این مشکل در WAMP روی آیکون برنامه کلیک کرده و از Apache زیر منوی Apache Modules گزینه rewrite_module را فعال می کنیم.

جایگزین صفحه لاگین در وردپرس

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

جایگزین صفحه لاگین در وردپرس

در صفحه افزودن برگه عبارت user-login را تایپ کرده و سپس از قسمت ویژگی های برگه بخش قالب گزینه Login Page (همان نامی که در ابتدای فایل custom-login.php وارد کرده بودیم) را انتخاب کرده و گزینه انتشار را کلیک می کنیم.

جایگزین صفحه لاگین در وردپرس

جهت زیبا تر دیده شدن صفحه لاگین وردپرس کدهای css زیر رو به فایل style.css موجود در پوسته اضافه میکنیم.

حالا روی آدرس موجود در جلوی عبارت پیوند یکتا کلیک میکنیم تا صفحه لاگینی که طراحی کردیم رو ببینیم. (آدرس صفحه در این مثال:  http://localhost/test/user-login) باید با صفحه ای مشابه تصویر پایین روبرو بشید  البته با فونت متفاوت :

جایگزین صفحه لاگین در وردپرس

قدم سوم: کد نویسی

تا اینجای کار ما فقط ظاهر صفحه رو طراحی کردیم و حالا باید توابع لازم رو هم به کدهامون اضافه کنیم.

برای اینکار کدهایی که در ادامه گفته میشه رو به فایل functions.php اضافه میکنیم.

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

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

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

حالا لازمه که بعد از لاگین شدن کاربر اون رو به صفحه ای که مناسب هستش انتقال بدیم:

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

در صورتی که در هنگام لاگین خطایی رخ بده کاربر باید در صفحه لاگین باقی بمونه و خطاهای موجود برای کاربر نمایش داده بشه:

در صورتی که کاربر از سایت خارج بشه لازمه که به صفحه مناسبی هدایت شده و پیام مناسب بهش نمایش داده بشه:

مرحله آخر نمایش خطاهای ارسالی به کاربر هنگام لاگین و زمان خروج از سایت  در صفحه custom-login.php هستش برای این کار کدهای زیر رو در صفحه custom-login هر جایی که تمایل داریم خطاها نمایش داده بشه اضافه می کنیم (در این مثال قبل از آخرین </div> قرار داده شده است)

با انجام مراحل بالا وقتی کاربر میخواهد وارد صفحه لاگین بشه (wp-login.php) به صفحه سفارشی که براش طراحی کردیم هدایت شده و از طریق اون صفحه در سایت لاگین میکنه و اگر خطایی رخ بده در همون صفحه به کاربر نمایش داده میشه و در صورت Log out کردن از سایت به همین صفحه منتقل شده و پیام مناسب به کاربر نمایش داده میشه.

توی مقاله های قبلی به لاگین ajax در وردپرس اشاره کردیم و اگر دوست داشته باشید می تونید این مقاله رو هم مطالعه کنید.

امیدوارم که این مقاله به شما کمک کنه تا بتونید صفحه لاگین مورد نظرتونو طراحی کنید.

موفق باشید.

7 دیدگاه برای “جایگزین صفحه لاگین در وردپرس + فیلم آموزشی

  • محمد مقدم
    - ۹ آبان , ۱۳۹۶

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

    • الناز
      - ۹ آبان , ۱۳۹۶

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

    • سیروس
      - ۱۳ آذر , ۱۳۹۶

      سلام دوست عزیز
      آموزش جایگزین صفحه فراموشی رمز در وردپرس رو می تونید از طریق لینک زیر مشاهده کنید:
      https://goo.gl/59rs3n
      با تشکر

  • sepidar
    - ۲۹ فروردین , ۱۳۹۷

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

    • سیروس
      - ۳۰ فروردین , ۱۳۹۷

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

  • sepidar
    - ۳۰ فروردین , ۱۳۹۷

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

    • الناز
      - ۳۱ فروردین , ۱۳۹۷

      با سلام و خسته نباشید
      شما باید این کد رو تغییر بدید تو کدهای بالا:

      $redirect_url = home_url( ‘user-login?logged_out=true’ );

      و تبدیلش کنید به این:

      if (is_admin){
      $redirect_url = home_url(‘/’);
      } else {
      $redirect_url = home_url(‘user-login?logged_out=true’);
      }

دیدگاه خود را بیان کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Captcha loading...