Nội dung
- 1 Phát hiện hệ điều hành Platform Phát hiện hệ điều hành Platform
- 2 Đối với WordPress Đối với WordPress
- 2.1 Sử dụng shortcode – phát hiện thiết bị Sử dụng shortcode – phát hiện thiết bị
- 2.2 Sử dụng hàm phát hiện thiết bị mobile Sử dụng hàm phát hiện thiết bị mobile
Phát hiện thiết bị người dùng mobile là cách bạn chuyển giao diện mobile của trang web khi người dùng sử dụng thiết bị di động hay máy tính bảng lướt website của bạn. Có nhiều pluống hỗ trợ phát hiện thiết bị di động cho wordpress cũng như mã nguồn khác. Nhưng trong bài viết này mình không nói chi tiết về cách sử dụng plugin để tạo giao diện mobile để chạy trên thiết bị di động, mà mình tìm được một thư viện PHP giúp bạn phát hiện ra chính xác loại thiết bị trong khi duyệt trang web.
Thư viện mình nói tới ở trên chính là Mobile Detect. Mobile Detect là một lớp thư viện PHP sử dụng để phát hiện thiết bị mobile bao gồm cả tablets. Nó sử dụng chuỗi User-Agent ở HTTP headers giúp phân biệt giữa môi trường mobile và desktop.
Tải thư viện Mobile Detect tại đây. Nếu không tải được thử với link này //app.box.com/s/f8titfen5ufmfp3otquc.
Thư viện này được tích hợp vào một số mã nguồn mở như: WordPress, Drupal, Joomla, Magento, etc. Bạn có thể tìm thấy ở đây: 3rd party plugins
Sau khi tải về, tiến hành giải nén và upload thư mục đã giải nén lên host. Để phát hiện ra thiết bị mobile bạn tạo instance lớp Mobile_Detect ở file Mobile_Detect.php và gọi hàm kiểm tra như sau.
// Include and instantiate the class. require_once 'Mobile_Detect.php'; $detect = new Mobile_Detect; // Any mobile device [phones or tablets]. if [ $detect->isMobile[] ] { }
Và những gì bạn cần làm là chèn code bạn muốn sử lý trên thiết bị mobile với điều kiện true của phương thức isMobile. Ví dụ bạn có thể chèn mã adsence dành cho mobile, và bất kỳ lệnh nào đó tùy theo mục đích ý đồ của bạn.
Đoạn code này phát hiện đang trên máy tính bảng [tablet].
// Any tablet device. if[ $detect->isTablet[] ]{ }
Bạn cũng có thể kết hợp các điều kiện để lọc thiết bị một cách chính xác hơn. Ví dụ loại bỏ thiết bị tablet.
// Exclude tablets. if[ $detect->isMobile[] && !$detect->isTablet[] ]{ }
Phát hiện hệ điều hành Platform
Không chỉ vậy, thư viện Mobile Detect còn có thể tìm ra hệ điều hành của thiết bị mobile như IOS, Android.
// Check for a specific platform with the help of the magic methods: if[ $detect->isiOS[] ]{ } //android os if[ $detect->isAndroidOS[] ]{ }
Ngoài sử dụng các phương trên, có thể sử dụng chung phương thức cho các loại thiết bị và trình duyệt khác nhau.
// Alternative method is[] for checking specific properties. // WARNING: this method is in BETA, some keyword properties will change in the future. $detect->is['Chrome'] $detect->is['iOS'] $detect->is['UC Browser'] // [...]
Đối với WordPress
Nếu bạn xây dựng website với wordpress, bạn có thể sử dụng trực tiếp thư viện Mobile Detect ở trên hoặc tải plugin WordPress Mobile Detect. Cài đặt plugin như bình thường.
Plugin này cung cấp một loạt các shortcodes giúp bạn chèn nội dung khác nhau với mỗi loại thiết bị. Bạn có thể sử dụng shortcode trong nội dung post/page, thậm trí widget text hoặc cũng có thể chèn vào code.
Bạn có thể sử dụng shortcode trong nội dung post/page, thậm trí widget text hoặc cũng có thể chèn vào code.
Sử dụng shortcode – phát hiện thiết bị
Danh sách các shortcode bạn có thể cần sử dụng:
[phone]Put content here that you only want displayed on Phones NOT Tablets or Desktops[/phone] [tablet]Put content here that you only want displayed on Tablets NOT Phones or Desktops[/tablet] [device]Put content here that you only want displayed on Phones OR Tablets NOT Desktops[/device] [notphone]Put content here that you only want displayed on Tablets OR Desktops NOT Phones[/notphone] [nottab]Put content here that you only want displayed on Phones OR Desktops NOT Tablets[/nottab] [notdevice]Put content here that you only want displayed on Desktops NOT Phones OR Tablets[/notdevice] [ios]Put content here that you only want displayed on iOS devices[/ios] [iPhone]Put content here, that you only want displayed on iPhones[/iPhone] [iPad]Put content here, that you only want displayed on iPads[/iPad] [android]Put content here, that you only want displayed on Android devices[/android] [windowsmobile]Put content here, that you only want displayed on Windows Mobile devices[/windowsmobile]
Sử dụng hàm phát hiện thiết bị mobile
Plugin cũng có sẵn các hàm giúp bạn phát hiện thiết bị, nếu như không muốn dùng shortcode.
- wpmd_is_notphone[] – trả về true với desktops hoặc tablets
- wpmd_is_nottab[] – không phải tablet [ trả về true với desktops hoặc phones]
- wpmd_is_notdevice[] – không phải thiết bị mobile [desktops only]
- wpmd_is_phone[] – phát hiện là thiết bị mobile không phải desktop hoặc tablet.
- wpmd_is_tablet[] – thiết bị tablet.
- wpmd_is_device[] – máy tính bảng tablet hoặc mobile.
- wpmd_is_ios[] – đây là thiết bị iOS
- wpmd_is_iphone[] – thiết bị iPhones
- wpmd_is_ipad[] – đây là iPads
- wpmd_is_android[] – thiết bị này là Android
- wpmd_is_windows_mobile[] – thiết bị này có hệ điều hành Windows Mobile
Các mã nguồn khác vì không có thời gian nên mình dừng tại đây, bạn có thể tham khảo tại đây nhé: //github.com/serbanghita/Mobile-Detect#3rd-party-modules–submit-new
//github.com/serbanghita/Mobile-Detect#3rd-party-modules–submit-new
Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook