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

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

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

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

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

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

طراحی فرم ورود، ثبت نام و فراموشی رمز با افزونه 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 فرم ورود، ثبت نام و فراموشی رمز عبور یک استایل میگیرد.

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

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

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

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

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

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

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

امتیاز دهید

اشتراک گذاری

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

آخرین مقالات

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

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

برچسب ها

لینک کوتاه

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

فهرست مطالب

مائده حوایی
مائده حوایی در 12:41

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

پاسخ
المنتور فارسی
المنتور فارسی در 16:29

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

پاسخ
Avatar
mth.1990 در 19:56

سلام
من تمام مراحل رو انجام دادم و تمام فرمها رو ایجاد کردم
ولی وقتی فرمهارو باز میکنم لیبیل ها نامنظم هستن(مثلا لیبل ایمیل سمت چپه و لیبل رمز سمت راست قرار میگیره)
البته من از افزونه دیجیتس استفاده میکنم
وقتی دیجیتس رو غیر فعال میکنم تمام لیبل ها مرتب نشون میده
ممنون میشم راهنمایی کنید

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

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

پاسخ
Avatar
مرضیه صفری در 13:36

سلام من در آموزش های قبلی فرم ورود و فرم ثبت نام ساختم باز هم نیازهست طراحی فرم ورود، ثبت نام و فراموشی رمز با افزونه Theme My Login انجام بدم؟ در آموزش قبل فراموشی رمز نگفته بودید ممنون میشم راهنمایی کنید

پاسخ
المنتور فارسی
المنتور فارسی در 16:51

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

پاسخ
Avatar
مرضیه صفری در 20:43

مجبور شدم فرم ورود و ثبت نام که با پاپ آپ اخته بودم حذف کنم.طبق این آموزش فرم ورود،ثبت نام،فراموشی رمز عبور ساختم.من در سربرگ یک دکمه دارم میخوام این فرم به دکمه اضافه کنم چطور باید اینکار بکنم؟

پاسخ
المنتور فارسی
المنتور فارسی در 20:47

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

پاسخ
Avatar
مرضیه صفری در 22:33

متشکرم

Avatar
پویا در 12:04

سلام ، چجوری label هارو از سمت راست قرار دادین (راستچین کردین) من هر کاری کردم نشد
لطفا راهنمایی کنید مرسی

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

با سلام
در صورتی که قالب تون راستچین باشه، Label ها هم به صورت راستچین می باشد.

پاسخ
Avatar
بهروز در 11:48

سلام
برای ورود به سایت 2FA code نیاز هست.
با این افزونه بعد از اینکه کد را وارد میکنم وارد سایت نمیشه اصلا انگار دکمه ی ورود کار نمیکنه

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

با سلام
از تنظیمات افزونه گزینه Enable AJAX requests را غیر فعال کرده و مجدد بررسی کنید.

پاسخ
وحید
وحید در 14:58

[theme-my-login action=register]
این کد برای فرم ثبت نام من جواب داد و دیگر کدهای توی مقاله کار نمیکنه

پاسخ
Avatar
محمد در 19:16

سلام شورت کد فرم ثبت نام رو قرار می میدم
موقع نمایش برگه فرم ثبت نام نمایش داده نمیشه وفقط شورت کد هست

پاسخ
المنتور فارسی
المنتور فارسی در 19:27

با سلام
خود متن رو نمایش میده؟ احتملا فاصله بین [] رو حذف نکردید. باید بین حروف و علامت ها هیچ فاصله ای نباشد.

پاسخ
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

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

پاسخ

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

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