آموزش خودکار کردن کامل شدن آدرس لینک فیلد ها در وردپرس

به‌دلیل درخواستهای کاربران برای آگاهی از نحوۀ اضافه کردن کامل کردن خودکار لینک در فرمها، این مقاله برای طرفداران در نظر گرفته شود. کامل کردن خودکار به کاربران این امکان را می‌دهد تا آدرسهای موردنظرشان را از پیشنهادات سایت انتخاب کنند، این کار باعث تسریع در انجام کارها و اجتناب از اشتباه وارد کردن آدرسها خواهد شد. در این مقاله با استفاده از برنامۀ کاربردی مکانهای گوگل (Google Places API) این کار به راحتی انجام خواهد شد. با ما همراه باشید.

اضافه کردن کامل شدن خودکار لینکهای آدرس در فیلدهای مربوطه در سایت وردپرس

آموزش تکمیل خودکار فیلدها در وردپرس 

اولین کاری که باید انجام دهید افزونۀ  Address Autocomplete Using Google Place Api را نصب و فعال‌سازی کنید. در پستهای قبل آموزشهای لازم برای نصب افزونه فراهم آورده شده است. پس از تکرار آموزش نصب افزونه خودداری می‌کنیم تا به موضوعات بعد بپردازیم. برای فعال‌سازی به منوی setting رفته سپس google autocomplete را پیدا کنید.

اضافه کردن کامل شدن خودکار لینکهای آدرس در فیلدهای مربوطه در سایت وردپرس

پس از نصب افزونه این صفحه به شما نشان داده خواهد شد. این صفحه برای تنظیمات افزونه طراحی شده است. در جاهای مربوطه باید کلید api مکانهای گوگل دریافتی را وارد کنید. این کلید باعث می‌شود تا به نقشۀ گوگل به صورت اتوماتیک متصل شوید و پیشنهادات پایگاه‌داده‌های آنرا به صورت بلادرنگ دریافت کنید.

به  Google Developer Console بروید و پروژۀ جدید ایجاد کنید.

اضافه کردن کامل شدن خودکار لینکهای آدرس در فیلدهای مربوطه در سایت وردپرس

یک منوی شناور به شما نشان داده می‌شود که از شما درخواست انتخاب نام برای پروژۀ خود را می‌کند. این نام نشان دهندۀ پروژۀ شما خواهد بود پس نام با مسما برای آن انتخاب کنید و دکمۀ ایجاد را فشار دهید. پس از آن منوی شناور ناپدید می‌شود و پس از چند ثانیه شما به پروژۀ جدیدی که ساخته‌اید هدایت خواهید شد.

اضافه کردن کامل شدن خودکار لینکهای آدرس در فیلدهای مربوطه در سایت وردپرس

در این قسمت شما APIهای محبوب گوگل را خواهید دید که می‌توانید برای پروژۀ خود فعالشان کنید. هر کدام از این APIها کاربرد خاص خود را دارند. برای اینکه بخواهید کامل‌کردن خودکار آدرس در فیلدهای سایت وردپرس را داشته باشید روی Google Places API Web Service کلیک کنید.

با این‌کار به صفحه‌ای منتقل خواهید شد که به شما اطلاعاتی دربارۀ نحوۀ کار و ساختار API نشان خواهد داد. برای ادامه روی enable کلیک کنید.

اضافه کردن کامل شدن خودکار لینکهای آدرس در فیلدهای مربوطه در سایت وردپرس

کنسول توسعه‌دهنده API مکانهای گوگل را برای پروژۀ شما فعال خواهد کرد. اما هنوز شما به اعتبار احتیاج دارید تا این API روی سایت شما شروع به کار کند. پس روی دکمۀ create credentials کلیک کنید تا اعتبار خود را ایجاد کنید.

اضافه کردن کامل شدن خودکار لینکهای آدرس در فیلدهای مربوطه در سایت وردپرس

در صفحۀ بعد لازم است روی دکمۀ What credentials do I need کلیک کنید.

اضافه کردن کامل شدن خودکار لینکهای آدرس در فیلدهای مربوطه در سایت وردپرس

کنسول توسعه‌دهنده به شما کلید API را نشان خواهد داد. شما باید این کلید را کپی کنید و در سایت خود در قسمت افزونه‌ها الصاق کنید.

اضافه کردن کامل شدن خودکار لینکهای آدرس در فیلدهای مربوطه در سایت وردپرس

همچنین نیاز است تا API دیگری را برای پروژۀ توسعه‌دهندۀ گوگل خود فعال کنید. در کنسول توسعه‌دهندۀ گوگل خود روی library  کلیک کنید و سپس روی Google Maps JavaScript API کلیک کنید.

اضافه کردن کامل شدن خودکار لینکهای آدرس در فیلدهای مربوطه در سایت وردپرس

سپس روی enable کلیک کنید تا برای پروژتان فعال شود. این API به کلید احتیاج ندارد، پس به مراحلی که قبلا طی کردید احتیاج ندارید.

اضافه کردن کامل شدن خودکار لینکهای آدرس در فیلدهای مربوطه در سایت وردپرس

فعال کردن آدرس کامل کردن خودکار برای فیلدهای فرم وردپرس

قابلیت فعال کردن مشخصۀ کامل کردن خودکار آدرس برای تمامی فیلدهای تمامی افزونه‌های وردپرس ممکن است. در این آموزش از  WPForms استفاده خواهیم کرد. این دستورات برای تمامی فرمهای افزونه‌های وردپرس قابل استفاده خواهد بود. در ابتدا باید فرمی ایجاد کنید که دارای یک فیلد آدرس و مجموعه‌ای از فیلدهای آدرس باشد. پس از اینکه کار را انجام دادید باید فرم را به وبسایت خود اضافه کنید. در مرحلۀ بعد به صفحه‌ای که فرم را برایش ایجاد کردید بروید و روی فیلد آدرس راست کلیک کنید و inspect را از منوی مرورگرتان کلیک کنید.

اضافه کردن کامل شدن خودکار لینکهای آدرس در فیلدهای مربوطه در سایت وردپرس

در این قسمت نام، ID و کلاس css مربوط به فیلد آدرس را مشاهده می‌کنید که در شکل به‌صورت هایلایت نشان داده شده است. برای مثال در این شکل نام فرم  wpforms[fields][9][address1] و مقدار ID، wpforms-352-field_9 و کلاس CSS، wpforms-field-address-address1 در نظر گرفته شده است. لازم است تا یکی از این مقادیر را انتخاب کنید، کپی کنید و در تنظیمات افزونۀ سایت خود الصاق کنید. اگر می‌خواهید چندین فیلد در چندین فرم این مقادیر برایشان ظاهر شوند با کاما مقادیر را از هم جدا کنید و مقادیر بعدی را الصاق کنید.

اضافه کردن کامل شدن خودکار لینکهای آدرس در فیلدهای مربوطه در سایت وردپرس

سپس روی دکمۀ save کلیک کنید تا تنظیمات ذخیره شوند. حالا به صفحۀ سایت خود بروید و سعی کنید در فیلد آدرس، آدرسی را وارد کنید، می‌بینید که پیشنهاداتی برای شما ظاهر خواهد شد.

اضافه کردن کامل شدن خودکار لینکهای آدرس در فیلدهای مربوطه در سایت وردپرس

برای دریافت نکات آموزشی دیگر با ما همراه باشید.

آموزش های ناب وردپرس

آموزش وردپرس

دسته بندی و برچسب

درباره آنیتا دشتی

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

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

wp-yar.ir
wp-yar.ir

هر روز یک آموزش رایگان در کانال وردپرس یار