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
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.
