تبلیغات

تبلیغات
طراحی و بهینه سازیمشاهده


هاست

آموزش ایجاد فرم ورود Ajax در وردپرس

مقالات,آموزش,ترفند , وردپرس
آموزش ایجاد فرم ورود Ajax در وردپرسReviewed by M J on Sep 4Rating: 4.0آموزش ایجاد فرم ورود Ajax در وردپرس صفحه لاگین در وب سایت ها همیشه دارای اهمیتی خاص بوده و هست و البته خواهد بود چرا که کاربران وب سایت وقتی قرار است از صفحه لاگین استفاده کنند بسیار روی این موضوع و ظاهر این صفحه حساس هستند.بهتر است ابتدا کمی در مورد ajax صحبت کنیم. قطعا نمی توان ajax را به سادگی توصیف کرد اما می توان به طور ساده آن را توضیح داد.

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

 

آموزش ایجاد فرم ورود Ajax در وردپرس

 

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

 

ایجکس چیست و در ایجاد فرم ها در سایت چه نقشی دارد؟

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

 

برای این کار روش های زیر موجود است:

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

 

در این اموزش روش سوم را مورد بررسی قرار میدهیم چون روش های اول و دوم در قالب های وردپرس موجود است.

در ابتدا و برای شروع باید کد های html فرم را در تگ body قالب قرار دهید که بهترین مکان ان فایل header.php است.این کد ها به صورت زیر است:

 

 

در ادامه یک دکمه نیز برای ورود نیاز داریم که میتوانید در هر قسمت از صفحه که مد نظر دارید قرار دهید و با استفاده از css آن را تنظیم کنید:

 

 

در مرحله بعد نیاز است که اطلاعات به سرور ارسال شود تا درستی اطلاعات مورد تائید قرار گرفته و فرم کاربر را به داخل سایت هدایت کند.برای این منظور شما باید کد زیر را در فایل functions.php قاب ورپرس خود قرار دهید:

 

 

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

 

 

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

 

 

در ادامه یک نمونه استایل برای فرم شما اماده کرده ایم که میتوانید استفاده کنید تا خود فرم سایت خود را استایل دهی نمائید.

 

 

خب به همین سادگی یک فرم بسیار خوب و شیک و حرفه ای برای وب سایت خود طراحی کردیم.


The product includes software licensed under GNU General Public License (GPL) or GNU

دانلود
.

خرید هاست وردپرس با SSL رایگان


مطلب مفیدی بود ؟
نویسنده : admin 0 مقالات,آموزش,ترفند , وردپرس

لینک کوتاه مطلب : http://www.20script.ir/?p=27546

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
765محدود کردن نویسندگان در تعداد ارسال مطالب در وردپرس با Limit Posts تاریخ : 2017/11/26
3,857افزونه فارسی آپلود خودکار عکس تاریخ : 2016/06/25
1,062افزودن آیکون پرچم در وردپرس با افزونه Flag Icons تاریخ : 2018/01/8
7,831کار نکردن فایل ترجمه قالب وردپرس تاریخ : 2015/08/10
2,469غیر فعالسازی دیدگاه ها در وردپرس با افزونه Disable All Comments تاریخ : 2017/07/7
6,561افزونه فارسی لایک مطالب I Recommend This برای وردپرس تاریخ : 2015/01/18
2,904آموزش مخفی کردن ورژن وردپرس تاریخ : 2016/03/13
17,065قالب رایگان وردپرس نبض موزیک تاریخ : 2014/05/3
2,403افزونه وردپرس دریافت اطلاعات فیلم و سریال PJ IMDB تاریخ : 2017/01/5
3,487سیستم ناوبری اسکرول بی نهایت در وردپرس تاریخ : 2017/06/23
1,899دریافت ایمیل های بروزرسانی وردپرس تاریخ : 2017/07/13
4,189قالب بسیار زیبای LENS برای وردپرس تاریخ : 2013/11/24
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب