Thiết kế theme WordPress cơ bản với 960 Grid

Tự thiết kế theme WordPress 3 với 960 Grid

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.

Tự thiết kế theme WordPress 3 với 960 Grid

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.

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.

grid

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).  😡

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.

Tự thiết kế theme WordPress 3 - Phần 1

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):

Tự thiết kế theme WordPress

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.css960.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://nguoivietweb.net
Description: Theme WordPress đơn giản.
Author: Thạch Phạm
Author URI: https://nguoivietweb.net
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.

tu-thiet-ke-theme-wordpress-3

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.

Nguồn: Thiết kế theme WordPress cơ bản với 960 Grid | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage & coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben & tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
Hiển thị thông báo riêng ở mỗi category trong WordPress
Thiết kế theme WordPress cơ bản với 960 Grid
Tác giả

Bình luận

Leave a Message

Registration isn't required.

NguyenLp LarTheme