Tạo Theme WordPress 6: Viết CSS cho giao diện Desktop

Bài này là bài cuối cùng của phần dựng Theme bằng HTML và CSS, ở bài này mình sẽ hướng dẫn các bạn viết CSS cho Desktop với Menu đa cấp xổ xuống và tạo giao diện cho bài con.

Viết CSS cho Desktop

Mình sẽ lấy kích thước thông dụng nhất của Desktop hiện nay đó là 1366×768, cho nên ta cần phải tạo file desktop.less với nội dung ban đầu như sau:

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

Viết CSS cho Header

Tiếp theo ta viết css cho phần header, ở phần này ta sẽ chia 2 phần là site name và top banner, 2 phần này sẽ được float:left với nhau để chúng nằm cùng một hàng vì lúc này màn hình ta đã đủ rộng để chứa nó, code như sau:

@media screen and (min-width: 1366px) {
	/* Viết code CSS tại đây */
	#header{
		.site-title{
			.title{
				float: left;
				width: 30%;
				padding-top: 30px;
				text-align: left;
				margin-left: 10%
			}
			.top-banner{
				width: 50%;
				float: left;
				margin-right: 10%;
				text-align: right;
				img{
					width: 80%;
					height: auto;
				}
			}
		}
	}
}

Lưu ý: thêm đoạn code này sau thẻ div top-banner để các phần sau không bị đẩy lên trên các phần trước đó: <div style=”clear: both;”></div>

Viết CSS cho Menu

Tiếp theo ta đến phần Menu, trên màn hình Desktop ta sẽ làm menu dạng xổ xuống đa cấp, code của phần này như sau:

@media screen and (min-width: 1366px) {
	/* Viết code CSS tại đây */
	#header{
		.header-menu{
		    clear: both;
		    background-color: #007f74;
		    border-top: 1px solid #fff;
		    border-bottom: 3px solid #e0e0e0;
		    padding-bottom: 3px;
		    a.mobile-menu{
		    	display: none !important;
		    }
		    > ul{
		    	width: 80%;
			    margin: auto;
			    display: block !important;
			    height: 40px;
			    margin-bottom: 10px;
			    li{
			    	position: relative;
				    display: inline-block;
				    padding: 10px 10px;
				    border-left: solid 1px #006b62;
				    a{
				    	overflow: auto;
					    padding: 10px;
					    border-left: solid 1px #019e90;
					    border-right: solid 1px #019e90;
					    height: 40px;
					    color: #fff;
					    &:hover{
					    	color: #ed1b2e;
					    }
				    }
				    &:hover{
				    	background-color: #00665d;
				    	ul{
				    		display: block;
				    	}
				    }
				    ul{
				    	position: absolute;
					    top: 42px;
					    left: -30px;
					    z-index: 999;
					    width: 230px;
					    margin: 0;
					    padding: 0;
					    display: none;
					    background-color: #ed1b2e;
					    border-bottom-right-radius: 3px;
					    border-bottom-left-radius: 3px;
					    li{
					    	display: list-item;	
    						border: none !important;
    						a{
    							border: none !important;
    							padding: 10px;
    						}
					    }
				    }
			    }
		    }
		}
	}
}

Mình xin giải thích một số phần trong css tạo menu:

– Đầu tiên display none nút menu có ở giao diện di động đi và display:block toàn bộ thẻ <ul> của menu lên.

– Tại thẻ <li> của chuyên mục cha ta thiết lập thuộc tính position:relative, thẻ <ul> của chuyên mục con sẽ thiết lập position:absolute để định vị trí ngay dưới chuyên mục cha khi người dùng rê chuột vào chuyên mục cha.

– Ban đầu ta ẩn các chuyên mục con đi, khi nào người dùng rê chuột vào chuyên mục cha (thuộc tính hover xử lý việc rê chuột) thì sẽ display:block thẻ<ul> tương ứng.

Viết CSS cho Wrapper (Thân trang web)

Tiếp đến ta đến phần Wrapper của trang web, ở phần này ta thiết lập một số thuộc tính như code sau:

@media screen and (min-width: 1366px) {
	/* Viết code CSS tại đây */
	#wrapper{
		width: 80%;
		margin: 0 auto;
		.main-content{
			.content{
				width: 98.5%;
				.posts{
					overflow: hidden;
					.post-title{
						margin-bottom: 5px;
					}
					.thumb{
						width: 20%;
						float: left;
						img{
							width: 100%;
						}
					}
					.posts-exceprt{
						width: 80%;
						float: left;
					}
				}
			}
		}
	}
}

Giải thích phần Wrapper:

– Đặt chiều rộng 80% và margin: 0 auto để đưa Wrapper vào giữa.

– Thuộc tính overflow:hidden là để chiều cao của thẻ div.posts tự động fix theo nội dung bên trong, nếu không có phần này thì phần background của posts sẽ không bao trọn được nội dung, các bạn cứ thử thì sẽ biết.

Viết CSS cho Footer

Cuối cùng là phần Footer, ở phần này mình chỉ có chỉnh sửa chút xíu như code sau các bạn xem nhé:

@media screen and (min-width: 1366px) {
	/* Viết code CSS tại đây */
	#footer{
		.footer-info{
			width: 80%;
			margin: 0 auto;
		}
	}
}
Trang chủ khi hoàn tất

Trang chủ khi hoàn tất

Dựng Theme cho trang Danh Mục và Trang Con

Và bây giờ mình sẽ hướng dẫn bạn phần cuối cùng trong công đoạn dựng Theme bằng HTML, CSS đó là thiết kế trang con và trang danh mục cho trang web.

Phần này nó sẽ đơn giản hơn nhiều nếu như ta đã thiết kế xong trang chủ.

Dựng theme cho trang danh mục

Bước 1: Bây giờ ta tạo thêm một file html với tên gọi là category.html

Bước 2: Sau đó tiến hành copy toàn bộ code của file index.html

Bước 3: Ở giao diện chuyên mục gần như khong khác gì trang chủ cho lắm, chỉ cần bỏ đi phần div.featured_cont là xong.

Bước 4: Vì code hơi nhiều nên các bạn down trực tiếp file ở cuối bài để xem nhé.

Dựng theme cho trang con

Bước 1: Tạo một file html với tên gọi là single.html

Bước 2: Copy toàn bộ code của trang category.html vào.

Bước 3: Ở giao diện trang con thì ta sẽ bỏ đi các phần div.featured_cont và div.content

Bước 4: Tạo div mới cho phần hiển thị nội dung bài viết, code của phần div.wrapper như sau:

<div id="wrapper">
		<div class="main-content">
			<div class="breadcrumbs"><a href="#">Trang chủ</a> > <a href="#">Wordpress</a> > <a href="#">Wordpress Development</a> > Tạo Theme WordPress 5: Viết CSS cho giao diện Tablet</div>
			<div class="single">
				<h1>Giới thiệu lịch sử WordPress</h1>
				<div class="content-single">
				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 <a title="wordpress" href="http://xuanthuc.com/thu-thuat-wordpress" target="_blank">Wordpress</a> ở đâ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).

				<a href="http://xuanthuc.com/wp-content/uploads/wordpress-toan-tap.jpg"><img class="size-medium wp-image-40" src="http://xuanthuc.com/wp-content/uploads/wordpress-toan-tap-300x300.jpg" alt="Giới thiệu mã nguồn mỡ WordPress" width="300" height="300" /></a>

				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.
								</div>
			</div>
		</div><!-- end .main-content -->
	</div><!-- end #wrapper -->

Bước 5: Viết css cho phần wrapper: Tại file style.less mình thêm phần css định dạng cho trang con như sau:

#wrapper{
  .main-content{
    .single{
      width: 98%;
      margin: 0 auto;
      padding: 10px;
      margin-top: 5px;
      background: #fff;
      overflow: hidden;
      border: 1px solid #dcdcdc;
      border-radius: 3px;
      box-shadow: 3px 3px 3px #dcdcdc;
      margin-bottom: 10px;
      h1{
        margin: 0;
        padding-bottom: 10px;
        font-size: 20px;
      }
    }
    .breadcrumbs{
      width: 98%;
      margin: 0 auto;
      padding: 10px;
      margin-top: 5px;
      background: #fff;
      overflow: hidden;
      border: 1px solid #dcdcdc;
      border-radius: 3px;
      box-shadow: 3px 3px 3px #dcdcdc;
      margin-bottom: 10px;
      font-size: 13px;
    }
  }
}

Tới đây chúng ta đã hoàn tất việt dựng Theme bằng HTML, CSS, các bạn xem cách chuyển HTML sang Theme WordPress tại phần 5 và 6 của Serie thiết kế giao diện wordpress bằng Bootstrap: http://xuanthuc.com/tao-theme-bootstrap-p5-chuyen-html-sang-giao-dien-wordpress.html

Các bạn có thể down full code của bài hôm nay tại đây.

Bài Viết Cùng Series:

GỬI BÌNH LUẬN