Gần đây, một trong những người dùng của chúng tôi đã hỏi chúng tôi cách thêm tự động điền cho các trường địa chỉ trong các mẫu WordPress. Tính năng Tự động hoàn tất cho phép người dùng nhanh chóng chọn địa chỉ từ các đề xuất tạo ra theo thời gian thực khi họ nhập. Trong bài này, chúng tôi sẽ chỉ cho bạn cách thêm tự động hoàn thành cho các trường địa chỉ trong WordPress bằng cách sử dụng Google Địa điểm API.
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt tính năng Tự động hoàn thiện địa chỉ sử dụng Google Place Api. Để biết thêm chi tiết
Khi kích hoạt, bạn cần truy cập Cài đặt »Tự động hoàn tất của Google để cấu hình cài đặt plugin.
Bạn sẽ được yêu cầu nhập Khóa API Google Địa điểm. Khóa API này cho phép trang web của bạn kết nối với Google Maps và lấy các đề xuất tự động hoàn tất từ cơ sở dữ liệu của họ trong thời gian thực.
Truy cập trang web Bảng điều khiển dành cho nhà phát triển của Google và tạo một dự án mới.
Một popup sẽ xuất hiện yêu cầu bạn cung cấp tên cho dự án của bạn. Sử dụng tên sẽ giúp bạn xác định được dự án sau đó và sau đó nhấp vào nút tạo.
Cửa sổ bật lên sẽ biến mất, chờ vài giây và bạn sẽ được tự động chuyển hướng đến dự án mới của bạn.
Bây giờ bạn sẽ thấy danh sách các API Google phổ biến mà bạn có thể kích hoạt cho dự án của bạn. Bạn cần xác định vị trí và nhấp vào ‘Dịch vụ Web API của Google Địa điểm’.
Thao tác này sẽ đưa bạn đến trang tổng quan giải thích cách API này hoạt động. Bạn cần nhấp vào liên kết Bật để tiếp tục.
Bảng điều khiển dành cho nhà phát triển bây giờ sẽ bật API Google Địa điểm cho dự án của bạn.
Tuy nhiên, bạn vẫn cần các thông tin cần thiết để sử dụng API trên trang web của bạn. Hãy tiếp tục và nhấp vào nút tạo ủy nhiệm để tiếp tục.
Trên màn hình tiếp theo, bạn cần phải nhấp vào nút ‘Tôi cần chứng chỉ nào?’.
Bảng điều khiển dành cho nhà phát triển sẽ hiển thị cho bạn khóa API. Bạn cần phải sao chép chìa khóa này và dán nó dưới cài đặt plugin trên trang web WordPress của bạn.
Bạn vẫn cần kích hoạt một API khác trong dự án Google Developers của bạn. Nhấp vào thư viện trong Bảng điều khiển dành cho Nhà phát triển của Google và nhấp vào ‘API JavaScript của Google Maps’.
Thao tác này sẽ đưa bạn đến trang tổng quan của API, nơi bạn cần nhấp vào liên kết ‘Bật’ để tiếp tục.
API này không cần một khóa API bổ sung, vì vậy bạn bây giờ tốt để đi.
Bật Tự động điền địa chỉ trong các trường Mẫu WordPress
Bạn có thể thêm tính năng tự động điền địa chỉ vào bất kỳ trường mẫu nào được tạo bởi bất kỳ plugin xây dựng mẫu WordPress nào.
Chúng tôi sẽ sử dụng WPForms trong hướng dẫn này. Tuy nhiên, những hướng dẫn này sẽ hoạt động bất kể bạn sử dụng plugin liên hệ nào
Đầu tiên bạn cần phải tạo một mẫu có một trường địa chỉ hoặc một tập hợp các trường địa chỉ.
Khi bạn đã hoàn tất, hãy thêm biểu mẫu này vào trang web của bạn giống như bạn thường làm.
Tiếp theo, đi tới bài đăng hoặc trang mà bạn đã thêm mẫu của mình. Bạn cần phải nhấp chuột phải vào trường địa chỉ và chọn ‘Kiểm tra’ từ trình đơn trình duyệt.
Bạn sẽ thấy tên, ID và các giá trị lớp CSS cho trường địa chỉ.
Ví dụ: trong ảnh chụp màn hình này giá trị tên của biểu mẫu của chúng tôi là wpforms [fields] [9] [address1] , Giá trị ID là wpforms-352-field_9 , và lớp css là wpforms-field-address-address1 .
Bạn chỉ cần sao chép một trong các giá trị này và dán nó vào trang cài đặt plugin.
Nếu bạn muốn nhắm mục tiêu nhiều trường bằng nhiều hình thức, thì bạn chỉ cần thêm dấu phẩy và thêm một giá trị khác.
Đừng quên nhấp vào nút lưu để lưu trữ các thay đổi của bạn.
Đó là tất cả, bây giờ bạn có thể truy cập trang mẫu của bạn và thử nhập địa chỉ. Trường biểu mẫu sẽ tự động bắt đầu hiển thị các đề xuất sử dụng các địa điểm của Google và Google Maps.
