Ở bài viết trước mình có hướng dẫn các bạn cách thiết lập giao diện responsive thì ở bài viết này cũng tương tự nhưng chi tiết hơn ở một số nội dung bổ sung thêm vào để tránh dư thừa đoạn mã lệnh
Mặc định với giao diện default thì bạn có ba tùy chọn: “Các loại giao diện được sử dụng”
- Tự động
- Máy tính
- Di động
Với ba tùy chọn này thì theo thói quen của mình là dùng tự động sẽ tiện hơn với các nguyên do sau
- Tiết kiệm thời gian làm giao diện
- Giảm lượng file trong theme xây dựng mới
- Tiết kiệm chi phí cho khác hàng
Với việc viết thêm giao diện máy tính và di động sẽ làm tốn thời gian và cũng như độn chi phí do bạn phải bỏ công làm và thiết kế sao cho phù hợp thì với giao diện tự động hay còn gọi là responsive sẽ tối ưu hiển thị trên cả máy tính lẫn di động.
Công nghệ ngày nay mà chúng ta áp dụng sẽ là responsive hay còn gọi là tương thích với màn hình của các thiết bị. Nhưng việc bài viết này đề cập sẽ là gọi trực tiếp các file cần thiết thay vì phải thông qua tùy chọn “Các loại giao diện được sử dụng“. Khi bạn có tích tùy chọn nào đi chăng nữa thì nó cũng không có tác dụng vì các file cần thiết mình đều gọi trực tiếp để phát triển giao diện responsive.
Để chi tiết hơn mình sẽ chỉ dẫn các bạn sửa đổi các file code cần thiết
- Đầu tiên bạn mở file theme.php của themes mà bạn thiết kế. Nếu bạn copy theme.php của themes default sang thì bạn cần thay thế dòng sau
- Tìm
if ($global_config['current_theme_type'] == 'r') { $html_links[] = array( 'rel' => 'StyleSheet', 'href' => NV_BASE_SITEURL . 'themes/' . $global_config['module_theme'] . '/css/bootstrap.min.css' ); $html_links[] = array( 'rel' => 'StyleSheet', 'href' => NV_BASE_SITEURL . 'themes/' . $global_config['module_theme'] . '/css/style.css' ); $html_links[] = array( 'rel' => 'StyleSheet', 'href' => NV_BASE_SITEURL . 'themes/' . $global_config['module_theme'] . '/css/style.responsive.css' ); } else { $html_links[] = array( 'rel' => 'StyleSheet', 'href' => NV_BASE_SITEURL . 'themes/' . $global_config['module_theme'] . '/css/bootstrap.non-responsive.css' ); $html_links[] = array( 'rel' => 'StyleSheet', 'href' => NV_BASE_SITEURL . 'themes/' . $global_config['module_theme'] . '/css/style.css' ); $html_links[] = array( 'rel' => 'StyleSheet', 'href' => NV_BASE_SITEURL . 'themes/' . $global_config['module_theme'] . '/css/style.non-responsive.css' ); } - Thay bằng
$html_links[] = array( 'rel' => 'StyleSheet', 'href' => NV_BASE_SITEURL . 'themes/' . $global_config['module_theme'] . '/css/bootstrap.min.css' ); $html_links[] = array( 'rel' => 'StyleSheet', 'href' => NV_BASE_SITEURL . 'themes/' . $global_config['module_theme'] . '/css/style.css' ); $html_links[] = array( 'rel' => 'StyleSheet', 'href' => NV_BASE_SITEURL . 'themes/' . $global_config['module_theme'] . '/css/style.responsive.css' );
- Tìm
- Tiếp theo bạn mở file footer_extended.tpl và tìm đoạn sau và xóa nó đi
<!-- BEGIN: theme_type --> <div class="theme-change"> <!-- BEGIN: loop --> <!-- BEGIN: other --> <a href="{STHEME_TYPE}" rel="nofollow" title="{STHEME_INFO}"><em class="fa fa-{STHEME_ICON} fa-lg"></em></a> <!-- END: other --> <!-- BEGIN: current --> <span title="{LANG.theme_type_select}: {STHEME_TITLE}"><em class="fa fa-{STHEME_ICON} fa-lg"></em></span> <!-- END: current --> <!-- END: loop --> </div> <!-- END: theme_type --> - Tiếp theo là bạn mởi file style.css và xóa đoạn mã css sau
.footerNav2 .theme-change { float:left; margin-left:10px; margin-right:10px; height:40px; } .footerNav2 .theme-change a, .footerNav2 .theme-change span { display:inline-block; margin-top:5px; margin-right:10px; line-height:30px; width:30px; background-color:#245682; color:#428BCA; text-align:center; border-radius:15px; -webkit-border-radius:15px; } .footerNav2 .theme-change span { color:#dcdcdc; background-color:#428BCA; } .footerNav2 .theme-change a:hover, .footerNav2 .theme-change span:hover { color:#fff; background-color:#428BCA; } .footerNav2 .theme-change .fa-lg { font-size:14px; } .footerNav2 .theme-change .fa-mobile { font-size:20px; margin-right:-2px; }Đoạn mã css này sẽ giúp file css load ngoài site nhẹ đi đáng kể cho việc tối ưu tốc độ load site của bạn và tăng điểm chỉ số speed trên internet.
Như vậy là những bước ban đầu cho việc vừa viết theme mới vừa tối ưu theme cho website của bạn. Tuy đơn giản như vậy nhưng cũng khá quan trọng trong một số trường hợp bạn sẽ gặp phải khi làm giao diện.
