Xây dựng giao diện Adaptive trên WordPress

19 Tháng Tư, 2014 Trong Mục - Wordpress Development

Nếu bạn là một người thiết kế web lâu năm thì chắc chắn đã biết qua khái niệm Responsive Design và Adaptive Design. Mặc dù mục đích của hai kỹ thuật này giống nhau là hiển thị nội dung trên phiên bản di động tốt nhất nhưng cách thức triển khai, ưu nhược điểm hoàn toàn khác nhau. Nếu bạn chưa hiểu lắm về sự khác nhau của hai khái niệm này thì mình xin giải thích như sau:

Responsive Web Design (RWD) là một kỹ thuật thiết kế website để nó tự động co giãn kích thước của website phù hợp với kích thước của trình duyệt đang truy cập. Nhưng các bước xử lý của nó sẽ nằm ở client side, tức là nội dung tải về trình duyệt rồi trình duyệt sẽ đọc hiểu các đoạn CSS để tiến hành co giãn, ẩn hiện như ý muốn.

Adaptive Web Design (AWD) cũng là một kỹ thuật thiết kế để website tương thích với nhiều loại thiết bị khác nhau, nhưng các bước xử lý của nó đều xảy ra ở server side. Tức là mọi nội dung sẽ được xử lý trước khi tiến hành tải về trình duyệt cho người dùng.

Mình thì ít khi nào làm giao diện AWD nên chưa thể dám nói ưu nhược điểm giữa hai kỹ thuật này nhưng chỉ biết là nếu sử dụng AWD thì chúng ta sẽ dễ dàng triển khai hơn, website có tốc độ nhanh hơn là kỹ thuật RWD. Bạn có thể xem rõ hơn về sự khác nhau của nó ở slide bên dưới.

Responsive Web Design (RWD) vs Adaptive Web Design (AWD) from Jamshaid (Jam) Hashmi

Về cách triển khai giao diện RWD là ta sẽ tuần tự làm như sau:

Bước 1. Khai báo thẻ meta viewport vào thẻ <head> của website để . Xem ý nghĩa của thẻ này tại đây.

  <meta name="viewport" content="width=device-width,initial-scale=1" />

Bước 2. Sau đó chúng ta sẽ viết CSS xác định từng kích thước trình duyệt như kiểu thế này:

  @media all and (max-width: 320px) {
  // CSS trong đây sẽ chỉ thực thi cho trình duyệt có chiều rộng tối đa là 320px  }

Trong serie Lập trình theme WordPress mình đã có đề cập tới kỹ thuật RWD nên bạn có thể xem qua để hiểu rõ hơn.

Thế còn làm việc với AWD thì sao?

Không giống như RWD là chỉ có một cách triển khai như trên, AWD có rất nhiều cách để làm vì nó sẽ thực hiện xử lý ở máy chủ nên tùy theo mã nguồn mà cách làm nó sẽ khác nhau. Trong bài viết này, mình sẽ hướng dẫn các bạn một cách để triển khai AWD cho theme bạn đang dùng thông qua hàm có sẵn của WordPress và hàm trong plugin WP Mobile Detect.

AWD với hàm có sẵn trong WordPress

Mới đây, WordPress đã tiến hành ra thêm một hàm vô cùng hữu ích, có thể gọi là bước đột phá quan trọng của WordPress trong việc hỗ trợ các nhà thiết kế làm được nhiều việc hơn. Đó chính là hàm wp_is_mobile().

Ở hàm này, nó sẽ trả kết quả về giá trị kiểu boolen tức là chỉ có TRUE và FALSE. Nghĩa là nếu trình duyệt đang thực thi là trình duyệt di động, giá trị sẽ là TRUE và ngược lại.

Cách sử dụng hàm này theo mình biết là sẽ dùng kết hợp với các điều kiện rẽ nhánh trong PHP và các hàm điều kiện có sẵn trong WordPress (xem chi tiết) để tiến hành điều hướng dữ liệu tải về. Dưới đây là một vài ví dụ:

  if (! wp_is_mobile() ) {
 // Hiển thị tag nếu trình duyệt KHÔNG PHẢI là di động 	the_tags( 'Từ khóa', ',' );
}
  if ( wp_is_mobile() ) {
 // Hiển thị nội dung cho trình duyệt di động 	echo ' 		<div class="mobile-content"> 			This is the content only for mobile. 		</div> 	';
}

Anyway, có rất nhiều cách mà bạn có thể kết hợp chứ liệt kê ở đây ra thì rất là nhiều đấy.

Nhược điểm của hàm này là không có tùy chọn cho từng thiết bị riêng biệt.

Gia tăng sức mạnh với plugin WP Mobile Detect

Như đã nói ở trên, hiện nay WordPress chỉ có duy nhất một hàm để nhận dạng các thiết bị di động nên nó không có tùy chọn phát hiện ra nhiều thiết bị khác nhau như máy tính bảng, android, iOS,….

Nếu bạn vẫn yêu thích AWD và muốn triển khai một cách mạnh mẽ hơn thì xin chúc mừng bạn, đã có plugin WP Mobile Detect giúp bạn làm việc này. Nó cũng giống như hàm wp_is_mobile() nhưng hỗ trợ nhiều hàm khác nhau hơn và có hỗ trợ cả shortcode.

Dưới đây là danh sách các hàm có trong plugin này khi bạn cài vào:

 wpmd_is_notphone() - Trả về giá trị là TRUE trên máy tính & máy tính bảng.  wpmd_is_nottab() - Trả về giá trị là TRUE trên máy tính và điện thoại.  wpmd_is_notdevice() - Trả về giá trị là TRUE trên máy tính.  wpmd_is_phone() - Trả về giá trị là TRUE trên điện thoại.  wpmd_is_tablet() - Trả về giá trị là TRUE trên máy tính bảng.  wpmd_is_device() - Trả về giá trị là TRUE trên điện thoại và máy tính bảng.  wpmd_is_ios() - Trả về giá trị là TRUE trên thiết bị dùng iOS.  wpmd_is_iphone() - Trả về giá trị là TRUE trên điện thoại iPhone.  wpmd_is_ipad() - Trả về giá trị là TRUE trên iPad.  wpmd_is_android() - Trả về giá trị là TRUE trên thiết bị Android.  wpmd_is_windows_mobile() - Trả về giá trị là TRUE trên thiết bị Windows Phone.

Rất đa dạng phải không nào, tương tự như thế, dưới đây là danh sách các shortcode của plugin này để bạn có thể dùng trong bài viết:

[phone]Lorem lipsum sit amet.[/phone] [tablet]Lorem lipsum sit amet.[/tablet] [device]Lorem lipsum sit amet.[/device] [notphone]Lorem lipsum sit amet.[/notphone] [nottab]Lorem lipsum sit amet.[/nottab] [notdevice]Lorem lipsum sit amet.[/notdevice] [ios]Lorem lipsum sit amet.[/ios] [iPhone]Lorem lipsum sit amet.[/iPhone] [iPad]Lorem lipsum sit amet.[/iPad] [android]Lorem lipsum sit amet.[/android] [windowsmobile]Lorem lipsum sit amet.[/windowsmobile]

Xem thêm mục FAQ của plugin WP Mobile Detect.

Lời kết

Trong bài này mình đã chia sẻ về một cách triển khai AWD trên website WordPress của mình và bạn có thể sử dụng nó tùy theo mục đích của mình. Hãy nhớ là trước khi làm, bạn nên tìm hiểu rõ ưu và nhược điểm của hai kỹ thuật này nhé vì nó sẽ có nhiều ưu nhược điểm khác nhau tùy theo dự án mà bạn cần triển khai.