سلام دوستان. در این مقاله آموزشی قصد دارم نحوه ساخت فرم خبرنامه Mailchimp بدون افزونه و به صورت ajax رو آموزش بدم. ( MailChimp ارائه دهنده سرویس خبرنامه هستش ) قبل از شروع آموزش بهتره برای کسانی که آشنایی با MailChimp ندارند، توضیحی درباره این سرویس و نحوه عضویت در آن رو توضیح بدم.

MailChimp

MailChimp

MailChimp یک وبسایت ارائه دهنده سرویس ارسال ایمیل انبوه بسیار قوی و حرفه ای در عین حال ساده هستش. عضویت در این سرویس رایگان است. برای عضویت در این وبسایت این لینک را باز کنید و بعد با وارد کردن ایمیل، نام کاربری و رمز عبور دکمه Get Started! را بزنید.

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

باید یک ایمیل از طرف MailChimp برای شما آمده شده باشد. مثل عکس زیر:

 

ایمیل را باز کرده و برروی دکمه Active Account کلیک کنید. مثل عکس زیر:

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

پس بر روی دکمه I’m Not A Robot کلیک کنید (برای تائید کردن اینکه شخص واقعی هستید) بعد از زدن دکمه یک سری اطلاعات شخصی ازتون میپرسه، مقدارشو پر کنید و دکمه Continue رو بزنید تا برسید به پرسش های آخر. سپس شما وارد داشبورد پنل مدیریت می شوید. حالا باید یک لیست برای اعضای خبرنامه بسازید. از منو بالا بر روی Lists کلیک کنید.

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

پیدا کردن API KEY و LIST ID در MailChimp

در قسمت داشبورد بر روی نام خود (بالا سمت راست) کلیک کنید و منو account رو انتخاب کنید.

سپس از منو Extras گزینه API Keys رو انتخاب کنید.

حالا در صفحه جدیدی که باز میشه روی دکمه  Create a Key  کلیک کنید. کلید API ساخته میشود و به لیست کلید های شما اضافه می شود. حالا کافیه  مقدار Key رو کپی کنید و نگه دارید چون توی کد میخواییم ازش استفاده کنیم.

پیدا کردن List ID

از منو بالا بر روی آیتم Lists کلیک کنید.

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

در صفحه جدیدی که برای شما باز میشه روی آیتم “List name & defaults” کلیک کنید.

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

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

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

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

ساخت فرم HTML

در ابتدا فرم HTML رو ایجاد می کنیم. برای این کار کد زیر رو جایی که میخواهید فرم نمایش داده بشه بگذارید. برای مثال در Footer.php و یا در ابزارک. من این کد رو داخل ابزارک متن و ستون کناری گذاشتم.

 

حالا ابزارک را ذخیره کنید و صفحه سایت رو رفرش کنید. اگر از پوسته twentyseventeen استفاده کنید فرمی شبیه زیر را خواهید دید.

این فرم عضویت اصلا زیبا نیست. پس بهتره با کمی Css فرم رو شکیل تر کنیم. پس این کد رو به فایل style.css و یا فایل rtl.css اضافه کنید:

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

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

کد ajax فرم خبرنامه MailChimp

دوستان در این قسمت کد ajax برای فرم خبرنامه رو قرار میدم. شما این کد رو باید داخل یک فایل با پسوند js قرار بدید. فقط اگر فایل جدیدی برای اینکار ایجاد میکنید یادتون نره که داخل ساخت فراخوان کنید. برای فراخوانی هم می تونید از مقاله wp_enqueue در وردپرس کمک بگیرید. یک فایل به نام ajax.js در پوسته خود ایجاد کنید (در هر پوشه ای که دوست دارید.) و کد زیر رو داخلش قرار بدید:

فایل رو ذخیره می کنیم. در این کد زمانی که بر روی دکمه عضویت کلیک بشه یک سری کدها اجرا میشه. در ابتدا مقدار “در حال بررسی اطلاعات لطفا صبر کنید” به انتهای فرم اضافه میشه و بعد مقادیر فرم با اکشن subscribe_user ارسال میشه. فقط نکته ای که در کد داره این هستش که url رو برابر با  ajax_subscribe.ajaxurl قرار دادیم و admin_ajax.php قرار ندادیم. url که تحت عنوان ajax_subscribe.ajaxurl در اینجا قرار دادم رو در داخل فایل functions.php تعریف کردم و شما هم می بایست کد زیر رو به functions.php اضافه کنید:

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

کد php فرم خبرنامه MailChimp

فایل functions.php رو باز کنید. به انتهای فایل بروید و این کد رو بهش اضافه کنید:

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

به جای Your_APIKey کد api که کپی کردید را قرار دهید و به جای You_ListID هم کد ID لیست را قرار دهید.

در کد بالا با اکشن wp_ajax_nopriv_subscribe_user و wp_ajax_ subscribe_user ایجیکس رو وصل کردیم به فانکشن مورد نظر. تفاوت 2 اکشن بالا این است:

اکشن ‘wp_ajax_nopriv_subscribe_user برای کاربران غیرعضو استفاده می شود و به آنها اجازه دسترسی به فانکشن را می دهد

اکشن wp_ajax_subscribe_user فقط برای کاربران عضو است و دسترسی کاربران عضو به فانکشن مجاز است.

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

در ادامه آموزش، ما فانکشن رو به ایجکس متصل کردیم و مقدار ایمیل را گرفتیم و در متغیر $email قرار دادیم و بعد کلید API و آی دی لیستی که میخواهید کاربران به آن اضافه بشوند را داخل متغیرهای $apiKey و $listID قرار دادیم.

سپس فانکشن mc_checklist را صدا زدیم و مقدار ایمیل و کلید API و آی دی لیست رو بهش دادیم. این فانکشن بررسی می کند که ایمیل ثبت شده در آن لیست وجود دارد یا خیر. اگر وجود داشت پیغام ” شما در حال حاضر عضو خبرنامه هستید” نمایش داده می شود، در غیر این صورت ایمیل به صورت pending’ اضافه می شود و بعد از تائید کاربر عضویت انجام می شود.

آموزش امروز مدرسه وردپرس تحت عنوان ساخت فرم خبرنامه MailChimp بدون افزونه و به صورت ajax به پایان رسید.

امیدوارم که لذت برده باشید

موفق باشید

کلمات کلیدی: ،

2 دیدگاه برای “ساخت فرم خبرنامه MailChimp بدون افزونه و به صورت ajax

دیدگاه خود را بیان کنید