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

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 để tuỳ chọn fix những lỗi có thể xảy ra.

Việc tưởng chừng như không mấy quan trọng này lại cực kỳ quan trọng với những người làm DEV. Trong bài viết này,mình sẽ chỉ cho bạn những cách đơn giản nhất để xem trước bố cục trước giao diện di động của trang web WordPress mà không cần chuyển sang các thiết bị khác nhau.

Xem trước bố cục di động của trang web của bạn

1. Tại sao bạn nên xem trước bố cục di động của mình

Hơn 50% khách truy cập trang web trên thé giới 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 có giao diện 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 reponsive , 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. Thậm chí có thể  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.

1. Sử dụng Trình 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 website của bạn và đi đến Giao diện » Customize .

Bảng điều khiển WordPress hiển thị nơi tìm Giao diện - Tùy chỉnh

 

Tùy biến chủ đề WordPress (chế độ xem trên màn hình)

Ở 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.

Chuyển sang chế độ xem trên thiết bị di động trong tùy biến chủ đề

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.>>> Xem thêm dịch vụ mua hosting chất lượng cao

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

Chỉ cần mở trình duyệt Google Chrome trên máy tính của bạn và truy cập trang bạn muốn kiểm tra – Tiếp theo, bạn cần nhấp chuột phải vào trang và chọn ‘Kiểm tra’.

Chọn tùy chọn Kiểm tra trong Chrome

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

Chế độ xem màn hình mặc định khi kiểm tra trang web của bạn trong Chrome

Ở chế độ xem 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.

Kiểm tra chế độ xem trên thiết bị di động của trang web của bạn trong Chrome

 

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.

Các tùy chọn di động bổ sung để kiểm tra trang web của bạn trong Chrome

OK như vậy là đã xong – chúc các bạn thành công.