اخیراً ، یکی از کاربران ما از ما پرسید که چگونه می توان تکمیل خودکار را برای قسمتهای آدرس در فرم های وردپرس اضافه کرد. تکمیل خودکار به کاربران امکان می دهد تا هنگام تایپ کردن ، سریعاً آدرس را از میان پیشنهادهای تولید شده در زمان واقعی انتخاب کنند. در این مقاله ، ما به شما نشان خواهیم داد که چگونه با استفاده از Google Places API تکمیل خودکار را برای قسمتهای آدرس در وردپرس اضافه کنید.
آموزش فیلم h4>
اگر فیلم را دوست ندارید یا به دستورالعمل های بیشتری احتیاج دارید ، به خواندن ادامه دهید.
اولین کاری که باید انجام دهید این است که تکمیل خودکار آدرس با استفاده از Google Place Api . برای جزئیات بیشتر ، به راهنمای گام به گام ما در نحوه نصب افزونه وردپرس .
برای پیکربندی تنظیمات افزونه ، باید از صفحه تنظیمات »تکمیل خودکار Google بازدید کنید.
از شما خواسته می شود کلید API Google Places را وارد کنید. این کلید API به وب سایت شما اجازه می دهد تا با Google Maps ارتباط برقرار کرده و پیشنهادات تکمیل خودکار را از پایگاه داده خود در زمان واقعی بازیابی کند.
به Google Developer Console بروید وب سایت و ایجاد یک پروژه جدید.
پنجره ای ظاهر می شود که از شما می خواهد نام پروژه خود را ارائه دهید. از نامی استفاده کنید که به شما کمک می کند بعداً پروژه را شناسایی کنید و سپس بر روی دکمه ایجاد کلیک کنید.
پنجره بازشو از بین می رود ، چند ثانیه صبر کنید و به طور خودکار به پروژه جدید خود هدایت می شوید.
اکنون لیستی از محبوب API های Google را مشاهده می کنید که می توانید برای پروژه خود فعال کنید. شما باید “Google Places API Web Service” را پیدا کرده و روی آن کلیک کنید.
با این کار می توانید به یک صفحه مروری در مورد نحوه عملکرد این API بروید. برای ادامه باید روی پیوند فعال کلیک کنید.
کنسول برنامه نویس اکنون Google Places API را برای پروژه شما فعال می کند.
با این وجود ، برای استفاده از API در وب سایت خود همچنان به مدارک تحصیلی احتیاج دارید. بنابراین پیش بروید و برای ادامه بر روی دکمه ایجاد اعتبارنامه کلیک کنید.
در صفحه بعدی ، باید روی دکمه “چه مدارکی لازم دارم؟” کلیک کنید.
کنسول برنامه نویس اکنون کلید API را به شما نشان می دهد. شما باید این کلید را کپی کرده و در زیر تنظیمات افزونه در وب سایت وردپرس خود جای گذاری کنید.
شما هنوز هم باید API دیگری را در پروژه Google Developers خود فعال کنید. روی کتابخانه موجود در Google Developer Console کلیک کنید و سپس روی «Google Maps JavaScript API» کلیک کنید.
با این کار به صفحه نمایشی API می روید که برای ادامه کار باید روی پیوند “فعال کردن” کلیک کنید.
این API به کلید API اضافی احتیاج ندارد ، بنابراین اکنون کار شما خوب است.
فعال کردن آدرس تکمیل خودکار در قسمتهای فرم وردپرس h4>
شما می توانید ویژگی آدرس تکمیل خودکار را به هر قسمت فرم ایجاد شده توسط هر افزونه فرم ساز WordPress .
ما در این آموزش از WPForms استفاده خواهیم کرد. با این حال ، مهم نیست که از چه افزونه فرم تماس استفاده می کنید.
ابتدا باید فرمی ایجاد کنید که دارای یک قسمت آدرس یا مجموعه ای از قسمتهای آدرس باشد.
پس از اتمام کار ، این فرم را مانند معمول به وب سایت خود اضافه کنید.
بعد ، به پست یا صفحه ای که فرم خود را در آن اضافه کرده اید بروید. شما باید بر روی قسمت آدرس کلیک راست کرده و “Inspect” را از فهرست مرورگر انتخاب کنید.
مقادیر کلاس نام ، شناسه و CSS را برای قسمت آدرس مشاهده خواهید کرد.
به عنوان مثال ، در این تصویر صفحه مقدار نام فرم ما wpforms [زمینه] [9] [آدرس 1] است ، مقدار ID wpforms-352-field_9 و css است کلاس wpforms-field-address-address1 است.
باید فقط یکی از این مقادیر را کپی کرده و در صفحه تنظیمات افزونه جایگذاری کنید.
اگر می خواهید چندین زمینه را به چند شکل هدف قرار دهید ، پس می توانید یک ویرگول اضافه کرده و یک مقدار دیگر اضافه کنید.
برای ذخیره تغییرات فراموش نکنید که روی دکمه ذخیره کلیک کنید.
این همه ، اکنون می توانید به صفحه فرم خود مراجعه کرده و آدرس را وارد کنید. قسمت فرم به طور خودکار شروع به نشان دادن پیشنهادات با استفاده از مکان های Google و Google Maps .
امیدواریم این مقاله به شما کمک کند یاد بگیرید چگونه می توانید تکمیل خودکار را برای قسمتهای آدرس در وردپرس اضافه کنید. همچنین ممکن است بخواهید لیست ما را ببینید 24 باید دارای افزونه های وردپرس برای وب سایت های تجاری باشند .
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .
منبع:
https://www.wpbeginner.com/plugins/how-to-add-autocomplete-for-address-fields-in-wordpress/.