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

هاست

آموزش ایجاد فرم ورود 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 بسازید و کد های زیر را درون آن قرار دهید:

 

 

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

 

 

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

دانلود

.

تور استانبول | مشاهده لیست قیمت ها


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


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

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

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
3,477افزونه نمایش قبل و بعد از تغییر تصاویر برای وردپرس تاریخ : 2016/05/20
632چگونه می‌توان از اسپم شدن ایمیل‌ها در وردپرس جلوگیری کرد؟ تاریخ : 2018/12/1
7,290افزونه مدیریت دانلود Onyx Files برای وردپرس تاریخ : 2016/10/16
3,168نمایش دسته بندی های بدون پست در وردپرس تاریخ : 2017/09/14
1,200جلوگیری از حذف مطالب توسط نویسنده ها در وردپرس تاریخ : 2018/07/13
1,438دانلود فایل افزونه‌ها و قالب‌ها از داشبورد وردپرس تاریخ : 2018/01/9
18,664افزونه ساخت فوتر حرفه ای برای وردپرس WP leFooter تاریخ : 2014/07/29
1,660آموزش قرار دادن فرم ثبت نام وردپرس در قالب تاریخ : 2018/06/4
688۴ تصور اشتباه در استفاده از تگ‌های Hreflang در سئو تاریخ : 2018/11/14
3,188ابزارک پخش آهنگ در وردپرس با افزونه Simple Music Widget تاریخ : 2017/07/6
3,044جلوگیری از ایجاد مطلب با عنوان تکراری در وردپرس تاریخ : 2017/07/14
3,839همگام سازی بوت استرپ با فرم تماس 7 تاریخ : 2017/09/6
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب