Cách thêm Trình định vị cửa hàng Google Maps vào WordPress

Bạn muốn thêm mặt tiền cửa hàng Google Maps vào WordPress? Công cụ định vị cửa hàng là bản đồ chỉ đến địa điểm kinh doanh của bạn.

Cho phép người dùng tìm thấy nó trên bản đồ, tìm chỉ đường hoặc chia sẻ vị trí với bạn bè. Thêm một người ảnh hưởng cửa hàng vào trang web doanh nghiệp của bạn hoặc thậm chí một cửa hàng trực tuyến giúp bạn có được niềm tin của người dùng trực tiếp.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm vị trí cửa hàng Google Maps vào WordPress.

Cách thêm công cụ định vị cửa hàng Google Maps vào WordPress

Google Maps đã giới thiệu API trả phí để hiển thị bản đồ trên các trang web. Họ vẫn cung cấp tùy chọn miễn phí hạn chế để nhúng bản đồ Google trên các trang web nhỏ.

Hầu hết các plugin Google Maps cho WordPress đều sử dụng Google API để tải xuống và xem bản đồ. Để sử dụng plugin Google Maps, bạn phải đăng ký với nền tảng Google API và bật tùy chọn thanh toán.

Đây là một dịch vụ trả tiền khi bạn đi, có nghĩa là bạn sẽ bị tính phí dựa trên số lượng cuộc gọi API từ trang web của bạn.

Chúng tôi chỉ cho bạn các phương pháp miễn phí và trả phí với những ưu điểm và nhược điểm của chúng, sau đó bạn có thể chọn phương pháp phù hợp nhất với nhu cầu của mình.

phương pháp 1. Thêm Google Maps vào trang web của bạn miễn phí

Phương pháp này đơn giản và miễn phí. Nhược điểm là bạn không thể hiển thị nhiều cửa hàng trên một bản đồ.

Chúng tôi khuyên người dùng chỉ muốn thêm một vị trí cửa hàng Google Maps vào trang web của họ.

Trước tiên, bạn cần truy cập trang web Google Maps trên máy tính của mình. Sau đó nhập địa chỉ cửa hàng của bạn vào trường tìm kiếm và Google Maps sẽ hiển thị địa chỉ đó trên bản đồ với điểm đánh dấu được đính kèm trên bản đồ.

Chia sẻ bản đồ trên Google Maps

Đảm bảo đặt con trỏ ở đúng nơi. Bạn có thể chọn mức thu phóng bằng cách nhấp vào nút thu phóng. Khi bạn hài lòng với mức thu phóng, bạn nên nhấp vào nút chia ở cột bên trái.

Một cửa sổ bật lên sẽ xuất hiện nơi bạn nên chuyển sang tab “Nhúng bản đồ”. Bây giờ bạn thấy nơi tìm kiếm của bạn trên bản đồ với mã HTML.

Sao chép mã nhúng từ Google Maps

Nhấp vào liên kết Sao chép HTML để nhận mã nhúng.

Bây giờ hãy vào khu vực quản trị của trang web WordPress của bạn. Khi ở trong khu vực quản trị, hãy tiếp tục và chỉnh sửa bài đăng hoặc trang nơi bạn muốn xem bản đồ vị trí của cửa hàng.

Thông thường, người dùng thêm một vị trí cửa hàng trên trang mẫu liên hệ của họ với số điện thoại và giờ mở cửa.

Trên màn hình chỉnh sửa sau, bạn phải thêm một khối HTML tùy chỉnh.

Thêm một khối HTML tùy chỉnh vào WordPress

Trong vùng văn bản của khối HTML tùy chỉnh, bạn cần dán mã mà bạn đã sao chép từ Google Maps.

Bản đồ để chèn mã vào WordPress

Bây giờ bạn có thể chuyển sang tab xem trước để xem Google Maps được nhúng trên trang của bạn. Nó hiển thị vị trí cửa hàng đã chọn của bạn trên bản đồ với các liên kết đến địa chỉ hoặc để lưu vị trí.

Vị trí cửa hàng được đánh dấu trên bản đồ

phương pháp 2. Thêm trình định vị cửa hàng Google Maps bằng cách sử dụng plugin WordPress

Phương pháp này được khuyến nghị cho người dùng muốn xem nhiều vị trí cửa hàng trên Google Map.

Điều đầu tiên cần làm là cài đặt và kích hoạt plugin WP Store Locator. Để biết thêm thông tin, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

Đây là plugin Google Maps miễn phí cho phép bạn tạo bản đồ tùy chỉnh với nhiều vị trí cửa hàng và trường tùy chỉnh.

Nhược điểm của phương pháp này là nó yêu cầu bạn thêm khóa API. Bạn phải nhập thông tin thanh toán của mình để sử dụng khóa API. Truy cập trang web Google Maps Platform để biết giá và các thông tin khác.

Chắc chắn, hãy bắt đầu.

Anh ấy đã qua 1. Tạo khóa API Google Maps

Để sử dụng plugin WP Store Locator, bạn phải tạo hai khóa API. Cái đầu tiên được gọi là khóa API của trình duyệt và cái thứ hai được gọi là khóa máy chủ.

Trước tiên hãy bắt đầu với khóa trình duyệt. Nhấp vào liên kết này trong Bảng điều khiển dành cho nhà phát triển của Google để đưa bạn đến trang web Google API với tất cả các API cần thiết được bật.

Tạo một dự án mới

Bạn cần tạo một dự án mới và đặt tên cho nó để giúp bạn xác định nó. Sau đó, bạn phải chờ một lát trong khi giao diện điều khiển tạo dự án cho bạn.

Sau đó, bạn sẽ được chuyển hướng đến trang cấu hình khóa API. Bạn phải nhập tiêu đề cho khóa API để có thể dễ dàng xác định nó là khóa API trình duyệt cho dự án Google Maps của bạn.

Đặt khóa API của trình duyệt

Sau đó, bạn cần đặt “Hạn chế ứng dụng” trong “Thông tin HTTP”. Trong thời gian đó, bạn phải đặt trường “Chấp nhận yêu cầu từ” thành tên miền của bạn theo định dạng sau.

https://example.com/*https: //*.example.com/* (nếu bạn sử dụng tên miền phụ)

Cuối cùng, bấm vào nút “Tạo”. Bảng điều khiển hiện lưu cài đặt của bạn và hiển thị khóa trình duyệt. Bạn cần sao chép và dán khóa này vào trình soạn thảo văn bản, bạn sẽ cần nó sau.

Sao chép khóa API của trình duyệt

Sau đó, bạn cần tạo khóa API máy chủ. Nhấp vào liên kết này trong Bảng điều khiển dành cho nhà phát triển của Google và bạn sẽ được đưa trực tiếp đến bảng điều khiển với các API đã chọn được bật.

Bạn sẽ thấy trang về việc tạo dự án một lần nữa. Nhưng vì bạn đã tạo một dự án, bạn có thể nhấp vào menu thả xuống và chọn dự án của bạn.

Chọn dự án Google Maps của bạn

Sau đó, bạn được chuyển hướng đến trang cấu hình API. Nhập tên cho khóa API này để giúp bạn nhận ra nó là khóa máy chủ.

Đặt giới hạn IP

Trong phần “Hạn chế chương trình”, bạn phải chọn địa chỉ IP. Về nguyên tắc, chúng tôi yêu cầu Google chỉ chấp nhận các yêu cầu máy chủ đến từ các địa chỉ IP cụ thể.

Bây giờ bạn cần yêu cầu máy chủ web WordPress của bạn cho biết phạm vi IP được sử dụng bởi tài khoản máy chủ của bạn. Nó sẽ có định dạng sau:

172.16.0.0/ 12

Sau đó, bạn phải nhấp vào nút “Tạo” để lưu cài đặt của mình và sao chép khóa API từ máy chủ.

Anh ấy đã qua 2. Thiết lập plugin WP Store Locator

Khi bạn đã tạo khóa API, bạn nên truy cập Cửa hàng định vị »Cài đặt trang để cấu hình plugin.

Nhập các khóa từ Google Maps

Nhập trình duyệt Google Maps và các khóa API trên máy chủ bạn đã tạo trước đó. Sau đó chọn ngôn ngữ và khu vực của Bản đồ, rồi bấm Lưu Thay đổi để lưu cài đặt của bạn.

Bây giờ bạn phải cuộn xuống trang cài đặt đến phần “Bản đồ” và nhập điểm bắt đầu cho bản đồ. Điểm bắt đầu này có thể là một thành phố hoặc một quốc gia, vì vậy người dùng có thể thấy dấu trang ở những nơi khác nhau.

Thêm một điểm bắt đầu cho bản đồ cửa hàng của bạn

Có nhiều tùy chọn khác trên trang cài đặt bao gồm kiểu bản đồ, mức thu phóng tiêu chuẩn, loại bản đồ, bán kính tìm kiếm, quốc gia, v.v. Bạn có thể xem lại và tùy chỉnh chúng theo nhu cầu của mình.

Khi bạn đã hoàn tất, đã đến lúc thêm địa điểm.

Anh ấy đã qua 3. Thêm địa điểm cửa hàng

Đi đến Đại định vị »Cửa hàng mới để thêm vị trí đầu tiên của bạn. Trang Cửa hàng mới sẽ trông giống như mục nhập hoặc trình chỉnh sửa trang mặc định trong WordPress.

Địa chỉ cửa hàng

Nhập tiêu đề cho cửa hàng của bạn, sau đó cuộn xuống phần “Chi tiết cửa hàng”. Từ đây, bạn phải nhập địa chỉ cửa hàng của bạn.

Bạn sẽ thấy một bản đồ ở cột bên phải, nhưng nó sẽ không tự động cập nhật đến địa chỉ bạn đã nhập. Bạn phải nhấp vào nút Xuất bản để lưu vị trí của bạn. Sau đó làm mới trang để bản đồ trỏ đến địa chỉ bạn đã nhập.

Bây giờ lặp lại quá trình để thêm các vị trí cửa hàng khác. Bạn có thể thêm nhiều địa điểm cửa hàng như bạn muốn.

Anh ấy đã qua 4. Thêm bản đồ của cơ sở cửa hàng trong WordPress

Để xem công cụ định vị cửa hàng của bạn trên trang WordPress, chỉ cần tạo một trang mới hoặc chỉnh sửa trang hiện có nơi bạn muốn xem bản đồ.

Trên màn hình chỉnh sửa xuất bản, bạn phải thêm khối “Mã ngắn” vào khu vực chỉnh sửa xuất bản của mình. Sau đó thêm (Wpl) mã thẻ bên trong nó.

Lưu trữ mã định vị

Bây giờ bạn có thể lưu hoặc xuất bản trang của mình và nhấp vào nút xem trước để xem cửa hàng Google Maps hoạt động.

Xem trước trình đọc bản đồ cho cơ sở bán lẻ

Nó hiển thị các điểm đánh dấu bản đồ của bạn cho từng vị trí cửa hàng và bắt đầu bản đồ từ điểm bắt đầu mong muốn của bạn. Ví dụ, trên bản đồ này, nó tập trung vào thành phố West Palm Beach và hiển thị hai vị trí cửa hàng trên bản đồ.

Đó là tất cả những gì chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm vị trí cửa hàng Google Maps vào WordPress. Bạn cũng có thể muốn xem danh sách các công cụ Google miễn phí của chúng tôi mà mọi chủ sở hữu trang web nên sử dụng.

Nếu bạn thích bài viết này, đăng ký kênh của chúng tôi YouTube để xem video hướng dẫn WordPress. Bạn cũng có thể tìm thấy chúng tôi tại Twitter và Facebook.