Hehe!
Vậy là cuối cùng cũng đến thời điểm mình giới thiệu serie này, phải nói là đây là một serie hướng dẫn WordPress mà mình đã ấp ủ khá lâu rồi nhưng do chưa có cơ hội và đủ kinh nghiệm để giới thiệu sớm đến mọi người. Nhưng bây giờ thì điều đó đã được thực hiện, đã sẵn sàng giới thiệu đến mọi người một serie hướng dẫn mang tên Tự thiết kế theme WordPress với 960 Grid từ đầu tới cuối, miễn sao bạn có thể tự làm một theme đơn giản như ảnh dưới.
Trong bài này mình sẽ chưa vội đưa các bạn vào nội dung hướng dẫn ngay mà mình sẽ nói qua một số điều cũng như cho mọi người biết những gì chúng ta cần chuẩn bị.
Giới thiệu 960 Grid và vì sao nên dùng?
Trước khi đọc thì bạn nên tải bộ 960 Grid System về máy trước cái đã rồi cất nó ở một nơi nào đó trước đi và nên xem qua 2 bài dưới đây để hiểu thêm về 960 Grid.
- Giới thiệu 960 Grid – CSS Framework.
- Học thiết kế: 960 Grid System.
960 Grid là một CSS Framework hỗ trợ bạn chia layout website nhanh chóng với độ rộng chuẩn là 960px (có thể chỉnh hơn tại đây). 960 Grid hỗ trợ nhiều nhất là layout dạng lưới với 24 cột và tối thiểu là 12 cột. Thường thì chúng ta sẽ sử dụng loại 12 cột để làm một giao diện website đơn giản, nhưng nếu bạn muốn có nhiều cột hơn để tinh chỉnh theme nâng cao thì có thể sử dụng loại 16 hay 24 cột.
Ban đầu bạn có thể hơi lạ lẫm khi làm việc với CSS Framework nhưng thực ra cũng dễ dùng lắm và bạn sẽ nhanh chóng quen thôi nếu bạn đã có kiến thức về CSS, ít nhất là sau tut này bạn sẽ hiểu được cách dùng ^^. Ở đây mình xin nói qua về việc áp dụng 960 Grid lên theme mà chúng ta sẽ làm.
Toàn bộ theme chúng ta sẽ sử dụng 12 cột với tổng chiều rộng là 960px, trong đó có 20px lề biên. Nghĩa là nội dung toàn bộ website của chúng ta sẽ có kích thước 940px.
- Phần header chia ra làm 2 khung. Khung hiển thị logo sẽ có 5 cột và khung hiển thị menu là 8 cột.
- Phần menu dưới header chỉ 1 khung và dĩ nhiên, khung đó có luôn 12 cột.
- Phần nội dung chia làm 2 khung. 8 cột cho phần hiển thị nội dung bài viết bên trái và 4 cột hiển thị sidebar bên phải.
- Phần Footer Widget chia làm 3 khung và mỗi khung có 4 cột.
Bạn thấy không, do chúng ta sử dụng loại 12 cột nên tất cả các thành phần ở trong theme luôn có tổng là 12 cột. Và mỗi phần như vậy mình sẽ luôn có một thẻ div để tạo khung 12 cột cho nó. Nếu bạn vẫn chưa hiểu lắm về các cột trong theme chúng ta sắp sửa làm thì có thể xem ảnh này, mỗi cột màu đỏ mình tính là 1 cột.
Lý do mà trong bài cơ bản này mà lại sử dụng một thứ đáng lẽ không nên dùng ở bước cơ bản là vì nó sẽ giúp bạn tiết kiệm rất nhiều thời gian để thiết kế website do việc phân chia các cột sẵn, chỉ việc lấy ra và sử dụng thôi thay vì phải đặt kích thước cho mỗi thành phần rồi float trái, float phải khá phiền phức, nhưng nếu bạn là người mới thì đừng nên lạm dụng quá. Nếu bạn sử dụng cái này quen rồi thì việc thiết kế website sẽ trở nên nhẹ nhõm đi rất nhiều, giúp bạn tập trung nhiều hơn vào WordPress thay vì các thành phần này.
Kiến thức nền tảng
Như bài Học gì để thiết kế theme WordPress mình đã chỉ ra rõ những gì cần học nếu muốn tự làm theme WordPress. Thực ra nếu bạn theo dõi series này thì sẽ không cần trang bị nhiều đến như vậy đâu nhưng ít nhất bạn cũng nên chuẩn bị các kiến thức cơ bản nhất như:
- Cách sử dụng WordPress căn bản như Posts, Pages, Widget,….Xem thêm bộ video hướng dẫn WordPress của mình.
- Kiến thức HTML cơ bản, có thể phân biệt giữa ID và Class, thành thạo một số tag thông dụng như div, a, p, ul ol li,….
- CSS căn bản đủ dùng, trong series này sẽ không có nhiều khái niệm phức tạp nhưng ít nhất bạn cũng biết float, background, color, margin, padding và quan trọng là cách sử dụng vùng chọn (Selector).
- PHP căn bản, đủ để hiểu được đâu là hàm, biến, mảng, giá trị và những toán tử cơ bản.
Chỉ vậy thôi, liệt kê ra thấy nhiều nhưng mình nghĩ là những ai đang ở đây thì đã biết hết rồi cả đấy. Không tin ư, cứ theo dõi thì biết.
Công cụ cần chuẩn bị
Khi tiến hành thiết kế theme WordPress hoặc theo dõi serie này thì bạn nên cài đặt sẵn một số công cụ sau vào máy.
- Một IDE hoặc Editor cần thiết như Notepad++, phpDesigner, Aptana Studio, CodeLobster. Ở đây mình sẽ sử dụng CodeLobster, vì sao thì đọc ở đây.
- Một phần mềm tạo localhost dưới máy tính để cài WordPress như XAMPP, WAMPP, InstantWP, DesktopServer. Mình khuyến khích bạn nên dùng DesktopServer hoặc InstantWP cho gọn.
- Firefox bản mới có cài Developer Toolbar và Firebug hoặc Google Chrome. Nên dùng luôn cả 2.
- 1 ly cà phê kèm thêm gói thuốc (nếu bạn hút thuốc). :x
Nếu bạn đã chuẩn bị đủ và sẵn sàng rồi thì bây giờ bắt tay vào được rồi đấy.
Cấu trúc một theme WordPress đơn giản
Thông thường thì một theme WordPress thông thường sẽ có các file sau.
- style.css – Khai báo thông tin theme như tên tác giả, tên theme và các code CSS có trong theme.
- index.php – Hiển thị nội dung của trang chủ.
- header.php – Hiển thị phần header của theme.
- single.php – Thiết lập cấu trúc một trang hiển thị nội dung bài viết (Post)
- footer.php – Hiển thị phần chân trang của theme.
- archive.php – Thiết lập cấu trúc hiển thị danh sách bài viết trong category, tag, archive.
- page.php – Thiết lập cấu trúc hiển thị nội dung của một Page.
- sidebar.php – Thiết lập cấu trúc hiển thị sidebar của theme.
- functions.php – Là nơi lưu trữ các functions mà chúng ta sẽ sử dụng trong theme.
- screenshot.png – ảnh đại diện cho theme, ảnh này phải mang tên là screenshot và bắt buộc phải là định dạng .png.
Nó có thể có thêm nhiều file khác nữa tùy thuộc vào từng nhu cầu, nhưng mình sẽ nói ở một phần khác nên ở đây chúng ta chỉ làm quen với cấu trúc đơn giản thôi. Rồi, đọc thì là vậy nhưng ngay bây giờ chúng ta sẽ tiến hành tạo tự tạo các file này và viết code cho nó. Bạn nên gõ lại code nhé chứ đừng copy vì mục đích mình viết ra đây là giúp bạn nhớ được các code.
Tạo thư mục và file cần thiết
Bây giờ bạn vào thư mục wp-content/themes tạo một thư mục mới với tên bất kỳ. Ở đây mình đặt tên thư mục này là thachpham.
Và trong thư mục này bạn nên tạo thêm các file và thư mục sau (có thể để trống):
Bạn nên nhớ là file screenshot.png có thể là ảnh bất kỳ nhé, miễn sao bạn phải đặt ảnh đó tên là screenshot.png. Tiếp theo đó, bạn copy file text.css và 960.css của 960 Grid System trong thư mục 960 Grid/code/css vào thư mục style trong theme của mình.
Bây giờ bạn mở file style.css lên và viết đoạn CSS sau vào.
/*
Theme Name: TP Theme
Theme URI: https://thachpham.com
Description: Theme WordPress đơn giản.
Author: Thạch Phạm
Author URI: https://thachpham.com
Version: 1.0
*/
Đoạn trên là thành phần bắt buộc phải có trong mỗi theme, mục đích là khai báo các thông tin cần thiết của theme, dĩ nhiên bạn có thể sửa thành tên và link website của mình. Bây giờ lưu lại và vào Appearance -> Theme sẽ thấy ảnh và tên theme mà bạn vừa tạo.
Bạn thích thì cứ nhấp Activate để kích hoạt theme lên, nhưng nó sẽ chưa hiển thị gì đâu vì bạn đã làm gì đâu mà. :ah:
Bây giờ bạn viết thêm đoạn code này vào file style.css để đưa tất cả thuộc tính của CSS về giá trị bằng 0 hết để có thể hiển thị giống nhau trên cùng một trình duyệt, người ta hay gọi bước này là Reset CSS.
@media screen {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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {font:12px/2 "Helvetica Neue",Helvetica,Arial,sans-serif;}
a {text-decoration:none;}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing="0"’ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
.zoomer:active {top:0;}
article,aside,figure,footer,hgroup,menu,nav,section {display:block;}
.group:after {visibility: hidden; display:block; font-size:0; content: ""; clear:both; height:0;}
}/*–End Reset Screen–*/
Rồi. Tới đây coi như kết thúc khâu chuẩn bị mà bạn nên làm trước tiên khi tiến hành thực hiện một dự án theme WordPress bất kỳ. Nhưng khoan, bài có vẻ hơi dài rồi nên mình tạm kết thúc phần 1 tại đây nhé và mình sẽ viết tiếp phần 2 vào 1, 2 ngày nữa thôi. Lý do là mình dành thời gian cho những ai chưa quen với 960 Grid có thời gian tìm hiểu thêm về nó để sang các phần tiếp theo chúng ta sẽ dễ dàng làm việc hơn.
Hẹn gặp lại mọi người ở phần 2.
