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]
[/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, …:
[html]Xuân Thức Blog
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):
[html]
[/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]
[/html]
Ở đâ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ệ …
[html] [/html]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.
