Tạo Theme WordPress 3: Viết CSS thành phần chính cho HTML

Ở bài trước chúng ta đã hoàn thành xong sườn của theme bằng html rồi, bây giờ chúng ta bắt đầu xác định các thành phần chính của website và viết css cho những phần chung cho các kích thước màn hình khác nhau.

Các bạn nhìn vào trang chủ Xuân Thức Blog sẽ thấy các phần chung dành cho các loại màn hình như sau:

  • Màu background, màu chữ, màu hover, border.
  • Màu Background của Site Title.
  • Màu background của trang web.
  • Màu background của Featured Posts và các posts.
  • Sidebar.
  • Màu background của Footer, màu chữ, màu hover.

Nào chúng ta bắt đầu vào xây dựng CSS thôi, trước tiên các bạn tạo một file style.less ngang hàng với file index.html và bổ sung thêm vào thẻ <head> của index.html đoạn sau để gọi file style.css (style.css được sinh ra khi bạn save file style.less – với điều kiện là phần mềm Prepros phải được mở nha).

<link rel="stylesheet" href="normalize.min.css" /> <!--Reset CSS-->
<link rel="stylesheet" type="text/css" href="style.css" media="screen, projection" />

Bắt đầu viết nội dung cho file style.less, trước tiên bạn thêm đoạn này vào đầu file style.less:

body {
  font-size: 93.8%;
  line-height: 1.5em;
  background-color: #EFEFEF;
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
}
a {
  color: #1e4684;
  text-decoration: none;
}
a:hover {
  color: #ed1b2d;
}
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Một số thông giải thích như sau:

  • font-size: 93.8%; ở đây nghĩa là ta đưa tỷ lệ của đơn vị em = 15px cho dễ tính, mặc định nó là 16.
  • line-height: 1.5em; là khoảng cách giữa các dòng văn bản với nhau.
  • background-color: #EFEFEF; là màu nền của trang web.
  • ahover chắc các bạn cũng đã biết đó là thiết lập cho link và khi rê chuột vào link.
  • before, after là để set cho các trình duyệt khác như IE chẳng hạn khỏi bị tràn chữ ra ngoài khung.

Tiếp đến ta viết CSS cho phần Header:

#header{
  width: 100%;
  .top-menu{
    margin: 0;
    height: 2em;
    background: #000;
    ul{
      margin: 0;
      list-style: none;
      li{
        display: inline;
        a{
          color: #fff;
        }
      }
    }
  }
  .site-title{
    background: #49B3EB;
    .title{
      h1{
        margin: 0;
        a{
          color: #FF8040;
        }
      }
    }
  }
  .header-menu{
    background: #858585;
  }
}

Ở phần này có một số thông số đáng chú ý đó là:

  • margin: 0; trong thẻ ul để canh lề lại cho thẻ này vì thẻ này mặc định nó bị đẩy vào.
  • list-style: none; lệnh này dùng để bỏ các dấu chấm đen đằng trước mỗi item của list.
  • display: inline; lệnh này dùng để đưa các phần từ về cùng một hàng thay vì nó dạng cột như mặc định.

Tiếp đến là viết CSS cho phần Wrapper:

#wrapper{
  .main-content{
    .featured_cont{
      margin: 5px;
      border: 1px solid #d6d6d6;
      border-radius: 3px;
      box-shadow: 3px 3px 3px #dcdcdc;
      .featured_posts{
        background: #fff;
        margin: 2px;
        border-radius: 2px;
        .featured-title{
          background: #3C78E8;
          text-align: center;
          font-weight: bold;
          color: #fff;
          border-top-left-radius: 2px;
          border-top-right-radius: 2px;
        }
        .posts-title{
          padding-left: 5px;
          font-weight: bold;
        }
        .thumb{
          img{
            border: 1px solid #dcdcdc;
          }
        }
        .posts-exceprt{
          padding: 5px;
        }
        .posts-item{
          ul{
            margin: 0;
            list-style: none;
            li{
              padding-left: 18px;
              background: url("images/list-icon.png") left no-repeat;
            }
          }
        }
      }
    }
    .content{
      .posts{
        background: #fff;
        border: 1px solid #d6d6d6;
        border-radius: 3px;
        margin: 5px;
        box-shadow: 3px 3px 3px #dcdcdc;
        padding: 5px;
        .post-title{
          a{
             font-weight: bold;
             font-size: 18;
          }
        }
        .thumb{
          img{
            border: 1px solid #dcdcdc;
          }
        }
        .posts-exceprt{
          padding: 5px;
        }
      }
    }
  }
  .sidebar{
    .sidebar-item{
      background: #fff;
      border-radius: 4px;
      border: 1px solid #dcdcdc;
      .widget-title{
        background: #3C78E8;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        text-align: center;
        font-weight: bold;
        color: #fff;
      }
      .textwidget{
        ul{  
          margin: 0;
          list-style: none;
          li{
            padding-left: 18px;
            background: url("images/list-icon.png") left no-repeat;
          }
        }
      }
    }
  }
}

Các thông số đáng chú ý trong phần Wrapper:

  • border: 1px solid #d6d6d6; lệnh này dùng để tạo đường viền độ dày 1 pixel cho div với màu là #d6d6d6.
  • border-radius: 3px; thẻ này dùng để bo góc 3px cho div đó.
  • box-shadow: 3px 3px 3px #dcdcdc; lệnh này dùng để đổ bóng cho div.
  • background: url(“images/list-icon.png”) left no-repeat; lệnh này trong li dùng để tạo background bên trái cho item.

Cuối cùng là viết CSS cho phần Footer:

#footer{
  background: #5C5C5C;
  border-top: 3px solid #FF0606;
  .footer-logo{
    color: #fff;
    font-size: 18;
  }
  .footer-info{
    color: #272727;
  }
}

Hoàn tất ta sẽ được tương tự như thế này:

Hướng dẫn Viết CSS cho HTML
Hướng dẫn Viết CSS cho HTML

Ở bài trước mình có nhầm tí là id=”footer” nhưng mình để là class=”footer” các bạn sửa lại nhé, mời các bạn download bản mới dành cho bài này tại đây, phần sau mình sẽ hướng dẫn viết CSS dành cho giao diện mobile.

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.

Code tạo Menu trái trượt theo website khá cool

Hôm nay lang thang trên mạng thấy cố một bạn share code tạo Menu trái trượt theo website khá cool, nên share lên blog cho anh em down về dùng, code bằng html và css nên chắc không có vấn đề gì đối với anh em, nếu ai không tích hợp được vào website thì pm mình bằng cách bình luận bài bên dưới nha, mình sẽ hướng dẫn.

Demo tại đây: http://ptc.org.vn/demo/menu-left-fixed

code-menu-dep
Code menu khá đẹp cho các bạn

Các bạn download tại đây