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é.
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 //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 //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é
Demo //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 |
|
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 | Chủ Đề |