Tin tức và Phân Tích của tất cả các Thiết bị di động!

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

Bạn muốn thêm công cụ định vị 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 xác định vị trí trên bản đồ, tìm chỉ đường lái xe hoặc chia sẻ vị trí với bạn bè. Thêm một công cụ định vị 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 ngay lập tức có được sự tin tưởng của người dùng.

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

Mục lục

Cách thêm công cụ định vị cửa hàng Google Maps trong WordPressCách thêm công cụ định vị cửa hàng Google Maps trong 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 để truy xuất và hiển thị bản đồ. Nếu bạn muốn sử dụng plugin Google Maps, bạn sẽ cầ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 được thực hiện từ trang web của bạn.

Chúng tôi sẽ 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 dễ dàng 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 duy nhất trên trang web của họ.

Trước tiên, bạn phải 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 ghim trên bản đồ.

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

Hãy chắc chắn để đặt điểm đánh dấu ở vị trí chính xác. 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 sẻ ở 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 sẽ thấy vị trí tìm kiếm của mình trên bản đồ với mã HTML.

Sao chép mã nhúng từ Google MapsSao 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 đi qua 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 hiển thị bản đồ vị trí cửa hàng.

Thông thường, người dùng thêm bản đồ vị trí cửa hàng vào 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 tiếp theo, 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 trong WordPressThêm một khối HTML tùy chỉnh trong WordPress

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

Bản đồ để chèn mã trong WordPressBản đồ để chèn mã trong WordPress

Bây giờ bạn có thể chuyển sang tab xem trước để xem Google Maps được nhúng trong trang của bạn. Nó sẽ hiển thị vị trí cửa hàng được đánh dấu 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 đồVị trí cửa hàng được đánh dấu trên bản đồ

phương pháp 2. Thêm công cụ đị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 hiển thị nhiều vị trí cửa hàng trên bản đồ Google.

Đ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 chi tiết, 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 sẽ cần cung cấp thông tin thanh toán để sử dụng khóa API. Để biết giá cả và thông tin khác, hãy truy cập trang web Google Maps Platform.

Xong, 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 sẽ cần 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 và nó sẽ đư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ớiTạo một dự án mới

Bạn phải 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 sẽ 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 cung cấp một tiêu đề cho khóa API của mình để bạn 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.

Thiết lập khóa API trình duyệtThiết lập khóa API trình duyệt

Tiếp theo, bạn phải đặt “Hạn chế ứng dụng” trong “Tham chiếu HTTP”. Bên dưới đó, bạn phải đặt trường “Chấp nhận yêu cầu từ” trên tên miền của bạn theo định dạng sau.

https://example.com/*https: //*.example.com/* (nếu bạn đang 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 bây giờ sẽ lưu cài đặt của bạn và hiển thị cho bạn khóa trình duyệt. Bạn phải 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 trình duyệtSao chép khóa API trình duyệt

Tiếp theo, bạn phải 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à nó sẽ đưa bạn 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 tạo dự án một lần nữa. Tuy nhiên, 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ạnChọn dự án Google Maps của bạn

Sau đó, bạn sẽ được chuyển hướng đến trang cấu hình API. Cung cấ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Đặt giới hạn IP

Trong phần “Hạn chế ứng dụng”, bạn phải chọn Địa chỉ IP. Về cơ bản, chúng tôi đang bảo 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 sẽ cần yêu cầu nhà cung cấp dịch vụ lưu trữ WordPress của bạn cho bạn biết phạm vi IP được sử dụng bởi tài khoản lưu trữ của bạn. Nó sẽ có định dạng sau:

172.16.0.0/ 12

Sau đó, bạn cần 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 MapsNhập các khóa từ Google Maps

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

Bây giờ, bạn cần 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 xuất phát 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 các dấu trang nằm ở các vị trí khác nhau.

Thêm một điểm bắt đầu cho bản đồ định vị cửa hàng của bạnThêm một điểm bắt đầu cho bản đồ định vị 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 mặc định, loại bản đồ, bán kính tìm kiếm, quốc gia, v.v. Bạn có thể xem xét và điều chỉnh chúng theo nhu cầu của bạn.

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 Cửa hàng định vị »Cửa hàng mới trang để thêm vị trí đầu tiên của bạn. Trang Cửa hàng mới sẽ trông giống như bài đăng hoặc trình chỉnh sửa trang mặc định trong WordPress.

Địa chỉ cửa hàngĐịa chỉ cửa hàng

Cung cấp một 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, tuy nhiên nó sẽ không tự động cập nhật đến địa chỉ bạn đã nhập. Bạn sẽ cần nhấp vào nút Xuất bản để lưu vị trí của bạn. Sau đó, làm mới trang và bản đồ sẽ trỏ đến địa chỉ bạn đã cung cấ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 bao nhiêu địa điểm cửa hàng tùy thích.

Anh ấy đã qua 4. Thêm bản đồ định vị cửa hàng trong WordPress

Để hiển thị 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 hiển thị 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 gọn ngắn gọn vào khu vực chỉnh sửa xuất bản của bạn. Sau đó thêm [wpls] shortcode bên trong nó.

Lưu mã định vị ngắnLưu mã định vị ngắn

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ông cụ định vị cửa hàng Google Maps.

Xem trước bản đồ định vị cửa hàngXem trước bản đồ định vị cửa hàng

Nó sẽ 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 ưa thích 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 công cụ định vị 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.