طراحی قالب وردپرس

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

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

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

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

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

 

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

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

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

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

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

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

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

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

۲ – طراحی با Html :

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

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

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

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

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

اگر مراحل را در localhost انجام می دهید ممکن است این تغییر باعث مشاهده صفحه ۴۰۴  در وردپرس شود جهت رفع این مشکل در 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 در وردپرس اشاره کردیم و اگر دوست داشته باشید می تونید این مقاله رو هم مطالعه کنید.

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

موفق باشید.

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