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

مثل این:

ajax-login-preview

تو این آموزش هم فقط از ۶ تابع زیر در پوسته استفاده میکنیم:

  • wp_enqueue_script + wp_localize_script
  • wp_nonce_field + check_ajax_referer
  • is_user_logged_in + wp_signon

پس با این آموزش میتونین یه ورود ای جکسی رو به سایت ایجاد بکنین پس شروع میکنیم.

چگونگی پیاده سازی بخش ورود

به طور کلی رورش های مختلفی هست که ما “بخش ورود” رو روی وبسایت پیاده سازی کنیم. میتونین بصورت اختصاصی یه برگه با نام “ورود” ایجاد کنیم که فرم ورود رو داخلش نمایش بدیم.(برا این کار میتونیم از یه فایل با نام page-login.php و معرفی یه Template استفاده کنیم.) راه دیگه هم اینه که فرم رو بصورت همیشگی در زیر بخش هدر یا سایدبار نمایش بدیم. راه سوم اینکه که یه جعبه ورود(لاگین باکس) ایجاد کنیم که کاربر با کلیک روی دکمه یا لینک “ورود” جعبه براش نشون داده میشه و کاربر اطلاعات رو تکمیل میکنه و بصورت Ajax ورود رو انجام میده.

بخش HTML مربوط به Ajax Login

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

همونطور که میبینین از یک تابع  wp_nonce_field که یک فیلد مخفی برای امنیت با مقدار ajax-login-nonce البته هش شده ایجاد میکنه استفاده میکنیم. حالا اگه صفحه رو رفرش کنین یه صفحه و فرم زشت رو میبینین ولی ما باید یه دکمه یا لینک بذاریم که که با کلیک روی اون این فرم بصورت یه جعبه شناور نمایش داده بشه. این کد رو هم میتونین داخل header.php قرار بدین:

خب حالا باید برین سراغ استایل دادن و اینکه با کلیک چه اتفاقی بیفته.

استایل بخش فرم ورود با ajax

این کد ها هم استایل ما که میتونین داخل style.css قرار بدین:

ارسال اطلاعات کاربر با Ajax

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

تمام پردازش سمت سرور رو داخل فایل functions.php قرار میدیم. یه تابع ایجاد میکنیم که فایل JS مارو لود کنه بعدشم یه شی ajax_login_script برای اطلاعات مورد نیاز برای درخواست Ajax در وردپرس ایجاد میکنیم و همچنین کاری میکنیم تا کاربرایی که لاگین هم نکردن بتونن درخواست Ajax بدن.

حتما به  wp_ajax_nopriv_ajaxlogin توجه کنید که مهمترین بخش کاره. اگه nopriv رو نذارین فقط کاربرایی که لاگین کردن میتونن تابع ajax_login رو صدا بزنن که مطمئنا ما این رو نمیخوایم. تایع ajax_login هم پردازش POST رو انجام میده. اول مقدار nonce رو تایید میکنه و بعدش عمل لاگین انجام میشه  و نتیجه بصورت json ارسال میشه:

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

 

موفق باشید…


 
ما مایلیم مطالب جدید را در کانال تلگرام به شما اطلاع دهیم.