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

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
فرم ورود و ثبت نام در المنتور

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

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

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

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

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

ایجاد برگه

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

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

فرم ورود و ثبت نام در المنتور

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

فرم ورود و ثبت نام در المنتور

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

فرم ورود و ثبت نام در المنتور

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

شورت کد ورود

شورت کد ورود

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

[ theme-my-login ]

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

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

فرم ورود و ثبت نام در المنتور

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

ورود

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

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

[ theme-my-login default_action=”register” ]

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

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

فرم ورود و ثبت نام در المنتور

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

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

[ theme-my-login default_action=”lostpassword” ]

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

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

فرم ورود و ثبت نام در المنتور

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

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

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

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

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

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

استایل قالب

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

استایل قالب المنتور

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

استایل قالب المنتور

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

استایل قالب المنتور

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

استایل قالب المنتور

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

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

استایل قالب المنتور

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

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

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

فرم ورود و ثبت نام در المنتور

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

امتیاز دهید

اشتراک گذاری

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email

آخرین مقالات

آخرین محصولات

آخرین محصولات دیجیتال

برچسب ها

لینک کوتاه

https://elementorfa.ir/?p=38700

فهرست مطالب

Avatar
آزاده در 21:31

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

پاسخ
المنتور فارسی
المنتور فارسی در 00:07

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

پاسخ
ali choupani
ali choupani در 21:52

سلام آقا من این کد رو هرچی میزنم نمیاره هیچی واسم دلیلش چی میتونه باشه ؟
[theme-my-login]

پاسخ
المنتور فارسی
المنتور فارسی در 21:56

با سلام
آیا افزونه Theme My Login که در ابتدای آموزش معرفی شده را نصب کردید؟

پاسخ
امیرحسین عقیقی
امیرحسین عقیقی در 01:42

سلام ، باتشکر از سایت و مطلب خوبتان ، ببخشید من وقتی شورت کد فراموشی رمز رو می زنم هیچ چیز خاصی نمیاره ! صفحه خالی

پاسخ
المنتور فارسی
المنتور فارسی در 01:48

با سلام
شورت کد [ theme-my-login action=”lostpassword” ] را تست کنید.

پاسخ
Avatar
علیرضا در 15:12

به نظر شما کدوم یکی از افزونه‌های جانبی مناسب اینکاره؟

پاسخ
المنتور فارسی
المنتور فارسی در 15:23

افزونه User Registration مخصوص ساخت فرم ها با فیلد های مخاغ هست.

پاسخ
alireza roshanie
alireza roshanie در 17:03

تشکر

پاسخ
Avatar
علیرضا در 14:16

سلام و تشکر از آموزش خوبتون
من میخوام در فرم ثبت نام فیلد نام کاربری نباشه. میشه این کار رو در افزونه theme my login انجام داد؟ در افزونه المنت پک که در المان ثبت نام کاربر، امکان حذف فیلد نام و نام خانوادگی در برچسب‌های سفارشی نیست.

پاسخ
المنتور فارسی
المنتور فارسی در 14:39

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

پاسخ
Avatar
Maziar Eskandari در 09:48

سلام،
با این پلاگین امکان ساخت صفحه مخصوص یا پروفایل کاربر وجود داره؟

پاسخ
المنتور فارسی
المنتور فارسی در 11:41

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

پاسخ
Avatar
sepehr shokati در 02:46

شورت کد ثبت نام زیر برای من کار کرد. برای اونایی که شورت کد ثبت نام توی متن براشون کار نکرد از این شورت کد استفاده کنند

[theme-my-login default_action="register"]

پاسخ
Avatar
dariush ahmadi در 19:15

sepehr shokati آقا دمت گرم 2روز گیرش بودم بالاخره کامنتت رو شانسی دیدم 😀
برای کد فراموشی رمز هم اگر کسی مشکل داشت اینو بزاره برای من جواب داد:
[theme-my-login default_action="lostpassword"]

پاسخ
Avatar
amirad در 01:55

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

پاسخ
المنتور فارسی
المنتور فارسی در 01:59

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

پاسخ

نظرات ارزشمند خود را به اشتراک بگذارید

نیاز به کمک دارید؟ پیام دهید