Thiết kế theme WP: Chuẩn bị và khai báo file style.css

Chào các bạn, công việc của bài này là làm các bước chuẩn bị và khai cơ bản cho file style.css Công việc này tuy đơn giản nhưng cũng rất quan trọng trong việc thiết kế theme wordpress.

Các bước chuẩn bị trong thiết kế theme wordpress:

Đầu tiên hiển nhiên là phải cài đặt WordPress rồi, sau đó vào thư mục chứa các themes trong wordpress theo máy mình là: E:\AppServ\www\wordpress\wp-content\themes và tạo thư mục theme. Ví dụ mình đặt tên là wp-bcdonline.

Thư mục chứa theme wp

Thư mục chứa theme wp

Bạn mở các thư mục theme mình tạo thư mục images thư mục này dùng để chứa các hình ảnh sử dụng trong theme. Bạn dùng notepad tạo các file header.php, index.php, functions.php, footer.php, sidebar.php Vậy là chúng ta xong phần khởi tạo ban đầu.

các file chính trong theme WordPress

các file chính trong theme WordPress

Chức năng cơ bản các file này bạn có thể xem ở phần trước. Bây giời chúng ta sẽ vào file style.css. File này sẽ chứa tất cả các định đạng CSS trong theme và mặc định wordpress framework chỉ nhận định dạng từ file này do đó bạn đặt phải đúng tên để đúng nơi nó nằm trong thư mục gốc của theme.

Bạn mở file style.css lên bằng notepad gõ vào các dòng sau đây:

<!--
/*
      Theme Name: wp-bcdonline
      Theme URI: http://bcdonline.net/
      Description: Widget ready and tested on WP 2.3.1
      Version: 1.0
      Author: bancamden
      Author URI: http://bcdonline.net/
      Tags: gi do
*/
-->
  • Theme Name: Tên của theme
  • Theme URI: Địa chỉ trang web của theme, thường gõ vào địa chỉ này bạn sẽ down dc theme này
  • Description: Ghi chú
  • Version: Phiên bản
  • Author: Tác giả tạo ra theme
  • Author URI: Địa chỉ website của tác giả
  • Tags: Là các từ khóa quan trọng

Bạn có thể tham khảo file chuẩn của css info theme tại địa chỉ này: http://codex.wordpress.org/Theme_Development

Vài lưu ý khi bạn làm việc trên file style.css:

Để vào định dạng người ta thường reset tất cả các tag html cơ bản về định dạng default, hiển nhiên bạn không phải làm chuyện này cũng được. Nếu bạn sử dụng reset thì đây là reset mẫu:

<!--
/*----------------------------------------------------*/
/*--------------------  RESET  -----------------------*/
/*----------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video { 	margin: 0; 	padding: 0; 	border: 0; 	font-size: 100%; 	font: inherit; 	vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {
     display: block;
}
body {
     line-height: 1;
}
ol, ul {
     list-style: none;
}
blockquote, q {
     quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
     content: '';
     content: none;
}
table {
     border-collapse: collapse;
     border-spacing: 0;
}

-->

Bạn có thể theme khảo css reset tại địa chỉ này: http://meyerweb.com/eric/tools/css/reset/

Khai reset tất cả về mặc định trong lúc bạn style cho theme đỡ phát sinh ra các chuyện linh tinh k kiểm soát dc. Hiển nhiên là đây là file mẫu bạn có thể reset theo cách của bạn.

Khi style cho phần nào bạn nên đặt tên cho phần đó, Ví dụ như trên reset thì tôi dành riêng cho một tiêu đề bạn định dạng cho header thì có tiêu đề header, index thì có tiêu đề index sau này tìm kiếm để chỉnh sửa sẽ dễ dàng hơn nhiều.

Sau khi bạn style xong nếu được nên tạo phía trên một list các tiêu đề để khi nào cần tra cứu sẽ bít cái nào trên cái nào dưới sẽ lợi hơn rất nhiều.

Kết luận: Vậy là xong bước chuẩn bị và tạo file style.css đây là những gì cơ bản nhất, anh em góp ý tích cực nha!

VN:F [1.9.22_1171]
Rating: 4.5/10 (2 votes cast)
Thiết kế theme WP: Chuẩn bị và khai báo file style.css, 4.5 out of 10 based on 2 ratings
Share This