apkm-search

[WordPress Theme] Hướng dẫn làm theme wordpress bằng Bootstrap – Phần 1

Hướng dẫn làm theme wordpress bằng Bootstrap - Phần 1.

Như đã hứa thì hôm nay mình sẽ hướng dẩn các bạn cách viết 1 theme bằng bootstrap.Nếu các bạn chưa biết Bootstrap là gì thì có thể xem ở bài viết  Giới thiệu và hướng dẫn cách sử dụng Bootstrap 

Mình sẽ hướng dẩn các bạn làm theme giống như theme mà nqdung.info đang sử dụng.

nqdung

Mình cũng xin nói sơ lại về Twiter Bootstrap 1 chút xíu  😀 Tương tự như  960 Grid System, Bootstrap cũng chia độ rộng của màn hình hiển thị của trình duyệt thành 12 cột (Bao nhiêu cột thì tùy bạn,bạn hoàn toàn có thể custom lại nó)

– Tại sao lại sử dụng Bootstrap và các CSS Framework khác

Twitter-Bootstrap-Tutorials

Nếu bạn đã quen với việc sử dụng các CSS Framework thì bạn sẽ thấy tốc độ design 1 trang web sẽ giảm đáng kể.Việc sử dụng  CSS Framework giúp chúng ta tránh việc lặp đi lặp lại các thao tác như reset các thẻ,style button…

Như mình đã giới thiệu ở trên , Twitter Bootstrap giúp chúng ta giảm thiểu thời gian thiết kết html và css.Twitter Bootstrap định nghĩa sẳn  các class css công việc của chúng ta chỉ là sử dụng các class đó vào mục đích của mình.Twitter Bootstrap còn hổ trợ Responsive design một cách làm giao diện đa thiết bị rất được ưu chuộng trong thời gian gần đây.

Lúc đầu mới làm quen các bạn sẽ hơi khó khăn trong việc custom lại bootstrap 1 chút nhưng dùng nhiều sẽ quen và có khi còn “ghiền”  ấy chứ :byebye:

Kiến thức nền tảng

Làm theme cho WP không quá khó như các bạn nghĩ đâu,chúng ta chỉ cần 1 số kiến thức cơ bản như :

  1. HTML/CSS cơ bản
  2. PHP cơ bản : cách viết hàm,sử dụng mảng…
  3. Cách sử dụng WordPress căn bản như Posts, Pages, Widget

Không quá khó đúng không ? Nào chúng ta cùng đến bước tiếp theo.

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.
  • 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 thì dùng ZendServer.
  • Firefox bản mới có cài Developer Toolbar và Firebug hoặc Google Chrome.Mình khuyên dùng Firefox + Firebug…

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.
  • 404.php – Hiển thị nội dung khi xảy ra lổi 404
  • 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.

Có thể có nhiều hơn nhưng cơ bản thì cần bao nhiêu đây thôi…Giời thì chúng ta bắt đầu thôi.Trước tiên là cài đặt các bước cơ bản cái đã  :brick:

Đầu tiên thì chúng ta sẽ tìm hiểu 1 chút về theme của wordpress.Tất cả các theme của WordPress đều nằm trong /wp-content/theme

theme 1

 

 

 

 

 

 

Sau đó chúng ta tiến hành tải và copy các thư mục của bootstrap vào thư mục theme của chúng ta ở đây là thư mục nqdung.info.Đồng thời chúng ta cũng tiến hành tạo ra các file liệt kê phía trên và đây là kết quả của chúng ta:

 

theme 2

Giờ thì chúng ta cần làm thêm 1 số thao tác nữa:

Thêm đoạn này vào đầu file style.css:

Đoạn trên có nhiệm vụ là khai báo tên theme,tác giả,phiên bản….Chúng ta có thể vào Appearance -> Theme  để kiểm tra xem nhé

theme 3

Giờ thì chúng ta có thể active theme lên rồi ! kakak  😀

Chúng ta thêm đoạn CSS này vào file style.css đây là đoạn css canh lề của wordpress thôi..

Cơ bản là đã xong rồi đó ! Chúng ta sẽ tiếp tục thực hiện các công đoạn còn lại vào bài viết tiếp theo nhé !

Bài viết của mình có 1 số là copy từ Thachpham.com vì nó giống nhau và vì Thạch viết hay hơn nên copy qua luôn :keke: :byebye:

Những gì chúng ta có được sau bài này

Link tải

BÌNH LUẬN BÀI VIẾT

Leave a Reply

43 Comments on "[WordPress Theme] Hướng dẫn làm theme wordpress bằng Bootstrap – Phần 1"

Notify of
avatar
Sort by:   newest | oldest
Tùng Tử TếLevel 1
Tùng Tử Tế
1 comment

Link download hình như bị die rồi boss ơi???

Hùng2 năm gắn bó cùng NQDung.COMLevel 1
Hùng
2 comments
Ôi bạn ơi ko có bài hướng dẫn chi tiết cho từng file bên trên à như này mấy người code kém như mìn sao biết @@! kể ra có hướng dẫn là “file style.css nội dung : *{ margin:0; padding:0; } .alignleft { float: left; margin-bottom: 15px; margin-right: 15px; } .aligncenter, .alignnone { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } .alignright { float: right; margin-bottom: 15px; margin-left: 15px; } .clearfix:after { clear: both; content: “.”; display: block; height: 0; visibility: hidden; }” các file header.php … cũng có nội dung… Read more »
Akatsuki3 năm gắn bó cùng NQDung.COMLevel 1
Akatsuki
3 comments

Dạ anh cho em hỏi tí tẹo là em có cái theme tải từ trên mạng về cơ mà em thay đổi ảnh screenshot.png không được nhỉ, khi e thử xóa cái screenshot.png luôn thì nó trống trơn, còn nếu em thêm cái ảnh screenshot.png nào khác zô thì nó lại hiển thị cái ảnh mặc định vớ vẫn như lúc đầu. E nghị học cài cái gì zô hay sao ấy. Nếu biết mong anh giúp em với nhé, Xin cảm ơn anh.

Máy đo đường huyết3 năm gắn bó cùng NQDung.COMLevel 1

Cho mình hỏi cái là. Trước giờ mình toàn xài theme free nhưng ít có chỉnh sửa. Giờ mình muốn modify nó thì cái bootstrap này có áp dụng vào được không ?

Blogger AZ3 năm gắn bó cùng NQDung.COMLevel 1
5 comments

em thì thường mua theme để dùng, đang học thêm để design một cái giao diện mới cho blog, cảm ơn bác vì tut này nhé

thảo dương3 năm gắn bó cùng NQDung.COMLevel 1
thảo dương
7 comments

anh thay đổi theme rồi kìa, anh share theme cho em nha anh.
thaoduongvt@gmail.com
thank anh nhiều nhiều

thảo dương3 năm gắn bó cùng NQDung.COMLevel 1
thảo dương
7 comments

anh dũng có thể share template anh đang sử dụng hk ?

sửa máy giặt electrolux4 năm gắn bó cùng NQDung.COMLevel 1

minh cung dang tim hieu thang nay

Long4 năm gắn bó cùng NQDung.COMLevel 1
Long
5 comments

Hi ban
minh cung dang tim hieu thang nay
minh van chua biet duoc su khac nhau giua class row va row-fluid ban giai thich gium minh duoc khong

Thanks

Quốc Dũng Blog4 năm gắn bó cùng NQDung.COMLevel 2
118 comments

Một cái có định kích thước bằng px cái fluid thì định kích thước là % bạn sử dụng sẽ thấy

Long4 năm gắn bó cùng NQDung.COMLevel 1
Long
5 comments

zay minh sd row hay row-fluid tot hon ban

Long4 năm gắn bó cùng NQDung.COMLevel 1
Long
5 comments

ok thanks bạn

tai game mien phi4 năm gắn bó cùng NQDung.COMLevel 1

mình không phải dân chuyên lập trình nhưng cũng sẽ cố gắng , tks bác rất nhiều

Long4 năm gắn bó cùng NQDung.COMLevel 1
Long
5 comments

sao mình down về copy vào theme active no o chay zay ban

doc truyen4 năm gắn bó cùng NQDung.COMLevel 1
1 comment

Comment của bác dùng plugin hay tự code đấy bác. Thấy giống wordpress tab không biết phải không?

Quốc Dũng Blog4 năm gắn bó cùng NQDung.COMLevel 2
118 comments

Mình tự viết đó bạn

Hùng4 năm gắn bó cùng NQDung.COMLevel 1
5 comments

Cảm ơn bạn Dũng ! Sự nhiệt tình chia sẻ của bạn, mình đã cái để thể hiện rồi. Chúc bạn luôn vui !

Hùng4 năm gắn bó cùng NQDung.COMLevel 1
5 comments

Admin xem có cách nào cho người ko biết về code tự làm đc ko, VD bạn cho một code mẫu và hướng dẫn từng bước thêm cột vào đâu…v.v

Mình thấy hướng dẫn và chia sẻ như blogspot thì tốt quá

Hùng4 năm gắn bó cùng NQDung.COMLevel 1
5 comments

Tuyệt quá, mình đang tìm cái này. Mặc dù chưa biết tí gì về code vẫn thích vọc. Thanks Admin !

Bình4 năm gắn bó cùng NQDung.COMLevel 1
Bình
1 comment

Chỉ biết 1 chút CSS/HTML nhưng cũng muốn thử xem sao, bạn hướng dẫn rất chi tiết. Cũng muốn biết thử quy trình làm 1 theme wp nó thế nào. Thanks bạn nhé.
p/s sửa lại cái tiêu đề kìa :d

WP Signal Tracker Review4 năm gắn bó cùng NQDung.COMLevel 1

mới nhìn rất giống theme của diễn đàn Tinhte nhưng xem lại thì khác rất đẹp. công phu thật, giống bạn nói chắc phải từ từ mới làm được

Trị4 năm gắn bó cùng NQDung.COMLevel 1
4 comments

Mình cũng đang muốn học thiết kế theme cho wordpress đây, hy vọng được học hỏi thêm từ Dũng :monkey:

Niche research a day review4 năm gắn bó cùng NQDung.COMLevel 1

Nội dung hay, bạn làm chi tiết quá, tuy nhiên nếu bạn chịu khó chỉnh chu thêm 1 ít vào khâu trình bày (màu sắc, button bla bla, canh hàng đẹp hơn tí nữa) là tuyệt vời.
Chúc blog bạn ngày càng phát triển.

wpDiscuz