Hỏi về thiết kế theme mobile cho website WordPress?

Thích 2.18 K ● Bình luận 0 ●
792 đánh giá
33.2 K

Trả lời câu hỏi tuần 4 tháng 4/2015 của bạn Mr Quý hỏi về thiết kế theme mobile cho website WordPress?

Bạn Mr Quý hỏi: Tình hình là anh em nào chưa có giao diện mobile cho web. Anh em có thể chia sẻ kinh nghiệm thiết kế theme mobile cho những webisite WordPress đang sử dụng

Trả lời câu hỏi trên diễn đàn:

Bạn XuanTinh: Mình edit css của skin thành % hết. Và chỉ cần một cái @media only screen and (max-width: 768px) là xong cho tất cả mobile.

Bạn trannam191: bạn làm theo mình nhé:
hôm nay mình cũng nghe bác Xuân tĩnh kêu ca nên mình cũng tìm được món này áp dụng cho gensis theme.
1. Tạo file mobile-nav.js

//* This should be placed in the theme's /lib/js folder.jQuery(document).ready(function($){/* prepend menu icon */$('.nav-primary').append('<div id="mobi-menu"></div>');$("#mobi-menu").on("click", function(){$(".menu-primary").slideToggle();$(this).toggleClass("active");});});

 và tải ảnh này: icon-mobile.png
Upload lên hosting.
Chú ý: để tránh cho việc lỗi đường dẫn file mobile-nav.js và file icon ảnh, bạn nhớ chú ý config chuẩn theo tên folder. Ở đây, để tiện cho việc quản lý file mình sẽ upload file mobile-nav.js vào thư mục lib/js (nếu chưa có bạn có thể tạo thêm) hặc trong child theme cũng được nhưng nhớ phải chuẩn đường dẫn.
2. Thêm code vào functions template bạn đang sử dụng, chèn bất kỳ đoạn nào trong functions.php, cứ chèn ở cuối là ok.

//* This code needs to be added to your functions.php file/** Reposition the primary navigation menu and then load the js file */remove_action( 'genesis_after_header', 'genesis_do_nav' );add_action( 'genesis_before_header', 'genesis_do_nav' ); 
 3- Cấu hình CSS
Bạn hãy thêm vào file style.css đoạn mã css sau:
* This line goes in the general styling, outside of any mobile query */#mobi-menu {display: none;visibility: hidden;}/* This goes in a mobile query section--I've just included the one from Genesis 2.0 since that's what I'm using */@media only screen and (max-width: 768px) {#mobi-menu {background: url("images/icon-mobile.png") no-repeat scroll 0 0 transparent;cursor: pointer;display: inline-block;float: right;height: 30px;margin: 12px;width: 41px;visibility: visible;z-index: 999;}.menu-primary {display: none;}}/* Make sure main menu re-appears when scaled up */@media only screen and (min-width: 768px) {.menu-primary {display: block !important;}}
 Xong !
Nếu bạn có những ý kiến đóng góp nào khác về thiết kế theme mobile cho website WordPress xin hãy để lời bình luận phía dưới, chúng tớ sẽ phản hồi lại. Rất cảm ơn các bạn đã quan tâm bài viết. Chúc các bạn Học WordPress thành công! 

Bình luận