Blog

Viết giao diện HTML

Hì, vậy là qua các phần trước chúng ta đã chuẩn bị đủ “đồ nghề” cùng một số kiến thức cần thiết trong việc làm theme WordPress rồi, và mình hiểu là mọi người đang rất nóng lòng để bắt tay vào ngay việc làm cái theme cho riêng mình luôn.

Ok, vậy thì bắt đầu từ bài này chúng ta sẽ cùng đi vào thế giới của những người làm theme WordPress nhé mà đầu tiên chúng ta cần đi bước đầu tiên cơ bản nhất đó là tạo khung xương cho giao diện bằng HTML đơn giản, có khung này rồi thì chúng ta mới đi vào bước viết CSS trang trí cho nó giống như mẫu.

[Phần này có video phía dưới]

Tải mẫu thực hành

Trong toàn bộ serie này chúng ta sẽ cùng làm việc với một mẫu duy nhất đã được mình thiết kế trước, bạn hãy tải về và làm theo luôn nhé.

Mẫu này chỉ gồm một file PSD duy nhất cho trang index, bởi vì các trang con như page, category, single chúng ta cũng dựa vào phần index này mà làm thôi nên mình không thiết kế ra làm chi cho mất công.

Cài đặt cấu trúc giao diện HTML

Trước hết chúng ta cần cài đặt một cấu trúc giao diện HTML sẵn đã để tí nữa sẽ tiến hành viết code cơ bản cho nó. Ở đây mình sẽ không hướng dẫn bạn khởi tạo cấu trúc thế nào vì nó khá đơn giản rồi, mà mình sẽ sử dụng một cách khác đó là gửi bạn một cấu trúc giao diện HTML mà mình đã làm sẵn.

Tải cấu trúc giao diện HTML

Sau khi tải về, bạn giải nén ra và sẽ thấy cấu trúc file và folder như thế này:

  • /html
    • /img
    • /js
    • /less_file
    • favicon.ico
    • index.html
    • normalize.min.css

Bây giờ bạn chạy file index.html nó sẽ ra một trang trắng vì nó chưa có gì cả. Bây giờ hãy mở phần mềm Sublime Text 2 lên, vào File -> Open Folder để mở thư mục html mới giải nén ra lên nhé. Sau đó mở file index.html bạn sẽ thấy như thế này:

HTML Starter Template

Mỗi phần mình đã đều ghi chú hết rồi nên chắc không có gì khó hiểu phải không nào, dĩ nhiên là mình sẽ không giải thích qua ý nghĩa của từng phần nữa vì nếu bạn đã đọc tới đây thì bạn cũng đã hiểu được HTML cơ bản từ trước.

Viết giao diện HTML đơn giản

Ok, bây giờ chúng ta sẽ đi vào phần quan trọng nhất trong bài này, đó là viết cái khung của giao diện bằng HTML đơn giản trước. Nhưng trước khi viết thì chúng ta nên xem lại mẫu giao diện một lần cho rõ.

Nhìn vào mẫu thì bạn sẽ thấy được hai phần khác biệt:

  • Phần header của website màu đen và có chiều rộng trải dài toàn màn hình (Full Width).
  • Phần nội dung thì nhỏ hơn và được đặt giữa trình duyệt.
  • Phần chân trang (footer) là Full Width.

Trong đó, #header sẽ được chỉ định làm cái khung bao toàn bộ phần header của trang web, và #wrapper sẽ là cái khung bao toàn bộ phần nội dung.

Viết HTML cho Header

Bây giờ nhìn tiếp nè, ở phần header ta sẽ có 2 phần nhỏ nữa đó là tên của website đặt bên trái và menu đặt bên phải và cái thanh top bar màu xanh nằm phía trên, nghĩa là chúng ta sẽ có 2 thẻ div khác lồng vào header và một thẻ div nằm bên trên header, ta viết phần header thêm thành như sau:

Đừng lo lắng, cứ để đấy và tới phần CSS chúng ta sẽ “làm đẹp” nó sau ha.

Viết HTML cho phần nội dung

Bây giờ chúng ta tiếp tục nhìn phần nội dung, phần này nó hơi nhiều phần mà nhìn ảnh các bạn có thể thấy nó bao gồm:

Cấu trúc phần nội dung

  1. Phần tin nổi bật (có 3 tấm ảnh).
  2. Phần nội dung
    • Nội dung bài viết
    • Sidebar bên phải.
  3. 2 cột lấy bài mới nhất ở category

Mỗi phần bên trong nó sẽ có nhiều phần riêng nữa, nhưng trước mắt là ta thấy nó đều nằm trong một khung lớn gọi là #wrapper mà ta đã viết ở đầu bài. Bây giờ trong khu vực #wrapper đó, bạn sẽ viết thêm một số thẻ div cho các phần chính như sau:

Bây giờ chúng ta sẽ tiến hành đi sâu vào từng phần nhỏ nhỏ bên trong nhé. Làm tới phần này bạn sẽ cần sử dụng ảnh chèn vào, bạn tải mấy cái ảnh tại đây, sau đó giải nén tất cả vào thư mục imgnhé.

Bây giờ hãy nhìn phần đầu tiên là phần .featured-post, ta sẽ có 3 cái khung tượng trưng cho 3 bài, và mỗi khung ta sẽ có phần hình ảnh và tiêu đề bài viết. Vậy ta sẽ viết HTML như sau:

Nhìn cũng không tệ phải hôn? Ờ cái coi, nếu ờ thì chúng ta viết tiếp phần .content nghen?

Ở phần .content, chúng ta sẽ có 2 phần chính là .content-main (bên trái) và .sidebar (bên phải), và bên trong phần .content-main thì sẽ có thêm một phần nữa là .content-category để hiển thị các bài trong một category nhất định ra.

Bây giờ trước tiên mình sẽ viết HTML cho phần .content-main trước, trong phần này ta có những phần như khung bên trái để hiển thị ảnh thumbnail, bên phải hiển thị tiêu đề bài viết, nội dung bài viết, nút mạng xã hội và nút xem thêm và lặp lại 2 lần cho 2 bài viết. Vậy thì ta sẽ có code như sau (không đụng chạm tới .content-category), hơi dài nên mình copy vào pastebin bạn xem nhé:

Code: http://pastebin.com/QjMBgt0H

P/S: Nút mạng xã hội mình sẽ tạm để là dạng chữ trước, vì localhost không nhúng mấy nút này được.

Ok, bây giờ ta sẽ viết tiếp tục phần phân trang, thực ra phần này ta chỉ viết cho nó một cái class tượng trưng coi như đặt chỗ cho nó thôi, bởi vì phần này khi chuyển qua WordPress ta sẽ làm sau vì bây giờ mình không thể nhớ được hết class của cái phân trang của WP-PageNavi.

 

Giờ nhìn xuống bạn sẽ thấy .content-category còn trống chưa có gì, chúng ta sẽ viết HTML thêm cho cái này để nó hiển thị ra 2 khung hiển thị bài theo từng category phía dưới cột bên trái. Ta có code đầy đủ như sau:

Đó là xong phần .main-content cột bên trái, bây giờ ta sẽ viết thêm cái sidebar cột bên phải nhé, cụ thể là chúng ta sẽ viết thêm vào phần .sidebar.

theme-dev-html-start-15

Viết HTML cho footer

Sau khi có phần header và content rồi thì phần cuối mà chúng ta cần làm trong bài này đó là viết HTML cho Footer, nhìn chung thì nó cũng không nhiều lắm mà chỉ có vỏn vẹn vài đoạn thế này thôi.

 

Và ta có kết quả tựa thế này (mình không chụp hết được)…

theme-dev-html-start-17

Ok, vậy là ta xong phần trang chủ bằng HTML đơn giản rồi và chúng ta sẽ tiến hành viết CSS ở phần 5.

Posted in: Dịch vụ

Leave a Comment (0) ↓

Leave a Comment

*