Serie tự thiết kế giao diện website wordpress bằng Bootstrap

Chào mọi người, hôm nay mình sẽ viết một Serie về Thiết kế giao diện website WordPress bằng Twitter Bootstrap 3, ở Serie này mình sẽ hướng dẫn các bạn về cách viết html, css dựa trên Framework Bootstrap sau đó chuyển giao diện vừa thiết kế xong sang WordPress để cho ra được một website động với đẩy đủ những tính năng và đặc biệt là hỗ trợ SEO cực tốt.

Giới thiệu Bootstrap

Bootstrap là một Framework giúp người dùng viết giao diện website hỗ trợ Responsive (Đa màn hình) mà theo mình là nó tốt và dễ sử dụng nhất.

Bootstrap sẽ chia trang website của bạn thành 12 cột có kích thước bằng nhau và hỗ trợ sẳn cho bạn các hàm để cấu hình việc phân chia bố cục website của bạn, phần này mình sẽ hướng dẫn khi bắt tay vào thiết kế giao diện.’

Các bạn có thể tham khảo thêm trên trang chủ của Bootstrap theo những đường link sau đây:

thiet-ke-giao-dien-wordpress-bootstrap

Giới thiệu Serie

Trong Serie này mình sẽ hướng dẫn các bạn hoàn thành một website hoàn chỉnh đủ để các bạn tung hoành ngang dọc 🙂 sau đây là mục lục các phần chính trong Serie Thiết kế giao diện website wordpress bằng Bootstrap:

  1. Viết sườn HTML cho trang chủ dựa trên Bootstrap.
  2. Viết CSS cho các thành phần trang chủ để có được một trang chủ hoàn chỉnh.
  3. Kế thừa các thành phần từ trang chủ để Clone ra trang danh mục và trang bài viết cũng như page.
  4. Chuyển giao diện HTML thành giao diện dành cho WordPress.
  5. Cài đặt các Plugin cần thiết cho một website WordPress.

Phần mềm hỗ trợ

Ở Serie này mình có dùng các phần mềm gồm:

  1. Xampp dùng để tạo một host ảo trên máy tính của mình giúp ta có thể chạy được wordpress ngay trên máy tính của bạn. Ở blog này thì mình có giới thiệu qua cách cài đặt Wamp nó cũng tương tự như Xampp nên các bạn có thể tìm hiểu tại đây http://xuanthuc.com/huong-dan-cai-dat-su-dung-localhost-wampserver-2-0-toan-tap.html
  2. Sublime Text 2: nó là trình soạn thảo dùng để viết code hỗ trợ WordPress tốt hơn, theo mình thì nó là tốt nhất. Các bạn có thể xem tính năng và hướng dẫn cài đặt tại đây http://xuanthuc.com/tao-theme-wordpress-1-huong-dan-cai-dat-sublime-text-2-va-prepros.html
  3. Prepros: phần mềm này dùng viết CSS bằng ngôn ngữ LESS, ngôn ngữ này nó giúp các bạn viết CSS nhanh hơn và mình cũng có giới thiệu rõ ràng trong bài viết ở trên

Ở bài tới chúng ta sẽ bắt đầu bắt tay vào việc thiết kế 1 giao diện WordPress hỗ trợ Responsive với Bootstrap.

Bài Viết Cùng Series:

GỬI BÌNH LUẬN