Hướng dẫn xây dựng giao diện Adaptive trên WordPress

Hướng dẫn xây dựng giao diện Adaptive trên WordPress

Áp dụng kỹ thuật Adaptive Web Design để thiết kế theme chuẩn cho di động mà không cần sử dụng CSS. Kỹ thuật Adaptive có tốc độ tải trang nhanh hơn Responsive.

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

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.

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:

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ó TRUEFALSE. 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ụ:

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:

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:

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.

WordPress FAQ  » Học WordPress > Lập trình WordPress 


 WordPress FAQ   |   Hoc WordPress   |   Su dung WordPress   |   Lap trinh WordPress |   Plugin WordPress  |  Thuat ngu WordPress    |  Theme WordPress  |  Lap trinh Themes |  Lap trinh plugin |  WordPress API

Ảnh. Hướng dẫn Xây dựng giao diện Adaptive trên WordPress
Ảnh. Hướng dẫn Xây dựng giao diện Adaptive trên WordPress

Chia sẻ bài viết

One Response với "Hướng dẫn xây dựng giao diện Adaptive trên WordPress"

  1. Mình đã lựa chọn và tìm kiếm những thông tin về giao diện của Adaptive trên wordpress để xây dựng cho mình 1 hệ thông website để SEO từ khóa cho site chuyên về lĩnh vực thang nhôm hòa phát. Thật bất ngờ đã tìm được bài viết thật là ưng ý

    Trả lời

Bình luận