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 2: Dựng trang HTML cho Trang Web

Trong bài viết này mình sẽ hướng dẫn các bạn dựng sườn của theme wordpress bằng html cho trang chủ, trang con ta có thể lấy lại trang chủ và sửa phần nội dung lại.

Mình sẽ dựa vào chính trang chủ của mình để làm ví dụ cho các bạn dễ hình dung nha.

Một trang web thông thường có 3 phần chính đó là header, wrapper, footer. Các thành phần con như sau:

  • Header: Site Title hoặc Logo, Header Banner, Menu.
  • Wrapper: Nội dung chính, Sidebar.
  • Footer: Thông tin trang web.

Trong theme sẽ sử dụng các thẻ <div> để chứa các thành phần của trang web kèm theo các class hoặc id của nó. Dựa vào các thông tin trên ta có một sườn như sau:

<html>
<head>
	<title>Xuân Thức Blog</title>
</head>
<body>
	<header id="header">
		<div class="top-menu">
			
		</div>
		<div class="site-title">
			<div class="logo"></div>
			<div class="top-banner"></div>
		</div><!-- end .site-title -->
		<div class="header-menu">
			
		</div>
	</header>
	<div id="wrapper">
		<div class="main-content">
			
		</div><!-- end .main-content -->
		<div class="sidebar">
			
		</div><!-- end .sidebar -->
	</div><!-- end #wrapper -->
	<footer class="footer">
		<div class="footer-logo"></div>
		<div class="footer-info">
			
		</div><!-- end .footer-info -->
	</footer>
</body>
</html>

Giờ ta bắt đầu xây dựng HTML đầy đủ cho theme.

Code phần header gồm có top menu, site-title và header-menu trong đó header-menu là dạng menu đa cấp trong trường hợp này thì menu WordPress có các menu con là WordPress Development, …:

<header id="header">
	<div class="top-menu">
		<ul>
			<li><a href="#">Trang chủ</a></li>
			<li><a href="#">Giới thiệu</a></li>
			<li><a href="#">Liên hệ</a></li>
			<li><a href="#">Gửi bài</a></li>
		</ul>
	</div>
	<div class="site-title">
		<div class="title"><h1>Xuân Thức Blog</h1></div>
		<div class="top-banner"><img src="http://ptc.org.vn/images/banner/dang-ky-feedburner.jpg"></div>
	</div><!-- end .site-title -->
	<div class="header-menu">
		<a href="#" class="mobile-menu">Menu</a>
		<ul>
			<li><a href="#">Trang chủ</a></li>
			<li>
				<a href="#">Wordpress</a>
				<ul>
					<li><a href="#">Wordpress Development</a></li>
					<li><a href="#">Wordpress Theme</a></li>
					<li><a href="#">Wordpress Plugin</a></li>
				</ul>
			</li>
			<li><a href="#">Design</a></li>
			<li><a href="#">Dịch vụ</a></li>
		</ul>
	</div>
</header>
Dựng HTML cho theme wordpress
Dựng HTML cho theme wordpress

Phần Wrapper gồm có 2 phần chính đó là main-content và sidebar, trước tiên ta tạo code cho phần main-content (trong phần này gồm có featured-posts và danh sách các bài mới):

<div class="main-content">
	<div class="featured_cont">
		<div class="featured_posts">
			<div class="featured-title">Thủ Thuật WordPress</div>
			<div class="posts-title">Giới thiệu lịch sử WordPress</div>
			<div class="thumb"><img src="images/wordpress.jpg"></div>
			<div class="posts-exceprt">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</div>
			<div class="posts-item">
				<ul>
					<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
					<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
					<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
					<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				</ul>
			</div><!-- end .posts-item -->
		</div><!-- end .featured_posts -->
	</div><!-- end .featured_posts -->
	<div class="featured_cont">
		<div class="featured_posts">
			<div class="featured-title">Thủ Thuật WordPress</div>
			<div class="posts-title">Giới thiệu lịch sử WordPress</div>
			<div class="thumb"><img src="images/wordpress.jpg"></div>
			<div class="posts-exceprt">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</div>
			<div class="posts-item">
				<ul>
					<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
					<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
					<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
					<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				</ul>
			</div><!-- end .posts-item -->
		</div><!-- end .featured_posts -->
	</div><!-- end .featured_posts -->
	<div class="content">
		<div class="posts">
			<div class="post-title"><a href="#">Giới thiệu lịch sử WordPress</a></div>
			<div class="thumb"><a href="#"><img src="images/wordpress.jpg"></a></div>
			<div class="posts-exceprt">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</div>
		</div><!-- end .posts -->
		<div class="posts">
			<div class="post-title"><a href="#">Giới thiệu lịch sử WordPress</a></div>
			<div class="thumb"><a href="#"><img src="images/wordpress.jpg"></a></div>
			<div class="posts-exceprt">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</div>
		</div><!-- end .posts -->
		<div class="posts">
			<div class="post-title"><a href="#">Giới thiệu lịch sử WordPress</a></div>
			<div class="thumb"><a href="#"><img src="images/wordpress.jpg"></a></div>
			<div class="posts-exceprt">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</div>
		</div><!-- end .posts -->
		<div class="posts">
			<div class="post-title"><a href="#">Giới thiệu lịch sử WordPress</a></div>
			<div class="thumb"><a href="#"><img src="images/wordpress.jpg"></a></div>
			<div class="posts-exceprt">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</div>
		</div><!-- end .posts -->
	</div><!-- end .content -->
</div><!-- end .main-content -->
[/htnl]

Những thẻ html trên cũng khá là dễ hiểu nên mình không giải thích qua nữa. Giờ đến phần Sidebar:

[html]
<div class="sidebar">
	<div class="sidebar-item">
		<div class="widget-title">Bài viết mới nhất</div>
		<div class="textwidget">
			<ul>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
			</ul>
		</div>
	</div><!-- end .sidebar-item -->
	<div class="sidebar-item">
		<div class="widget-title">Bài viết mới nhất</div>
		<div class="textwidget">
			<ul>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
			</ul>
		</div>
	</div><!-- end .sidebar-item -->
</div><!-- end .sidebar -->

Ở đây mình dùng thẻ div class=”textwidget” vì mặc định thằng WordPress khi tạo Widget là nó chưa thẻ này trong phần nội dung của widget đó. Mình định dạng trước cho tiện.

Tiếp theo là phần cuối cùng, phần Footer cho trang web, phần này chủ yếu là để chứa thông tin website, liên hệ …

<footer class="footer">
	<div class="footer-logo">Xuân Thức Blog</div>
	<div class="footer-info">
		XuanThuc Blog Copyright© 2013 - Chuyên trang chia sẻ kiến thức về Thiết Kế Web và Lập Trình Ứng Dụng<br>
		(Nếu copy bất kỳ bài viết nào trên XuanThuc Blog vui lòng để lại nguồn để tôn trọng tác giả)
	</div><!-- end .footer-info -->
</footer>

Tạm thời để cái trang giao diện nó xấu vậy nhé, bài sau mình sẽ hướng dẫn trang điểm cho em nó đẹp hơn lộng lẫy hơn, các bạn có thể download source của bài này tại đây.

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.