Tạo Theme WordPress 5: Viết CSS cho giao diện Tablet

Ở bài trước chúng ta đã làm xong Viết CSS cho giao diện mobile đến bài này mình sẽ hướng dẫn các bạn viết CSS cho Tablet.

Ở đây mình xét 2 loại thiết bị đó là Small Tablet (600×800) và Tablet (ipad 2, 3, mini) (768×1024).

Đối với Small Tablet ta không có chỉnh sửa gì vì với kích thước chiều ngang như thế không thể đổ sidebar lên được, ta sẽ tiến hành viết css cho Tablet, trước tiên tạo file tablet.less trong thư mục css (nhớ vào prepros để Fresh project lại nhé các bạn).

Các bạn viết CSS vào trong đoạn code sau:

@media screen and (min-width: 768px) {
	/* Viết code CSS tại đây */
}

Phần header ta vẫn giữ nguyên, ta bắt đầu xử lý phần Wrapper ở giao diện Tablet ta sẽ chia phần này thành 2 phần đó là danh sách các bài viết mới và sidebar.

Sau đây là đoạn code css cho phần Wrapper và Footer:

@media screen and (min-width: 768px) {
	/* Viết code CSS tại đây */
	#wrapper{
		.main-content{
			width: 69%;
			float: left;
			.featured_cont{
				width: 48%;
				float: left;
			}
			.posts{
				clear: both;
			}
		}
		.sidebar{
			width: 29%;
			float: right;
			margin: 6px;
			.sidebar-item{
				margin-bottom: 4px;
				box-shadow: 3px 3px 3px #dcdcdc;
			}
		}
	}
	#footer{
		clear: both;
	}
}

Đa số các thuộc tính css này mình đã giải thích ở các bài trước nên chắc nó cũng đơn giản dễ hiểu phải không nào.

Giao diện kết quả sẽ như thế này:

Viết CSS cho giao diện Tablet
Viết CSS cho giao diện Tablet

Các bạn download code đầy đủ của bài này tại đây

Ở bài viết sau mình sẽ hướng dẫn các bạn viết phần cuối đó là viết phần css cho giao diện Desktop với menu đa cấp xổ xuống.

Tạo Theme WordPress 4: Viết CSS cho giao diện Mobile

Lời đầu tiên cho mình xin cáo lỗi với các bạn là trong thời gian nghỉ tết do ăn chơi dữ quá nên không biết bài mới được, bây giờ mình mới tiếp tục viết bài cho Serie WordPress Toàn Tập này.

Để có thể review trang web trên các loại thiết bị như mobile, tablet, … ta dùng công cụ sau đây để test trang web ngay trên trình duyệt Firefox. Vào http://lab.maltewassermann.com/viewport-resizer/ click và giữ chuột button “CLICK OR BOOKMARK” kéo vào bookmark toolbar của Firefox, sau đó vào website cần kiểm tra và bấm vào Bookmark vừa được tạo là “<->Resizer” để kiểm tra từng kích thước màn hình khác nhau.

Nào chúng ta bắt đầu Viết CSS cho Mobile, trước tiên bạn thêm đoạn code sau vào trước thẻ </head> của file index.html.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="screen and (min-width: 18.750em)" />
<link rel="stylesheet" type="text/css" href="css/small-tablet.css" media="screen and (min-width: 600px)" />
<link rel="stylesheet" type="text/css" href="css/tablet.css" media="screen and (min-width: 768px)" />
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="screen and (min-width: 1024px)" />

Dòng đầu tiên là để kích hoạt chế độ Responsive của giao diện, các dòng tiếp theo là chèn lần lượt các file css cho riêng từng loại màn hình vào giao diện.

Tiếp đó ta tạo file mobile.less trong thư mục css ta tạo lúc ban đầu, đừng quên bật Prepros nhé, tạo xong quay lại Prepros bấm Refresh để file mobile.less được cập nhật vào phần mềm.

Ta vừa làm vừa mở tool Resizer để check cho tiện, hiện tại giao diện nó sẽ như thế này:

Giao diện hiện tại chạy trên Mobile
Giao diện hiện tại chạy trên Mobile

Bắt đầu viết những dòng code đầu tiên trong file mobile.less, sau đây là đoạn code dùng để thiết lập một số thuộc tính chung cho giao diện mobile, các bạn sẽ viết code tại /* Viết code CSS tại đây */

@media screen and (min-width: 18.75em) {
	/* Viết code CSS tại đây */
}

Ta bắt đầu viết CSS cho phần Header trước, code phần header như sau:

#header{
	.top-menu{
		ul{
			padding-top: 3px;
			li{
				padding-right: 5px;
			}
		}
	}
	.site-title{
		.title{
			text-align: center;
			padding: 5px 0;
		}
		.top-banner{
			text-align: center;
			padding-bottom: 3px;
			img{
				width: 98%;
			}
		}
	}
	.header-menu{
		padding-top: 10px;
		min-height: 3em;
		a.mobile-menu{
			background: #dcdcdc;
			margin-left: 40%;
			border: 2px solid #FF0000;
			padding: 5px;
			border-radius: 3px;	
		}
	}
}

Ở phần này đáng chú ý đó là phần Header Menu, tại giao diện Mobile thì không thể nào làm menu với nhiều thuộc tính như vậy được nên ta tạo một nút Menu và sẽ viết một đoạn jQuery đơn giản để ẩn đi danh sách các menu để lại nút Menu khi click vào nút Menu sẽ hiển thị danh sách các item của Menu. jQuery được thực hiện như sau.

Trước tiên ta tạo một folder ngang hàng với index.html tên là “js” và tạo một file jquery.js với nội dung như sau:

$(document).ready(function(){
	$('.header-menu > ul').hide();
	$('a.mobile-menu').click(function(){
		$('.header-menu > ul').slideToggle(100);
	});
});

Thêm code sau vào trước thẻ :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/jquery.js"></script>

Phần Wrapper không thay đổi, Code Footer có nội dung như sau:

#footer{
	.footer-logo{
		text-align: center;
	}
}

Giao diện cuối cùng sẽ như thế này:

Viết CSS cho giao diện Mobile
Viết CSS cho giao diện Mobile

Các bạn download code đầy đủ tại đây
Bài tiếp theo mình sẽ hướng dẫn các bạn viết CSS cho giao diện Tablet.

Tạo Theme WordPress: Giới thiệu tạo Theme WordPress Responsive

Chào các bạn đã trở lại với Serie học WordPress từ A – Z của Xuân Thức Blog, Trong serie con lần này mình xin hướng dẫn các bạn tự thiết kế theme dành cho wordpress dạng Responsive.

Theme Responsive dường như nó đã quá quen thuộc với một số Developer, nó là một dạng giao diện hỗ trợ trên các loại màn hình khác nhau từ Mobile, Tablet đến Desktop. Vì nhu cầu sử dụng các loại Smart Phone, Tablet ngày càng nhiều và dẫn chiếm lĩnh thị tường internet nên việc thiết kế ra một giao diện Responsive là một điều hết sức cần thiết đối với một người thiết kế web.

Trong Serie này mình sẽ hướng dẫn các bạn tạo một Theme responsive wordpress từ căn bản nhất giúp các bạn chưa biết gì về lập trình cũng có thể tự tạo Theme wordpress độc quyền cho mình.

Nếu bạn cảm thấy Serie này hấp dẫn thì bạn có thể share cho nhiều người cùng đọc nha, đăng ký theo dõi Blog Xuân Thức để không bỏ qua bài viết nào trong Serie này nha, các bạn có thể xem hướng dẫn đăng ký nhận bài mới trên Xuân Thức Blog để dễ dang hơn trong việc đăng ký.

Tự tạo theme wordpress responsive
Tự tạo theme wordpress responsive

Mục lục bài viết trong Serie này:

1. Cài đặt và cấu hình SubLime Text 2 và Prepros.

2. Dựng trang HTML cho Theme WordPress.

3. Tạo CSS tổng quan cho Theme.

4. Tạo CSS cho màn hình Mobile.

5. Tạo CSS cho màn hình Tablet.

6. Tạo CSS cho màn hình Desktop.

7. Giới thiệu về cấu trúc WordPress và cách vận hành của WordPress.

8. Nhúng Theme vào Website WordPress (sẽ được chia làm nhiều phần nhỏ).

Bài tiếp theo mình sẽ giới thiệu và hướng dẫn các công cụ cần thiết để tự tay thiết kế một theme wordpress responsive hoàn chỉnh và chuẩn SEO.