Hướng dẫn responsive page wordpress - trang đáp ứng 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é.hấp dẫn nhưng cũng không quá phức tạp này nhé.

Hướng dẫn responsive page wordpress - trang đáp ứng wordpress

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). 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.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.Responsive Design.

Bước 1: Backup giao diện trước khi làm 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é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.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.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é

Hướng dẫn responsive page wordpress - trang đáp ứng wordpress

Demo http://dulichcamthai.com

Bước 3: Mọi thứ đã sẵn sàng, bắt đầu code anh em nhé !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. 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 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ẻ , thường nó sẽ nằm trong file header.php hoặc với Thesis thì các bạn có thể cho vào Head Script Tiếp tục chèn đoạn code sau trước khi đóng thẻ , thường nó sẽ nằm trong file header.php hoặc với Thesis thì các bạn có thể cho vào Head Script

1

<meta name="viewport" -webkit-text-size-adjust: 0=-webkit-text-size-adjust: 2-webkit-text-size-adjust: 3

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ẻ  các bạn nhé 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ẻ  các bạn nhé

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

-webkit-text-size-adjust: 4-webkit-text-size-adjust: 5 -webkit-text-size-adjust: 6

-webkit-text-size-adjust: 7-webkit-text-size-adjust: 8-webkit-text-size-adjust: 9none0-webkit-text-size-adjust: 5 none2

none3-webkit-text-size-adjust: 8none5none6none7 none8

none3-webkit-text-size-adjust: 8none5none6;3 none8

-webkit-text-size-adjust: 7;6

;7;6

Lưu ý: Nên lên Google tham khảo cách nhúng file .js vào html.: 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. Đặ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

;9}0 }1 none8

;7-webkit-text-size-adjust: 5 }5

;7}7}8}9<0<1<2<3<4 <5

;7}

4.3 Tiếp tục chèn vào styles.css đoạn code sau Tiếp tục chèn vào styles.css đoạn code sau

1

2

3

4

5

<8

;7meta0meta1meta2;

;7meta5meta1meta7;

;7name0meta1meta7name3name4name5name6

;7}

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ễ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 

Hướng dẫn responsive page wordpress - trang đáp ứng wordpress
nhâm nhi tí cafe 
Hướng dẫn responsive page wordpress - trang đáp ứng wordpress

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

name9=0

=1=2=3

=4=5=6

=7

}

=9

name9=0

"viewport"2"viewport"3=6

=7

}

"viewport"7

name9=0

-webkit-text-size-adjust: 00=2=6

=7

}

-webkit-text-size-adjust: 05

name9=0

=1-webkit-text-size-adjust: 09=3

=4-webkit-text-size-adjust: 12=6

=7

}

-webkit-text-size-adjust: 16

name9=0

=1-webkit-text-size-adjust: 09=3

=4-webkit-text-size-adjust: 12=3

-webkit-text-size-adjust: 25-webkit-text-size-adjust: 26=6

=7

}

-webkit-text-size-adjust: 30

name9=0

=1-webkit-text-size-adjust: 09=3

=4-webkit-text-size-adjust: 12=3

-webkit-text-size-adjust: 25-webkit-text-size-adjust: 40=6

=7

}

-webkit-text-size-adjust: 44

name9=0

"viewport"2-webkit-text-size-adjust: 48=6

=7

}

-webkit-text-size-adjust: 52

name9=0

"viewport"2-webkit-text-size-adjust: 56=6

=7

}

-webkit-text-size-adjust: 60

-webkit-text-size-adjust: 61

-webkit-text-size-adjust: 62-webkit-text-size-adjust: 63-webkit-text-size-adjust: 64

-webkit-text-size-adjust: 65-webkit-text-size-adjust: 63=6

=7

}

Trình duyệt thì nhiều nhưng căn bản chỉ cần phù hợp với Ipad và Iphone là sẽ chuẩn thôi. Mình thì sử dụng đơn giản hơn 1 chút

1

2

3

4

5

6

7

8

9

10

-webkit-text-size-adjust: 70

-webkit-text-size-adjust: 71

-webkit-text-size-adjust: 72=0 -webkit-text-size-adjust: 74meta0meta1-webkit-text-size-adjust: 77=6

;7-webkit-text-size-adjust: 80

;7}

;7-webkit-text-size-adjust: 84

;7-webkit-text-size-adjust: 72=0 -webkit-text-size-adjust: 74meta0meta1-webkit-text-size-adjust: 91=6

;7-webkit-text-size-adjust: 94

;7}

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

-webkit-text-size-adjust: 97

;7-webkit-text-size-adjust: 99

none00

;7-webkit-text-size-adjust: 72=0 -webkit-text-size-adjust: 74meta0meta1-webkit-text-size-adjust: 777=6

none09name0none11none12none13

Các

Các

;7none39none16none41none16none43__

;7none51name0meta1none54name5none34meta1none36none13

;7none61none46none11nonenone65}

;7none68none69none11none71;none73none11none71;name0meta1meta2none49

;7none82none18none84none28none84none87

;7none45

;7name0meta1none93;

;7none69meta1none71 none99;

;7}

;7none82none18 ;06none28 ;06none87 ;10

;7none45

;7name0none11none12

;7}

;7;20none46____211none }

;7;26

;7;28meta1;30;

;7}

;7;35

;7;37meta1none99;

;7;42meta1;44 ;45 ;46none49

;7;49

;7;51none11;53;

;7}

;7;58

;7name0none11meta2;

;7;37meta1;67;

;7}

;7}

;73

;7-webkit-text-size-adjust: 72=0 -webkit-text-size-adjust: 74meta0meta1-webkit-text-size-adjust: 91=6

;7;83none28;85

;7name0none11meta2none65;

}

;7;94none46none11nonenone49

Các

;7}18}19none11}21}22}23}24}25none49

;7}00}29meta1;67;;37meta1;67none49

;7}38none46none11none}

;7}44name0none11meta2;meta5none11meta7none49

;7}54none34none11none36none65;}60none11none71none65}

;7}66}29none11;67none49

;7}72meta5none11meta7__

;7}

Đến Đây Chắc Bà Con HOA Mắt RồI, Nhìn thì

  • Nếu bạn muốn ẩn 1 thẻ div bất kỳ bạn Dùng: Hiển thị: Không; & nbsp;
  • Nếu muốn 1 cột thànH 2 cột thÌ Giảm Độ chiều rộng Cho Mỗi Cột Xuống 45% Và Chèn Thêm Float: trái; vào, nó sẽ tự canh trái
  • Nếu muốn nhiều cột thànH 1 cột thì cứ chiều rộng thànnh 98% bạn NHé.
  • ĐA Số MÌNH

Các bạn cứ nhớ nguyn tắc là, các class bạn chèn trong phần nào sẽ ôn Ví dụ mặc ĐịNH phần id của logo mình là

1

}18}19none11}21<06}25none49

NHư thế logo sẽ quá to, mình sửa lại lài

1

}18}19none11}21}22}23<15}25none49

Lúc noy, trên iphone nó sẽ Dùng Đoạn mã thứ 2 của mình. Đến ĐÂY Các

BướC 6: Menu Phần

Để GIảI QUYết VấN Thật ra, vẫn còn nhiều dạng Khát nh ưng Mình Xinh Phép Trinh Bày ở 1 BÀi VIết Khác Các Bạn NHÉ.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: Kiểm tra, kiểm tra Và kiểm tra. & NBSP;

Trong lúc thực hiện bạn nin tắt chức năng cache nếu bạn Đang XÀi Để Dễ Dà MÌNH Hoặc nếu bạn Đang XÀi FIREFOX thì bạn 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ànmiễ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é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  )
    Hướng dẫn responsive page wordpress - trang đáp ứng wordpress
     )
  • 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é.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 !!

Hướng dẫn responsive page wordpress - trang đáp ứng wordpress