طراحی فرم های ورود، ثبت نام، فراموشی رمز عبور با المنتور و افزونه Theme My Login

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

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

برای انجام این آموزش، به 2 افزونه زیر نیاز داریم:

• افزونه المنتور پرو
• افزونه Theme My Login (رایگان در مخرن وردپرس)

بعد از نصب و فعال سازی افزونه های بالا، مراحل انجام کار را ادامه می دهیم.

طراحی فرم ورود، ثبت نام و فراموشی رمز با افزونه Theme My Login

ایجاد برگه

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

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

سپس دکمه + در صفحه را زده و یک ساختار تک ستونی ایجاد کنید.

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

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

شورت کد ورود

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

[ theme-my-login ]

توجه: theme-my-login را به بدون هیچ فاصله ای بین  [ ] قرار دهید. در اینجا به دلیل فراخوانی شورت کد توسط افزونه Theme My Login با فاصله نوشته شده است.

بعد از ذخیره کردن صفحه، فرم ورود به شکل زیر نمایش داده خواهد شد.

می توانید برای تغییر ظاهر صفحه، لوگو و رنگ پس زمینه را نیز تغییر دهید.

شورت کد ثبت نام

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

[ theme-my-login default_action=register ]

توجه: theme-my-login action=”register” را به بدون هیچ فاصله ای بین  [ ] قرار دهید. در اینجا به دلیل فراخوانی شورت کد توسط افزونه Theme My Login با فاصله نوشته شده است.

بعد از ذخیره کردن صفحه، فرم ثبت نام به شکل زیر خواهد بود.

شورت کد فراموشی رمز عبور

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

[ theme-my-login default_action=lostpassword ]

توجه: theme-my-login action=”lostpassword” را به بدون هیچ فاصله ای بین  [ ] قرار دهید. در اینجا به دلیل فراخوانی شورت کد توسط افزونه Theme My Login با فاصله نوشته شده است.

بعد از ذخیره کردن صفحه، فرم فراموشی رمز عبور به شکل زیر خواهد بود.

صفحات را ذخیره کرده تا به مرحله سفارشی سازی استایل فرم ها برویم.

سفارشی سازی فرم ها

برای سفارشی سازی فرم ها در المنتور 2 روش وجود دارد.

• استفاده از کد های CSS که ممکن است برای تمامی کاربران قابل استفاده نباشد.
• استفاده از ویژگی استایل قالب که در نسخه 2.9 المنتور اضافه شده است.

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

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

استایل قالب

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

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

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

در اینجا میتوانید رنگ و تایپوگرافی لیبل فرم، رنگ متن و پس زمینه فیلد فرم در حالت های عادی و تمرکزی (Focus) را ویرایش کنید.

با سفارشی سازی در این قسمت، هر 3 فرم ورود، ثبت نام و فراموشی رمز عبور یک استایل میگیرد.

همچنین برای تغییر استایل دکمه فرم، در پنل استایل قالب، تب دکمه ها را ویرایش کنید.

بعد از ذخیره کردن بخش سفارشی سازی فرم ها ایجاد شده و قابل استفاده می باشند.

تغییر مسیر فرم ها

برای تغییر مسیر فرم های ورود، ثبت نام و … می توانید به تنظیمات افزونه پوسته ورود من رفته و تغییرات را اعمال کنید.

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