Kỹ thuật xây dựng Adaptive Theme cho WordPress

Kỹ thuật xây dựng Adaptive Theme cho WordPress

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.

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



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.

Nguồn: Kỹ thuật xây dựng Adaptive Theme cho WordPress | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage &amp; coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben &amp; tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
Lộ trình học SEO A-Z cho người mới !
Sắp xếp bài theo serie trong WordPress với Organize Series
Tác giả

Bình luận

Leave a Message

Registration isn't required.

NguyenLp LarTheme