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.

Giới thiệu về lịch sử WordPress

WordPress xuất hiện đầu tiên vào năm 2003 chỉ với mục đích là để cho người dùng viết Blog với số lượng người dùng lúc bấy giờ chỉ vọn vẹn đếm trên đầu ngón tay và ngón chân, và nó đã phát triển mạnh cho đến ngày nay và trở thành mã nguồn lớn nhất thế giới với gần 80 triệu trang web được viết từ WordPress trên toàn thế giới.

Điểm ưu thế của WordPress ở đây là nó hoàn toàn miễn phí và bạn có thể dùng nó để tạo website đơn giản hoặc là website doanh nghiệp.

Chỉ cần lên trang chủ của WordPress down bản mới nhất về và cài đặt là bạn đã sở hữu 1 website có thể tùy biến rất dễ dàng, và yêu cầu của nó là phải có một máy chủ, 1 tên miền. Tuy vậy WordPress vẫn có một dịch vụ hoàn toàn miễn phí mà không cần những thứ đó, wordpress.com giải quyết vấn đề đó cho bạn với một số hạn chế đó là ít tùy biến, và phải lệ thuộc vào máy chủ của WordPress (đăng bài spam sẽ bị khóa tài khoản ngay và luôn).

Giới thiệu mã nguồn mỡ WordPress
Giới thiệu mã nguồn mỡ WordPress

WordPress bắt đầu chỉ là một Blog nhưng đã phát triển rất mạnh đến ngày nay với đầy đủ các tính năng chuyên nghiệp nhất nhờ vào hệ thống hàng ngàn plugin, widget và theme do chính wordpress phát triển hoặc cộng đồng đóng góp cũng như các công ty thương mại.

WordPress được viết bằng ngôn ngữ PHP và hệ quản trị cơ sở dữ liệu phổ biến nhất hiện nay MySQL, và được cấp phép theo GPLv2.

Kết lại một câu là WordPress là mã nguồn mà mình thích nhất bởi ở tính năng, tính dễ sử dụng và đặc biệt là nó nhẹ.

Bài tiếp theo mình sẽ giới thiệu các công cụ cần thiết để thiết kế website với wordpress.