Cách xem phiên bản di động của trang web WordPress từ máy tính để bàn

Bạn có muốn xem trước phiên bản di động của trang web WordPress của mình không? Xem trước bố cục trên thiết bị di động giúp bạn xem trang web của mình trông như thế nào trên thiết bị di động.

Other :

Mặc dù bạn chắc chắn có thể xem trang web trực tiếp của mình trên điện thoại, nhưng điều này không giúp ích gì trong giai đoạn phát triển.

Ngay cả khi trang web của bạn đang hoạt động, việc xem phiên bản dành cho thiết bị di động trên máy tính để bàn thường dễ dàng hơn, vì vậy bạn có thể nhanh chóng thực hiện các thay đổi và xem hiệu ứng của chúng.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn hai cách đơn giản để dễ dàng xem trước bố cục di động của trang web WordPress của bạn mà không cần chuyển sang các thiết bị khác nhau.

Preview the mobile layout of your website

Tại sao bạn nên xem trước bố cục trên thiết bị di động của mình

Hơn 50% khách truy cập trang web của bạn sẽ sử dụng điện thoại di động của họ để truy cập trang web của bạn. Khoảng 3% sẽ sử dụng máy tính bảng.

Điều này có nghĩa là có một trang web trông tuyệt vời trên thiết bị di động là điều cần thiết.

Trên thực tế, thiết bị di động quan trọng đến mức Google hiện đang sử dụng chỉ số “ưu tiên thiết bị di động” cho thuật toán xếp hạng trang web của họ.

Ngay cả khi bạn đang sử dụng chủ đề WordPress đáp ứng, bạn vẫn cần kiểm tra giao diện trang web của mình trên thiết bị di động. Bạn thậm chí có thể muốn tạo các phiên bản khác nhau của các trang đích chính được tối ưu hóa cho nhu cầu của người dùng di động (sẽ tìm hiểu thêm về điều này sau).

Trong bài viết này, chúng tôi sẽ đề cập đến hai phương pháp khác nhau để kiểm tra giao diện trang web của bạn trên thiết bị di động bằng trình duyệt trên máy tính để bàn.

Điều quan trọng cần lưu ý là hầu hết các bản xem trước trên thiết bị di động sẽ không hoàn toàn hoàn hảo vì có rất nhiều kích thước và trình duyệt màn hình di động khác nhau. Thử nghiệm cuối cùng của bạn phải luôn là xem xét trang web của bạn trên một thiết bị di động thực tế.

Đăng ký WPBeginner

1. Sử dụng Công cụ tùy chỉnh chủ đề của WordPress

Bạn có thể sử dụng công cụ tùy chỉnh chủ đề WordPress để xem trước phiên bản di động của trang web WordPress của mình.

Đơn giản chỉ cần đăng nhập vào bảng điều khiển WordPress của bạn và đi đến Giao diện » Màn hình tùy chỉnh.

WordPress dashboard showing where to find Appearance - Customize

Thao tác này sẽ mở ra tùy biến chủ đề WordPress. Tùy thuộc vào chủ đề bạn đang sử dụng, bạn có thể thấy các tùy chọn hơi khác nhau trong menu bên trái tại đây:

WordPress theme customizer (desktop view)

Ở cuối màn hình, nhấp vào biểu tượng điện thoại di động. Sau đó, bạn sẽ thấy bản xem trước về giao diện trang web của mình trên thiết bị di động.

Switching to mobile view in the theme customizer

Lưu ý: Các biểu tượng chỉnh sửa màu xanh lam chỉ hiển thị trong trình xem trước. Bạn sẽ không thấy những thứ này trên trang web trực tiếp của mình.

Phương pháp xem trước phiên bản dành cho thiết bị di động này đặc biệt hữu ích khi bạn chưa tạo xong blog của mình hoặc khi blog đang ở chế độ bảo trì.

Bạn có thể thực hiện các thay đổi và kiểm tra giao diện của chúng trước khi đưa chúng vào hoạt động.

2. Sử dụng Chế độ thiết bị DevTools của Google Chrome

Trình duyệt Google Chrome có một bộ công cụ dành cho nhà phát triển cho phép bạn thực hiện các kiểm tra khác nhau trên bất kỳ trang web nào, bao gồm cả việc xem bản xem trước trang web của bạn trông như thế nào trên thiết bị di động.

Chỉ cần mở trình duyệt Google Chrome trên máy tính để bàn của bạn và truy cập trang bạn muốn kiểm tra.

Đây có thể là bản xem trước của một trang trên trang web của bạn hoặc thậm chí có thể là trang web của đối thủ cạnh tranh của bạn.

Tiếp theo, bạn cần nhấp chuột phải vào trang và chọn ‘Kiểm tra’.

Selecting the Inspect option in Chrome

Một ngăn mới sẽ mở ra ở phía bên tay phải, như sau:

The default desktop view when inspecting your site in Chrome

Trong chế độ xem dành cho nhà phát triển, bạn sẽ có thể thấy mã nguồn HTML của trang web của mình.

Tiếp theo, nhấp vào nút ‘Chuyển đổi Thanh công cụ Thiết bị’ để thay đổi sang chế độ xem di động.

Inspecting the mobile view of your site in Chrome

Bạn sẽ nhận thấy bản xem trước trang web của mình sẽ thu nhỏ lại với kích thước màn hình di động.

Bạn cũng sẽ nhận thấy sự thay đổi giao diện trang web của mình đối với chế độ xem di động. Trong ví dụ trên, menu đã thu gọn và biểu tượng Tìm kiếm đã chuyển sang bên trái thay vì bên phải của menu.

Khi bạn chạy con trỏ chuột qua chế độ xem trên thiết bị di động của trang web của mình, nó sẽ trở thành một vòng tròn, như thế này:

The circular mouse cursor in Chrome's Inspect view

Bạn có thể di chuyển vòng tròn này bằng chuột để bắt chước màn hình cảm ứng trên thiết bị di động.

Bạn cũng có thể giữ phím ‘Shift’, sau đó nhấp và di chuyển chuột để mô phỏng thao tác chụm màn hình di động để phóng to hoặc thu nhỏ.

Phía trên chế độ xem di động của trang web của bạn, bạn sẽ thấy một số tùy chọn bổ sung.

Additional mobile options for inspecting your site in Chrome

Những điều này cho phép bạn làm nhiều việc bổ sung. Bạn có thể kiểm tra trang web của mình trông như thế nào trên các loại điện thoại thông minh khác nhau. Bạn cũng có thể mô phỏng hiệu suất trang web của mình trên kết nối 3G nhanh hoặc chậm. Bạn thậm chí có thể xoay màn hình di động bằng biểu tượng xoay.

Cách tạo nội dung cụ thể cho thiết bị di động trong WordPress

Điều quan trọng là trang web của bạn phải có thiết kế đáp ứng để khách truy cập trên thiết bị di động có thể dễ dàng điều hướng trang web của bạn.

Nhưng chỉ đơn giản là có một trang web đáp ứng có thể không đủ xa. Người dùng trên thiết bị di động thường tìm kiếm những thứ khác với người dùng Máy tính để bàn.

Nhiều chủ đề và plugin cao cấp cho phép bạn tạo các phần tử hiển thị khác nhau trên máy tính để bàn so với thiết bị di động. Bạn cũng có thể sử dụng plugin trình tạo trang như Beaver Builder để chỉnh sửa các trang đích của mình ở chế độ xem trên thiết bị di động.

Bạn chắc chắn nên tạo nội dung dành riêng cho thiết bị di động cho các biểu mẫu tạo khách hàng tiềm năng của mình. Trên thiết bị di động, những thiết bị này sẽ yêu cầu thông tin tối thiểu, lý tưởng nhất chỉ là một địa chỉ email. Chúng cũng phải trông đẹp và dễ đóng.

Một cách tuyệt vời để tạo cửa sổ bật lên cụ thể trên thiết bị di động và biểu mẫu tạo khách hàng tiềm năng là với OptinMonster. Đây là plugin bật lên WordPress mạnh mẽ nhất và công cụ tạo khách hàng tiềm năng trên thị trường.

Họ có các quy tắc hiển thị nhắm mục tiêu theo thiết bị cụ thể cho phép bạn hiển thị các chiến dịch khác nhau cho người dùng thiết bị di động và người dùng máy tính để bàn. Bạn thậm chí có thể kết hợp điều đó với tính năng nhắm mục tiêu theo địa lý của OptinMonster và các tính năng cá nhân hóa nâng cao khác để có được chuyển đổi tốt nhất.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách xem trước bố cục trên thiết bị di động của trang web của bạn. Bạn cũng có thể muốn xem bài viết của chúng tôi về các plugin tốt nhất để chuyển đổi một trang WordPress thành một ứng dụng dành cho thiết bị di động.

Phần thưởng: xem lựa chọn các dịch vụ điện thoại doanh nghiệp tốt nhất của chúng tôi để bạn có thể thêm nút bấm để gọi cho người dùng di động.

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

Free Download Cách xem phiên bản di động của trang web WordPress từ máy tính để bàn :

Trong khi chờ đợi, vui lòng nhấn vao quảng cáo phía trên để tác giả có phí duy trì website , xin cám ơn ^^^

In the meantime, please click on the ad so that the author has a website maintenance fee, very very very thank you ^^^ !!!!

Join our official telegram group and channel for latest updates.

Để lại một bình luận

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

© 2021 All Rights Reserved | Shared by Tainguyenwordpress