Thêm nội dung như bản đồ, âm thanh và video vào trang web của bạn là một cách tuyệt vời để tạo trải nghiệm tương tác cho khách truy cập của bạn. Ngoài ra, đó là một cách hữu ích để cung cấp cho người dùng thông tin họ cần để tìm vị trí doanh nghiệp của bạn
Trong bài viết này, chúng tôi chia sẻ một số phương pháp để thêm bản đồ Google tùy chỉnh vào trang web WordPress của bạn
Trước khi chúng tôi bắt đầu, những lợi ích của việc nhúng bản đồ tương tác trên trang web của bạn là gì?
Tại sao bạn nên nhúng Google Maps vào trang web của mình?
Bạn đã biết rằng việc nhúng Google my Maps vào trang web của bạn là một cách tuyệt vời để làm cho trang web của bạn có tính tương tác. Nhưng có một số lợi ích khác có thể giúp doanh nghiệp của bạn phát triển
Ví dụ: bản đồ Google được nhúng có thể
- Giúp khách hàng tìm thấy cửa hàng gần nơi họ sống với chế độ xem phố
- Hiển thị cho người tham dự vị trí thực tế của một sự kiện
- Minh họa các bài đăng trên blog thảo luận về các địa điểm cụ thể
- Hiển thị vị trí trụ sở chính của bạn
Với một chút sáng tạo, bạn có thể sử dụng bản đồ tương tác của Google để đưa trang web của mình vào cuộc sống. Và kết quả là, phục vụ cả sự phát triển kinh doanh và khách hàng tiềm năng của bạn
Nhận khóa API Google Maps
Trước khi nhúng bản đồ Google vào trang web WordPress của bạn, bạn nên tạo khóa API bản đồ Google mà Google hiện yêu cầu. Để nhận khóa Google API, hãy làm theo các bước bên dưới
1. Truy cập Bảng điều khiển nền tảng đám mây của Google. Bạn có thể tạo một tài khoản miễn phí nếu bạn chưa có tài khoản
2. Chọn một dự án hiện có hoặc tạo một dự án mới
3. Chọn Maps Embed API và nhấp vào Enable trên màn hình sau
4. Bây giờ hãy điều hướng đến thanh bên Thông tin xác thực, nhấp vào tùy chọn +Tạo thông tin xác thực và chọn Khóa API
Bây giờ bạn sẽ có một khóa API đang hoạt động cho Google Maps
Bây giờ, hãy đi sâu vào việc chỉ cho bạn cách nhúng Google Maps vào WordPress
1. Cách nhúng Google Maps vào trang đích WordPress
Phương pháp đầu tiên trong hướng dẫn này chỉ cho bạn cách nhúng bản đồ Google vào trang đích trong WordPress. Trang đích là cách tốt nhất để chuyển đổi lưu lượng truy cập được nhắm mục tiêu thành khách hàng tiềm năng và bán hàng
Và plugin trang đích WordPress tốt nhất cho công việc này là SeedProd
SeedProd là trình tạo trang đích kéo và thả cho phép bạn tạo các trang đích và chủ đề WordPress có tỷ lệ chuyển đổi cao mà không cần viết mã. Nó đi kèm với hàng trăm mẫu trang đích đáp ứng mà bạn có thể dễ dàng tùy chỉnh trong trình chỉnh sửa giao diện người dùng trực quan
Ngoài ra, SeedProd có rất nhiều khối nội dung thông minh để thêm nội dung thân thiện với người dùng vào trang của bạn, bao gồm
Do đó, bạn có thể nhanh chóng tạo các trang đích mà không cần thuê nhà phát triển
Thực hiện theo các bước bên dưới để tìm hiểu cách nhúng Google Maps vào các trang đích WordPress với SeedProd
1. Tải xuống Plugin trang đích SeedProd
Bước đầu tiên là tải plugin SeedProd về máy tính của bạn. Mặc dù SeedProd cung cấp phiên bản miễn phí để tạo trang đích miễn phí trong WordPress, nhưng chúng tôi sẽ sử dụng phiên bản chuyên nghiệp – SeedProd Pro. Bằng cách đó, chúng tôi có thể sử dụng các khối nội dung nâng cao mà chúng tôi đã đề cập trước đó.
Vì vậy, hãy nhấp vào nút bên dưới để bắt đầu
Tiếp theo, cài đặt và kích hoạt SeedProd trên trang web của bạn. Nếu bạn cần trợ giúp về vấn đề này, bạn có thể làm theo hướng dẫn từng bước này để cài đặt plugin WordPress
Khi bạn đã cài đặt SeedProd, bạn sẽ thấy màn hình chào mừng yêu cầu mã cấp phép của bạn
Bạn có thể tìm khóa của mình bằng cách đăng nhập vào tài khoản SeedProd của mình và nhấp vào liên kết Xem khóa cấp phép, chi tiết và tải xuống
Sau khi sao chép khóa của bạn, hãy dán khóa đó vào trường Khóa cấp phép trên màn hình chào mừng SeedProd của bạn và nhấp vào nút Xác minh khóa
2. Tạo một trang đích mới
Bây giờ bạn có thể bắt đầu tạo trang đầu tiên của mình, vì vậy hãy cuộn xuống màn hình chào mừng và nhấp vào nút Tạo trang đầu tiên của bạn. Sau khi nhấp vào nút đó, bạn sẽ chuyển đến bảng điều khiển trang đích của SeedProd
Trên trang này, trước tiên bạn sẽ thấy các chế độ trang đích khác nhau có sẵn trong SeedProd, bao gồm
Các chế độ trang của SeedProd cho phép bạn nhanh chóng bật các trang đích khác nhau chỉ bằng một cú nhấp chuột.
Chẳng hạn, bạn có thể nhanh chóng kích hoạt màn hình bảo trì khi đang thực hiện các cập nhật nhỏ. Hoặc bạn có thể bật màn hình đăng nhập WordPress tùy chỉnh để chào mừng người dùng đã đăng ký
Lợi ích chính của chế độ trang là bạn sẽ không cần cài đặt các plugin WordPress riêng biệt để có được chức năng này. SeedProd đã tích hợp tất cả vào một plugin nhỏ gọn duy nhất
Bên dưới phần chế độ trang là danh sách mọi trang bạn tạo bằng SeedProd. Hiện tại, bạn sẽ không thấy bất kỳ trang nào được liệt kê
Để tạo trang đầu tiên của bạn, hãy nhấp vào nút Tạo trang đích mới
Nhấp vào nút sẽ đưa bạn đến màn hình mẫu trang đích của SeedProd. Tại đây, bạn sẽ thấy hàng trăm mẫu được thiết kế chuyên nghiệp mà bạn có thể sử dụng làm nền tảng cho thiết kế trang của mình
Dọc phía trên cùng là các tab khác nhau để lọc các thiết kế, như
Di chuột qua bất kỳ thiết kế nào bạn thích và nhấp vào biểu tượng dấu tích để nhập mẫu đó
Chúng tôi sẽ sử dụng mẫu Cơ hội cho hướng dẫn này, bạn có thể tìm thấy mẫu này trong tiêu đề Bóp khách hàng tiềm năng
Sau khi nhấp vào biểu tượng đánh dấu để nhập mẫu của bạn, bạn sẽ thấy một cửa sổ bật lên yêu cầu bạn nhập tên trang đích. Vì tên trang của bạn được gán tự động cho URL trang đích của bạn, nên hãy đặt tên cho tên đó theo ý nghĩa đối với khách truy cập của bạn
Bạn có thể dễ dàng thay đổi cài đặt này sau nếu mắc lỗi. Vì vậy, hãy tiếp tục và nhấp vào nút Lưu và Bắt đầu Chỉnh sửa Trang
3. Tùy chỉnh thiết kế trang của bạn
Khi bạn nhập thiết kế của mình, nó sẽ mở trong trình chỉnh sửa trang trực quan của SeedProd. Trình chỉnh sửa có thiết kế 2 bảng thân thiện với người dùng để giúp việc tùy chỉnh trang của bạn trở nên cực kỳ dễ dàng
- Bảng điều khiển bên trái. Các khối và phần trang để xây dựng và tùy chỉnh trang của bạn
- bảng bên phải. Xem trước trang đích của bạn trông như thế nào trong thời gian thực
Dọc theo đầu trình chỉnh sửa là một menu điều hướng để nhanh chóng chuyển đổi giữa thiết kế, tích hợp và cài đặt trang của bạn
Và ở dưới cùng của bảng điều khiển bên trái là một số biểu tượng khác để giúp bạn điều hướng trang của mình, bao gồm
- Thiết lập toàn cầu. Kiểm soát màu sắc, phông chữ và nền của trang của bạn trên toàn cầu
- Điều hướng bố cục. Điều hướng nhanh đến các phần khác nhau trong thiết kế của bạn
- Lịch sử sửa đổi. Xem trước và khôi phục phiên bản cũ hơn của thiết kế của bạn
- Hoàn tác và làm lại. Hoàn tác các thay đổi thiết kế hoặc làm lại chúng một cách nhanh chóng
- Xem trước trên thiết bị di động. Xem trước thiết kế di động của trang đích của bạn
Các cài đặt ở trên giúp dễ dàng tùy chỉnh mẫu của bạn cho phù hợp với mục tiêu tiếp thị, nội dung và thương hiệu của bạn
Ví dụ: nhấp vào tiêu đề trang cho phép bạn thay đổi văn bản, màu sắc, v.v. nhanh hơn và xem các thay đổi trong thời gian thực
Hoặc, nếu bạn muốn thay đổi hình ảnh mặc định, bạn chỉ cần nhấp vào hình ảnh để xem cài đặt ở bên trái. Sau đó, bạn có thể thay thế nó bằng một ảnh từ máy tính, thư viện phương tiện hoặc chọn một ảnh lưu trữ miễn phí.
4. Nhúng khối trang đích Google Maps
Việc thêm tiện ích google maps vào trang đích của bạn rất đơn giản
Từ bảng điều khiển bên trái, hãy nhấp vào khối Google Maps. Sau đó, bạn có thể kéo nó vào phần của trang mà bạn muốn nó di chuyển
Nhấp vào cài đặt khối Google Map cho phép bạn nhanh chóng nhập vị trí bạn muốn hiển thị. Sau đó, bạn có thể chọn cách phóng to bản đồ, thay đổi căn chỉnh và điều chỉnh độ rộng bản đồ.
Chọn tab Nâng cao cho phép bạn chọn các kiểu đường viền khác nhau và điều chỉnh khoảng cách xung quanh bản đồ tùy chỉnh của mình
Tiếp tục tùy chỉnh trang đích của bạn cho đến khi bạn hài lòng với giao diện của nó. Hãy nhớ nhấp vào nút Lưu màu xanh lá cây ở góc trên cùng bên phải để lưu các thay đổi của bạn
5. Định cấu hình cài đặt của bạn
Với thiết kế của bạn, bạn có thể định cấu hình một vài cài đặt trước khi xuất bản trang đích của mình
SeedProd, cho phép bạn kết nối trang đích với danh sách email của mình một cách dễ dàng. Vì vậy, hãy nhấp vào Kết nối ở đầu màn hình để xem các dịch vụ tiếp thị qua email phổ biến. Điều này giúp dễ dàng yêu cầu người dùng đăng ký nhận bản tin của bạn và tự động thêm họ vào danh sách email của bạn
Sau khi kết nối danh sách email của bạn, hãy nhấp vào tab Cài đặt trang để có thêm tùy chọn
SeedProd cung cấp 5 cài đặt mà bạn có thể định cấu hình, nhưng điều này thường phụ thuộc vào loại trang bạn tạo và gói SeedProd hiện tại của bạn
- Chung. Chỉnh sửa tên trang và URL của bạn hoặc chuyển đổi giữa xuất bản và nháp
- SEO. Định cấu hình cài đặt SEO của bạn bằng plugin WordPress SEO
- phân tích. Theo dõi hiệu suất trang của bạn bằng plugin Google Analytics
- kịch bản. Thêm tập lệnh tùy chỉnh vào đầu trang, nội dung và chân trang của trang của bạn, chẳng hạn như pixel theo dõi và nhắm mục tiêu lại
- Tên miền tùy chọn. Cung cấp cho bất kỳ trang đích nào miền tùy chỉnh không được kết nối với trang web hiện tại của bạn
Sau khi định cấu hình cài đặt của bạn, hãy lưu các thay đổi của bạn và nhấp quay lại tab Thiết kế
6. Xuất bản trang đích của bạn
Trước khi xuất bản trang của bạn, điều quan trọng là đảm bảo thiết kế của bạn thân thiện với thiết bị di động. Nếu không, người dùng di động sẽ gặp khó khăn khi điều hướng trang của bạn và bạn có thể mất khách hàng tiềm năng và chuyển đổi
May mắn thay, SeedProd bao gồm tùy chọn xem trước trên thiết bị di động để kiểm tra xem trang của bạn có thân thiện với thiết bị di động không. Chỉ cần nhấp vào biểu tượng điện thoại di động ở cuối màn hình của bạn
Từ đó, bạn có thể xem trang của mình trông như thế nào trên thiết bị di động và thay đổi bất kỳ thứ gì có giao diện không chính xác hoặc hoạt động không chính xác
Khi mọi thứ đều ổn, hãy nhấp vào mũi tên xuống bên cạnh nút Lưu màu xanh lá cây và nhấp vào Xuất bản
Tiếp theo, bạn sẽ thấy một cửa sổ cho bạn biết trang của bạn đã được xuất bản
Để xem bản xem trước trực tiếp, hãy tiếp tục và nhấp vào nút Xem Trang Trực tiếp
Và đây là bản xem trước về diện mạo của bản đồ Google của bạn
công việc tuyệt vời. Bây giờ bạn đã biết cách thêm bản đồ google vào trang đích WordPress của mình
Nhưng nếu bạn cần thêm bản đồ vào bài đăng WordPress của mình thì sao?
2. Cách thêm Google Maps vào bài đăng trên WordPress [Với Plugin]
Chúng tôi khuyên bạn nên sử dụng phương pháp này nếu bản đồ đóng vai trò quan trọng trong doanh nghiệp của bạn và bạn cần sử dụng chúng trong nhiều bài đăng và trang trên trang web của mình. Một lần nữa, chúng tôi sẽ sử dụng một plugin WordPress và lần này, chúng tôi sẽ sử dụng MapPress Maps cho WordPress, một plugin Google Maps miễn phí trên wp
Vì vậy, hãy tiếp tục cài đặt và kích hoạt plugin trên bảng điều khiển WordPress của bạn để bắt đầu. Sau đó nhấp vào chỉnh sửa trên bài đăng hoặc trang bạn muốn nhúng bản đồ
Bên trong bài đăng hoặc trang của bạn, nhấp vào biểu tượng dấu cộng [+] trong trình chỉnh sửa khối [Gutenberg] để thêm khối WordPress mới. Từ đó, tìm kiếm khối Bản đồ MapPress và nhấp vào khối đó để thêm bản đồ vào bài đăng của bạn
Bây giờ hãy nhấp vào nút Thư viện bản đồ và trên màn hình tiếp theo, hãy chọn Thêm mới
Trên màn hình tiếp theo, bạn có thể nhập vị trí bản đồ ưa thích của mình vào thanh tìm kiếm và nhấp vào Lưu
Tiếp theo, nhấp vào liên kết Chèn vào Bài đăng để thêm bản đồ của bạn vào trình chỉnh sửa WordPress của bạn
Giờ đây, bạn có thể sử dụng bảng thả xuống Cài đặt bản đồ ở phía bên tay phải để thay đổi kích thước và thu phóng bản đồ Google của mình
Sau đó, nhấp vào Cập nhật hoặc Xuất bản để lưu các thay đổi của bạn và xem trước giao diện của bản đồ mới
3. Cách thêm thủ công Google Map trong WordPress
Tất nhiên, bạn có thể thêm bản đồ Google vào trang web WordPress của mình mà không cần sử dụng plugin. Bạn cần truy cập trang web Google Maps và tìm kiếm vị trí bạn muốn hiển thị để thực hiện việc này, chẳng hạn như công cụ định vị cửa hàng của bạn
Từ đó, nhấp vào biểu tượng chia sẻ và nhấp vào tab Nhúng bản đồ xuất hiện trong cửa sổ bật lên. Sau đó nhấp vào nút Sao chép HTML
Bây giờ hãy nhấp vào chỉnh sửa trên bất kỳ bài đăng hoặc trang nào trong WordPress. Bên trong trình chỉnh sửa khối WordPress, nhấp vào biểu tượng dấu cộng [+] để thêm khối mới và chọn tùy chọn HTML tùy chỉnh cho phép bạn thêm mã như iframe, mã ngắn, v.v.
Tiếp theo, dán mã nhúng Google maps vào khối HTML tùy chỉnh và nhấp vào Cập nhật để lưu bài đăng
Khi bạn xem trước bài đăng của mình, bản đồ của bạn sẽ trông giống như ví dụ bên dưới
Đó là nó
Bây giờ bạn đã biết cách nhúng Google Maps vào WordPress theo cách thủ công và với các plugin WordPress mạnh mẽ
Nếu bạn thích bài viết này, bạn cũng có thể thích hướng dẫn này về cách chỉnh sửa chân trang WordPress của bạn. Ngoài ra, hãy xem các nhà cung cấp dịch vụ lưu trữ WordPress hàng đầu này
Cảm ơn vì đã đọc. Vui lòng theo dõi chúng tôi trên YouTube, Twitter và Facebook để có thêm nội dung hữu ích nhằm phát triển doanh nghiệp của bạn