آموزش ایجاد فرم ورود ajax در وردپرس بدون افزونه
form-icon

آموزش ایجاد فرم ورود ajax در وردپرس بدون افزونه

در این مطلب مراحل ایجاد یه فرم ورود ajax برای وردپرس و بدون افزونه رو شرح می دیم

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

مراحل کار به چند قسمت تقسیم میشه که برای سادگی کار ما هم جداگانه بیانشون می کنیم :

 

ایجاد بخش اسکلت با HTML :

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

کد به این شکل هست .

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

ضمن اینکه انتهای این فرم از یه بخش php برای امنیت فرم استفاده شده که یه کد امنیتی رو هر بار به صورت رندوم می سازه و می تونه به امنیت فرم شما کمک شایانی بکنه .

 

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

کد ایجاد دکمه به این شکل هست :

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

 

ارسال اطلاعات به سرور با ajax :

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

این بخش از کدها رو باید توی فایل functions.php قالبتون قرار بدید ، قبلا گفتیم بازم می گیم ، بکاپ گرفتن رو فراموش نکنید .

 

اعتبار سنجی داده ها :

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

 

ایجاد فایل جاوا اسکریپت :

تو این مرحله شما باید فایلی با نام ajax-login-script.js رو توی پوشه قالبتون ایجاد کنید که بتونیم کدهای جاوامون رو درونش قرار بدیم ، بعد از ایجاد فایل کافیه کدهای زیر رو درش کپی کنید :

 

استایل پیش فرض برای فرم :

خب تا اینجای کار ما فرم رو ساختیم و همه چی تمومه اما همون طور که گفتیم استایل پیش فرضی رو براش تدارک دیدیم که بتونید یه فرم کامل در سایتتون داشته باشید اما بازم پیشنهاد می کنم این استایل رو با توجه به استایل فعلی وب سایتتون تغییر بدید .

 

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

امیدوارم که مفید بوده باشه…

مدرسه مجازی آموزش طراحی وب

پوریا زارعی

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

بدون دیدگاه ثبت شده