Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Wordpress Tips > Hướng dẫn thiết kế theme wordpress – Khởi động
Hướng dẫn thiết kế theme wordpress – Khởi động
Nguyễn Trung Hiếu
Share Code Web Company 2013

Hướng dẫn thiết kế theme wordpress – Khởi động

Trong loạt bài viết này, sharecodeweb.net sẽ hướng dẫn các bạn cách tạo một theme wordpress hoàn chỉnh, đi từ khâu chuẩn bị mã nguồn cho tới khi lên kệ. Các bạn chú ý theo dõi nhé.

Demo hình ảnh mà chúng ta sẽ làm

creating wordpress theme for static HTML
Ở bài viết này, chúng ta sẽ làm các khâu chuẩn bị để phục vụ cho việc thiết kế theme wordpress được hoàn chỉnh. Và trước khi bắt đầu thiết kế bất cứ một theme nào, thì bạn cần phải có một file HTML tĩnh, hoặc chí ít là file PSD thiết kế layout cho giao diện của bạn. Và giới hạn nội dung bài viết này, sẽ chỉ cho bạn một số điểm cần lưu ý, cũng như cách thiết kế theo chuẩn HTML5, chứ không thể hướng dẫn bạn design layout chi tiết được. Nếu bạn muốn nhanh, có thể lên deviantart để tìm sẽ có rất nhiều layout cho bạn tham khảo. Hoặc có thể tham khảo một số bài viết mà sharecodeweb đã share dưới đây:

Nguyên liệu của bài học

Để thực hiện được bài học này, bạn cần những thứ sau

  • Một bộ code editor mà bạn thích
  • Một trình duyệt tốt để có thể nhìn thấy ngay kết quả của bạn

HTML5 và WordPress

Một số thẻ tag phổ biến của HTML5 mà bạn có thể kể đến như là < aside> hay < article>….và cấu trúc của một file HTML để có thể làm theme wordpress thì theo mình nó sẽ như sau:

Như bạn thấy ở trên đây, code rất sạch, và sử dụng hầu hết HTMl5 để phục vụ cho việc thiết kế theme wordpress của chúng ta, toàn bộ thẻ này sẽ được đặt ngay ngắn bên trong thẻ < body> của bạn.

  • Phần Header – trong < header>
  • Phần nội dung – Tôi cố tình sử dụng < div id="content">.
  • Phần sidebar (nếu bạn có một) – ở đây tôi đang sử dụng < aside class="sidebar">.
  • Phần footer – trong < footer>.

Thêm các class và ID

Và để cho code của bạn thật sạch, và bạn có thể theo dõi, chỉnh sửa dễ dàng sau này, thì mình nghĩ bạn cũng nên học theo cách này, đó là viết cái xương của theme trước, sau đó mới thêm các class cũng như ID vào bên trong, và cuối cùng mới đi style theo các class và ID này.

Header

Phần bên trái của khu vực header sẽ chứa tên của blog cũng như mô tả của blog mà bạn muốn. Ở đây tôi làm như sau

Phần bên phải của khu vực header, chúng ta sẽ để số điện thoại, địa chỉ hay bất cứ thứ gì mà bạn muốn.

Ảnh – Image

Để thao tác với những bức ảnh, chúng ta cũng nên thống nhất cách đặt tên class và ID cho tiện thao tác.
Với featured Image thì

Với các image khác thì

Và chúng ta sẽ style cho nó như đoạn css dưới đây, đây chỉ là một mẫu css mà mình đưa ra, còn bạn có thể tự do design thoải mái theo ý mình nhé.

Như vậy chúng ta đã được như hình dưới đây
theme wordpress for static html

Sidebar và Footer

Tương tự với các phần khác, phần sidebar sẽ có cấu trúc như sau:

Và footer chúng ta cũng thêm các class và ID với bố cục như sau

Download code

Như vậy là bạn đã hoàn thành xong cơ bản cấu trúc của một file HTML theo chuẩn HTML5 rồi đó, hy vọng với “bộ xương” này, bạn sẽ có rất nhiều theme đẹp khác nhé.
Nếu như bạn nào vẫn chưa hiểu cách sử dụng HTML5 cho từng phần, từng khu vực của theme wordpress, thì có thể download code bên dưới về tìm hiểu nhé. Goodluck for you!

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}