Hàm wp_is_mobile() xác định thiết bị di động trong WordPress
Sơ đồ trang
Vào mùa xuân năm 2012, phiên bản WordPress 3.4 đã được phát hành. Ngoài việc giới thiệu tùy biến theme và khả năng tự động nhúng tweet, phiên bản 3.4 còn bổ sung một chức năng mà nhà phát triển có thể sử dụng để kiểm tra xem khách truy cập trang web có đang kết nối qua thiết bị di động như điện thoại thông minh hoặc máy tính bảng.
Khi chức năng này wp_is_mobile() xuất hiện, “Màn hình Retina” nổi tiếng của Apple dành cho iPhone 4 chỉ có độ phân giải 640 x 960 pixel. Vài tháng sau khi phát hành WordPress 3.4, màn hình của iPhone 5 đạt 640 x 1136 pixel, vẫn còn một chặng đường dài so với màn hình điện thoại thông minh và máy tính bảng hiện đại vốn làm mờ ranh giới giữa màn hình di động và máy tính để bàn.
Vậy wp_is_mobile() ngày nay nó còn hữu ích không?
Chức năng của hàm wp_is_mobile()
Vào năm 2012, trình duyệt hỗ trợ các truy vấn phương tiện CSS cho phép thiết kế web đáp ứng tương đối mới. (Đối với người dùng trình duyệt Internet Explorer của Microsoft, đây thực sự là một công nghệ mới!) Nhưng wp_is_mobile() mục đích không phải là điều chỉnh bố cục trang cho phù hợp với các kích thước khung nhìn khác nhau.
Chức năng này không phân biệt giữa điện thoại di động và máy tính bảng và hoàn toàn không tính đến các pixel trên trình duyệt của khách truy cập. Thay vào đó, wp_is_mobile() nó được tạo ra như một công cụ cho phép các nhà phát triển tối ưu hóa băng thông khi phản hồi với các thiết bị di động thường thiếu hiệu suất và người dùng có thể phải trả phí truyền dữ liệu cho các nhà khai thác Internet.
Điện thoại và máy tính bảng ngày nay mạnh hơn nhiều máy tính bàn vào năm 2012, do đó việc điều chỉnh băng thông có thể không còn quan trọng nữa, nhưng một chức năng đơn giản chia thế giới thành hai phần vẫn có chỗ đứng của nó: thiết bị di động và các thiết bị khác.
Hàm wp_is_mobile() đang hoạt động như thế nào?
Các chức năng của WordPress wp_is_mobile() được trả về khi thực hiện các yêu cầu từ hầu hết các trình duyệt trên điện thoại thông minh và máy tính bảng (bao gồm cả Kindle). Vì vậy, một ví dụ kinh điển về hàm này là tạo ra các luồng nội dung khác nhau, code PHP đơn giản như sau:
Bài viết liên quan
<?php if( wp_is_mobile()){ ?>
<p>Nội dung sẽ hiển thị trên thiết bị di động</p>
<?php } else { ?>
<p>Nội dung sẽ hiển thị trên desktops (and laptops).</p>
<?php } ?>
Điều chỉnh nội dung thông qua việc phát hiện thiết bị
Truy vấn phương tiện CSS và các công nghệ khác cho phép thiết kế web đáp ứng có thể giúp bố cục trang thích ứng với các kích thước và hướng màn hình khác nhau. Nhưng chúng sẽ không giúp bạn giao tiếp với khách truy cập trang web của bạn với tư cách là người dùng thiết bị di động hoặc máy tính để bàn .
Ví dụ: bạn biết rằng người dùng máy tính để bàn có thể “nhấp” vào các thành phần trang web bằng chuột, trong khi người dùng thiết bị di động có thể “chạm”. Người dùng máy tính để bàn có thể “nhấp chuột phải” vào liên kết để mở liên kết đó trong cửa sổ trình duyệt mới. Trong khi đó, người dùng di động có thể “nhấn và giữ” để bắt đầu tác vụ tương tự. Chỉ đơn giản thông báo cho người dùng cách điều hướng một trang web (chẳng hạn như trong tài liệu trợ giúp) có thể đồng nghĩa với việc sử dụng sai thuật ngữ.
Đây là cách chúng tôi kết hợp nó wp_is_mobile() với shortcode WordPress để hỗ trợ đầu ra chi tiết trên thiết bị di động hoặc máy tính để bàn theo cách mà người chỉnh sửa trang web dễ dàng sử dụng.
Chúng tôi sẽ sử dụng tính năng phát hiện trên thiết bị di động/máy tính để bàn kết hợp với WordPress add_shortcode() và do_shortocde() để tạo mã ngắn mà người chỉnh sửa có thể sử dụng trong bài viết của họ.
/**
* Add responsive shortcodes
* Usage: [desktop]Desktop content[/desktop]
* [mobile]Mobile content[/mobile]
*/
add_shortcode('desktop', function($atts, $content = null) {
return !wp_is_mobile() ? do_shortcode($content) : '';
});
add_shortcode('mobile', function($atts, $content = null) {
return wp_is_mobile() ? do_shortcode($content) : '';
});
Code này tạo ra các shortcode [desktop] và [mobile] (và thẻ đóng của chúng) mà bạn có thể sử dụng trong các bài đăng hoặc trang nào bạn muốn.
Ví dụ trực quan về cách sử dụng
[desktop]Nội dung sẽ hiển thị trên desktop[/desktop] [mobile]Nội dung sẽ hiển thị trên mobile[/mobile]
Hàm wp_is_mobile() và cache WordPress
Nếu yêu cầu đầu tiên đến từ thiết bị di động, nội dung được lưu trong bộ nhớ đệm sẽ được wp_is_mobile() sửa đổi để phù hợp với người dùng di động. Mọi yêu cầu tiếp theo tới trang sẽ phân phát nội dung di động, ngay cả đối với người dùng máy tính để bàn, cho đến khi xóa bộ nhớ đệm.
Tuy nhiên nhiều plugin cache ví dụ WP-ROCKET hoặc Litespeet sẽ cache sai và làm lẫn lộn nội dung khi bạn sử dụng hàm wp_is_mobile() nếu bạn không bật chế độ phân chia cache trên 2 thiết bị trong phần cài đặt plugins
Hạn chế của hàm wp_is_mobile()
Hàm wp_is_mobile() chỉ xác định được thiết bị di động hoặc desktop và không xác định được các thiết bị như tablets… vì vậy nếu bạn muốn check người dùng truy cập bằng tablets thì không thể.
Để giải quyết vấn đề này bạn có thể sử dụng plugin Mobile Detect để check chính xác hơn so với hàm wp_is_mobile(), đa số các dự án tôi sẽ sử dụng plugin Mobile Detect thay vì hàm plugin wp_is_mobile()
Ngoài ra có 1 plugin ăn liền dành cho người không có kiến thức lập trình là plugin Specific Content For Mobile bạn có thể thử để tạo ra 2 phiên bản nội dung web cho di động và desktop
Kết luận
Chức năng của WordPress wp_is_mobile() có vẻ lỗi thời nhưng bạn có thể thấy rằng tính năng phát hiện “Thiết bị di động hoặc Máy tính để bàn” giúp bạn tạo trải nghiệm tốt hơn cho tất cả khách truy cập vào trang web của mình mà bạn nên lưu tâm để tăng trải nghiệm trên website của mình
Đừng quên, nếu bạn muốn có được hiệu suất tốt nhất từ các đường dẫn trên thiết bị di động và máy tính để bàn, bạn sẽ cần thiết lập bộ đệm riêng cho nội dung khác nhau mà bạn tạo.
Bạn có wp_is_mobile() hay 1 trong 2 plugin mà tôi đã giới thiệu ở trên?
Bài viết liên quan
