Tạo giao diện Responsive cho theme WordPress
Từ Tết Âm lịch đến giờ lu bu, hứa với Thạch Phạm và anh em sẽ cố gắng viết bài mà đến nay mới thực hiện. Thôi thì bù lại cho các bạn một tut vô cùng hấp dẫn nhưng cũng không quá phức tạp này nhé.
Như các bạn đã biết, xu hướng ở Việt Nam bây giờ là nhà nhà dùng smartphone, người người dùng smartphone, thậm chí những gia đình có điều kiện thì bọn nhóc 7-10 đều cầm Ipad trên tay rồi (nghĩ lại tủi thân cho mình ngày xưa lớp 10 mới biết cái máy tính là gì). Việc lướt web bằng các thiết bị di động ngày càng phổ biến, bằng chứng là Thạch Phạm đã có lần trao đồi với mình tỉ lệ khách truy cập blog bạn ấy thông qua thiết bị di động chiếm khoảng gần 20% mà thực tế mình cũng kiểm tra trên Google Analytics thì khách truy cập website http://dulichcamthai.com của mình bằng Ipad và smartphone ngày càng tăng nhanh (chiếm 12%, xem hình minh họa).
Mặc dù, đa số các template hiện nay đều tích hợp sẵn chức năng này, nếu bạn đang dùng MD3 của Thesis 2.0 thì cũng đã có sẵn. Nhưng nếu bạn đã thiết kế một website hoàn chỉnh và lâu rồi thì mình nghĩ tut này rất cần cho bạn (chắc bác Văn Mỹ nghe rục rịch đây). Thực tế mình dùng Thesis 2.0 nhưng xài theme Legendary miễn phí (vì lúc đó Thạch chưa share cho mình), xài rồi đến lúc Thạch share MD3 chẳng muốn thay đổi vì mình đã custom rất nhiều, giờ thì nó cũng không khác gì MD3 lắm phải ko.
Vì thế, mình đã ngâm cứu để biến child theme Legendary của Thesis 2.0 “củ chuối” mà mình đang dùng trong website Du lịch Cam Thái thích hợp với mọi thiết bị di động, mà người ta thường gọi là Responsive Design.
Hướng dẫn tạo giao diện Responsive cho theme WordPress
Bước 1: Backup giao diện trước khi làm
Đây là bước quan trọng và cơ bản nhất, đó là backup lại giao diện bạn đang sử dụng. Đối với các giao diện wordpress thông thường thì cũng đơn giản phải không. Mình sẽ không hướng dẫn phần này, nếu bạn nào sử dụng Thesis 2.0 thì tham khảo Cách sao chép giao diện của Thesis 2.0 (Mục Manager) của Thạch Phạm nhé
Bước 2: Vẽ lại giao diện trên các thiết bị di động.
Thông thường bạn chỉ cần vẽ 2 kích thước cơ bản là trên Ipad và Iphone thì ok. Các thiết bị khác sẽ thiết kế tương tự. Mình xin liệt kê các thông số kích thước màn hình để các bạn dễ hình dung nhé.
- iPhone 320×480 (iPhone 3+4 đứng)
- iPhone 480×320 (iPhone 3+4 ngang)
- iPhone 320×568 (iPhone 5 đứng)
- iPhone 568×320 (iPhone 5 ngang)
- Android 240×320 (Crappy Android đứng)
- Android 320×240 (Crappy Android ngang
- Android 380X685 (Android (Samsung Galaxy) đứng)
- Android 685X380 (Android (Samsung Galaxy) ngang)
- iPad 768×1024 (iPad đứng)
- iPad 1024×768 (iPad ngang)
- Kindle 600×1024 (Kindle đứng)
- Kindle 1024×600 (Kindle ngang)
Bạn có thể sử dụng các phần mềm thiết kế như Photoshop, AI, Corel,…. để design lại giao diện của mình. Nhưng nếu bạn ko rành về thiết kế thì sao? Mặc dù biết sử dụng các phần mềm thiết kế, nhưng mình hay dùng plugin Firebug của Firefox hoặc R-Click –> Inspect Element trong Chrome , thu nhỏ khung trình duyệt lại và custom trực tiếp sẽ nhanh hơn bằng cách xóa các phần tử không cần thiết và chỉnh sửa CSS trực tiếp. Tuy nhiên, cách này đòi hỏi bạn phải rành CSS một chút.
Tóm lại, nếu bạn bỏ qua hoặc làm qua loa ở bước này thì sẽ rất cực cho bạn khi thực hiện các bước tiếp theo. Nếu cảm thấy khó quá, bạn có thể dùng Paint vẽ lại, song, cần phải hình dung cho được cấu trúc giao diện với màn hình nhỏ hơn như thế nào.
Mình xin tóm tắt quá trình thực hiện thực tế trên website của mình ở bước này, các bạn xem hình minh họa nhé, mình chỉ làm demo ở Ipad và Iphone 4 các bạn nhé
1. Ipad ngang, thông thường sẽ giống như laptop ở kích thước 1024×768 nên mình giữ nguyên
2. Ipad đứng, kích thước 768 x 1024
Trong website của mình, được bố cục có 3 phần chính: header, main và footer. Phần header gần như là 100% như cũ, mình sẽ nói phần Menu sau nhé. Phần main thì chia thành main-left (chiếm khoảng 65%) và main-right (chiếm khoảng 35%), như vậy với kích thước chiều ngang thông thường là 1000px giảm xuống còn 768px, mình sẽ cho phần main-left là 100%, phần main-right nhảy xuống dưới. Trong phần main-right có các block từ trên xuống từng cái một thì mình sẽ cho nó mỗi hàng thành 2 cái. Phần footer của mình chia thành 3 cột nhỏ, mình sẽ giữ nguyên phần này.
3. Iphone 4 ngang, kích thước 320 x 480
Tương tư như vậy, mình đưa logo và hotline thành 2 hàng, cắt bỏ các phẩn không quá cần thiết và đưa tất cả thành 1 cột.
Mô tả hơi khó hình dung phải không. Các bạn xem hình minh họa nhé
Bước 3: Mọi thứ đã sẵn sàng, bắt đầu code anh em nhé !
1. Một số dòng Iphone cần chèn đoạn code nhận dạng thiết bị di động, để nó sẽ tự động chuyển đúng text size và scale theo màn hình.
Các bạn mở file style.css (file css chính của theme) chèn vào
|
1
2
3
4
5
|
html {-webkit-text-size-adjust: none;} |
2. Tiếp tục chèn đoạn code sau trước khi đóng thẻ <head>, thường nó sẽ nằm trong fileheader.php hoặc với Thesis thì các bạn có thể cho vào Head Script
| 1 | <meta name="viewport" content="width=device-width; initial-scale=1.0"> |
3. Có một số trình duyệt như IE 8 không nhận dạng được HTML5 nên chúng ta phải xài đoạn javascript sau để khắc phục lỗi này, vẫn chèn vào trước thẻ </head> các bạn nhé
|
1
2
3
4
|
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> |
4. Thông thường, hình ảnh trên web rất lớn, trung bình có thể lên tới hơn 1000px, và nếu duyệt bằng điện thoại mà chờ load các hình này chắc xỉu lun, nên chúng ta sẽ dùng javascritpt sau để “tối ưu lại” điểm yếu này
4.1 Tạo một file javascript bất kỳ, ở đây mình đặt là responsive-images.js trong thư mục chứa theme với nội dung như sau:
|
1
2
3
4
5
6
|
jQuery(document).ready( function ($) { $('img').each( function () { $(this).removeAttr( 'width' ); $(this).removeAttr( 'height' ); }); }); |
Lưu ý: Nên lên Google tham khảo cách nhúng file .js vào html.
4.2 Đặt dòng code này vào functions.php trong theme của bạn, nhớ sửa lại đúng tên file bạn đã đặt.
|
1
2
3
4
|
add_action( 'wp_enqueue_scripts' 'tutsresponsive_enqueue' ); function tutsresponsive_enqueue() { wp_enqueue_script( 'responsive-images', get_theme_directory_uri() . '/<strong>responsive-images.js</strong>', array( 'jquery' ) ); } |
4.3 Tiếp tục chèn vào styles.css đoạn code sau
|
1
2
3
4
5
|
img { max-width: 100%; height: auto; width: auto9; /* ie8 */ } |
OK, xem như phần hình ảnh đã xong. Nhưng nếu bạn thấy phức tạp quá trong phần này hoặc thực hiện không thành công thì bạn có thể sử dụng Plugin WP Fluid Images hoàn toàn miễn phí cho dễ
Phù, hút điếu thuốc cái đã ! 
nhâm nhi tí cafe 
5. Đây là phần khó nuốt nhất, nên anh em tập trung kỹ nhé
Mình tiếp tục lấy trang Du lịch Cam Thái làm ví dụ, các bạn xem kỹ cấu trúc trong theme của các bạn mà áp dụng theo nha.
Như ở bước 2, mình đã vẽ bố cục layout trên Ipad và Iphone, nên việc của chúng ta là phải sắp xếp lại theo thứ tự như thế trong code. Bản chất của responsive này là sử dụng css để bố cục lại thôi, nên các bước dưới đây các bạn có thể chèn trực tiếp vào phần cuối trong style.css trong theme của bạn hoặc bạn có thể tạo 1 file css riêng tùy thích.
Để tạo sự khác nhau trong phần class của các thẻ DIV đối với từng trình duyệt trên css-tricks.com đã phân tích như sau:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
@media only screenand (min-device-width : 320px)and (max-device-width : 480px) {/* Styles */}/* Smartphones (landscape) ----------- */@media only screenand (min-width : 321px) {/* Styles */}/* Smartphones (portrait) ----------- */@media only screenand (max-width : 320px) {/* Styles */}/* iPads (portrait and landscape) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px) {/* Styles */}/* iPads (landscape) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : landscape) {/* Styles */}/* iPads (portrait) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : portrait) {/* Styles */}/* Desktops and laptops ----------- */@media only screenand (min-width : 1224px) {/* Styles */}/* Large screens ----------- */@media only screenand (min-width : 1824px) {/* Styles */}/* iPhone 4 ----------- */@mediaonly screenand (-webkit-min-device-pixel-ratio : 1.5),only screenand (min-device-pixel-ratio : 1.5) {/* Styles */} |
|
1
2
3
4
5
6
7
8
9
10
|
</div>/** Responsive by Mr Quoc - http://dulichcamthai.com **/@media screen and (max-width: 1080px) { /* code here for Ipad */ } /* Iphone */ @media screen and (max-width: 479px) { /* code here for Iphone */ } |
Mình nói thêm 1 chút, đoạn code trên là để phân biệt kích thước chiều ngang của trình duyệt nên để code cho thiết bị nào thì bạn thêm code css cho thiết bị đó, giữa 2 dấu { }. Các bạn tìm các thẻ DIV chính cấu hình nên giao diện, sau đó viết CSS lại cho từng thẻ đó rồi chèn vào là ok
Trên Du lịch Cam Thái, các thẻ DIV theo bố cục ở trên mình phải chỉnh sửa lại cho phù hợp với Ipad và như sau:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
/** Responsive by Mr Quoc - http://dulichcamthai.com**/ @media screen and (max-width: 1080px) {.header_inner , #content_box { width:98%; } .columns-2 > .c1 { width:100%; } .columns-2 > .c2 { width:100%; float:left; } #thesis-google-cse-2, #tag_cloud-2, #smart-youtube-2 {display:none;} .widget { width: 48%; float: left; } #ttplus_top_form {display:none!important} #footer_inner {margin:0;padding:0;width: 100%;} .footer_widgets .fw1, .footer_widgets .fw2, .footer_widgets .fw3 { width: 31%; margin: 0 5px; } .footer_widgets .fw1 .widget, .footer_widgets .fw2 .widget, .footer_widgets .fw3 .widget { width:98% } .footer_widgets .stripe {display:none } .footer_widgets .widget_title { font-size: 16px; } .footer_widgets li { margin-bottom: 5px; border-bottom: 1px solid #555;} .widget li a { line-height:14px; } #footer_inner .footer_text ul li { width:100%; margin-bottom: 10px; } }/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media screen and (max-width: 479px) { .header_inner , #content_box , #logo , .cat-box.column2, .list-box li.first-news, .list-box li ,.widget { width:100%!important;} #site_title , #ei-slider, .footer_widgets {display:none;} #hotline {float:left;width:100%;padding:0;margin:0} #logo {background:url(images/dulichcamthai-logo-small.png)no-repeat;} #hotline {padding-left: 10px;margin-bottom: 10px;} li.first-news p, .breadcrumb , .post_tags, .ta_author_info.ta_box, .comments_intro, #commentform, #related_posts .related-item .post-thumbnail{display:none} .post_image {width:100%;height:auto;} #price_detail {float:left!important;margin-left:0!important} #info_detail {padding-left:10px;} #related_posts .related-item {height:auto!important;width:100%!important;margin:0 0px 5px0;padding:0;border-bottom:1px solid #ccc} } |
Đến đây chắc bà con hoa mắt rồi, nhìn thì hơi phức tạp nhưng mình sẽ tổng hợp lại 1 số css cơ bản để các bạn dễ code nhé
- Nếu bạn muốn ẩn 1 thẻ DIV bất kỳ bạn dùng: display:none;
- Nếu muốn 1 cột thành 2 cột thì giảm độ width cho mỗi cột xuống 45% và chèn thêm float:left;vào, nó sẽ tự canh trái cho bạn
- Nếu muốn nhiều cột thành 1 cột thì cứ width thành 98% bạn nhé.
- Đa số mình chỉ chỉnh: margin:0 và padding:0; mà thôi
Các bạn cứ nhớ nguyên tắc là, các class bạn chèn trong phần này sẽ được ưu tiên khi dùng trong trình duyệt di động. Ví dụ mặc định phần ID của logo mình là
| 1 | #logo {background:url(images/dulichcamthai-logo.png) no-repeat;} |
Như thế logo sẽ quá to, mình sửa lại là
| 1 | #logo {background:url(images/dulichcamthai-logo-small.png) no-repeat;} |
Lúc này, trên Iphone nó sẽ dùng đoạn code thứ 2 của mình. Đến đây các bạn đã hiều vấn đề rồi phải không.
Bước 6: Phần menu
Để giải quyết vấn đề này, đơn giản bạn sử dụng Plugin Responsive Select Menu là xong, mình cũng đang dùng Plugin này. Thật ra, vẫn còn nhiều dạng khác nhưng mình xin phép trình bày ở 1 bài viết khác các bạn nhé.
Bước 7: Test, test và test….
Trong lúc thực hiện bạn nên tắt chức năng cache nếu bạn đang xài để dễ dàng hơn. Mình xin giới thiệu các bạn công cụ để các bạn dễ test hơn, bạn có thể truy cập http://responsivetools.com/ nhập địa chỉ web mình vào và test thôi. Hoặc nếu bạn đang xài Firefox thì có thể sử dụng Addons Fire Break để kiểm tra.
QUÀ TẶNG
Có lẽ phần này hấp dẫn nhất để bù lại một thời gian căng thẳng đầu óc của anh em đây. Thật ra quà tặng cũng rất đơn giản, đó là mình sẽ Custom Responsive WordPress theme hoàn toàn miễn phí cho 3 bạn đăng ký, và mình sẽ nhờ Thạch Phạm chọn ngẫu nhiên 3 người may mắn để nhận phần quà này. Tuy nhiên có 1 số điều kiện nho nhỏ như sau nhé
- 1. Like ngay bài viết này
- 2. Truy cập http://dulichcamthai.com và Like Facebook Fan page giúp mình nhé (nếu mua tour thì càng tốt
) - 3. Đăng ký theo comment bên dưới
- 4. Thời gian đăng ký 3 ngày kể từ ngày bài viết được đăng lên
Lưu ý:
- Chỉ áp dụng cho các bạn dùng wordpress thôi nhé, các mã nguồn khác mình xin từ chối vì một số lý do.
- Khi custom, các bạn phải gửi theme gốc các bạn đang xài và một số file cần thiết, hoặc tốt nhất là cho mình truy cập FTP , nếu các bạn tin tưởng, để mình viết code thêm các bạn nhé.
- Quy trình làm việc như sau: Mình sẽ design lại web các bạn trên 2 giao diện Ipad và Iphone tương tự như phần hướng dẫn ở trên, nếu các bạn ok thì mình sẽ bắt đầu code, thời gian trong vòng 3 ngày cho 1 giao diện (vì ban ngày mình còn đi làm nữa), bạn nào được chọn trước sẽ ưu tiên làm trước.
NẾU BẠN KHÔNG MAY MẮN THÌ SAO???
Nếu bạn không nằm trong số 3 người may mắn trên thì bạn cũng đừng buồn, mình sẽ tiếp tục support các bạn theo comment bên dưới.
Và nếu bạn muốn có được tính năng trên trong web của mình có thể đặt dịch vụ custom responsive wordpress theme với mình nhé. Chi phí là 500k/ 1 theme gọi là tiền cafe nha các bạn. Để đăng ký dùng dịch vụ các bạn gửi email về thông qua trang liên hệ nhé.
Chúc các bạn thành công và mong được xem thành quả của các bạn, ai làm xong thì comment để mọi người học hỏi nha !!
Khóa học wordpress | khoa hoc wordpress 