apkm-search

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

Thiết kế theme wordpress bẳng Bootstrap phần 2.

Chúng ta đã chuẩn bị 1 số thứ cần thiết đề làm việc rồi ! Giờ tiếp tục làm việc thôi  :doubt:

Chúng ta sẽ bắt đầu từ file header.php,footer.php,index.php trước.

Bạn hãy tưởng tượng những phần nào không thay đổi ở tất các các trang thì chúng ta sẽ đưa nó vào 2 file header.phpfooter.php

Giờ chúng ta sẽ bắt đầu với file header.php trước:

Đây là những thông số bắt buộc nếu bạn muốn có 1 theme đúng chuẩn.Ngoài phần head chúng ta cần thêm logo và menu cho wordpress.

Chúng ta sẽ thêm đoạn code bên dưới và mình sẽ giải thích sau:

Đầu tiên là menu để hiển thị menu thì chúng ta cần thêm đoạn code này vào file functions.php

Vì chúng ta sử dụng bootrap nên chúng ta cần style menu của wordpress lại

đây là đoạn khai báo rằng chúng ta sẽ style menu lại bằng  function BootstrapNavMenuWalker() .Ta sẽ thêm hàm này vào file functions.php như sau:

 

Bây giớ chúng ta sẽ vào Appearance -> Menus để thêm 1 menu vào vị trí main_top mà chúng ta vừa tạo.

theme 4

Giờ chúng ta chạy thôi ! kaka  :byebye:

Uả sao trắng tinh vầy nè   :oh:

Hjhj ! do chúng ta có gọi header ra đâu mà có cái gì  :brick:

Chúng ta cần thêm đoạn này vào index.php nữa thì mới có cái mà xem  :surrender:

khi chúng ta gọi hàm get_header() thì wordpress sẽ include file header.php vào.Nhưng không phải file nào cũng chơi kiểu này được đâu.Không có vụ file abc.php vào gọi hàm get_abc() đâu nhé ! đây là 1 số hàm mà wordpress hổ trợ

get_header();

get_footer();

get_sidebar();

…Không nhớ nữa  :sweat: chỉ nhớ 3 cái hay xài thôi

ra rồi ! mừng quá ! giờ chúng ta cần trang trí 1 chút chứ nhìn xấu quá !

Nhìn cũng được được rồi đó!

Giờ mình làm cái footer trước đi rùi cái index làm sau.Chúng ta thêm đoạn code này vào file footer.php

Các bạn nhớ là ở file header.php chúng ta đã mở 1 số thẻ như body,<div id=”container”>,<div class=”row”> mà chưa đóng thì ở file footer chúng ta cần đóng lại đề cho giao diện hiển thị đúng(Đôi lúc không đóng mà nó cũng hiển thị đúng :waaaht: ) Chúng ta sẽ trang trí footer bằng đoạn CSS sau :

Thêm đoạn <?php get_footer() ;?> vào file index.php và cùng kiểm tra nào !

theme 5

Tới đây chúng ta đã có được 1 cái header và footer rồi ! Chúng ta thêm phần hiển thị bài viết mới nhất ở trang index.php nữa là xong phần trang chủ.

WordPress cung cấp cho chúng ta 1 số hàm đề lấy dữ liệu ra như :

  • have_post –  kiểm tra xem còn dữ liệu không
  • the_post –  set các giá trị có các hàm còn lại
  • the_permalink –  lấy link của bài biết
  • the_title – tiêu đề của bài viết
  • the_tags – lấy tags của bài viết
  • the_category – lấy danh mục của bài viết
  • ….

Còn rất nhiều hàm mà wordpress cung cấp cho chúng ta.Ngoài ra chúng ta có thể viết thêm các hàm của bản thân mình trong file functions.php 

Một điều chú ý nữa là wordpress sẽ lấy số post mà mình cấu hình trong admin để xuất ra.Các bạn vào Setting > Reading để chỉnh nhé(mặc định nó là 5)

Đây là code của trang index.php.Nếu các bạn copy đoạn này vào file index.php của các bạn sẽ bị lổi do mình có sử dụng 1 số hàm riêng nữa ví dụ như :

time_stamp() để xuất ra là bài viết viết cách hiện tại bao lâu ví dụ như : cách đây 1 tiếng….

 

 _substr() dùng để lấy n ký tự đầu tiền của nội dung bài viết

catch_that_image()  lấy ra hình đầu tiên trong bài viết.Mình sẽ giải thích lý do tại sao mình lại dùng hàm này: Mổi post mình sẽ kiểm tra xem có Set featured image không nếu có thì dùng featured image còn không thì mình sẽ lấy hình đầu tiên của bài viết.Và để sử dụng được Featured Image thì chúng ta cần thêm đoạn add_theme_support ( ‘post-thumbnails’ ); vào file functions.php.

Chúng ta tiếp tục với phân trang,phân trang thì mình cũng style theo bootstrap nên sẽ dùng hàm iz_pagination

iz_pagination có nội dung như sau:

Cơ bản thì file index.php của chúng ta chỉ có thế 😀 Giờ thì style css cho nó đẹp 1 chút

Chúng ta cùng xem kết quả nào

theme 9

Giờ thì chúng ta tiếp tục với sidebar.php

Muốn sử dụng sidebar để kéo widget được thì chúng ta cần khai báo như sau trong file functions.php

Để cho sidebar phù hợp với theme mình đang làm nên mình custom nó lại đôi chút

before_widget và after_widget là dùng để bao nội dung của widget bên trong,tương tự before_title và after_title cũng vậy

vì ở index chúng ta đã gọi hàm get_sidebar() nên giờ chúng ta sẽ mở file sidebar.php và thêm đoạn code dưới đây:

Chúng ta cần lưu ý là  dynamic_sidebar(‘sidebar_widget’) chúng ta sẽ truyền cái ID của của sidebar mà chúng ta đã tạo ở function ở dây của mình là sidebar_widget

Bây giờ chúng ta sẽ test thử nhé .vào Appearance -> Widgets thêm 1 widget bất kỳ và xem kết quả nào.

theme 7

Kết quả của chúng ta đây.Chỉ việc style CSS cho nó 1 chút là đẹp lên liền :*

Giờ xem tổng thể kết quả cái nào  :boss:

Ý chưa được còn 1 chút nữa .làm luôn cái nút đọc thêm đã

Đây là css mình lấy của ThachPham.com keke

Cùng ngắm kết quả nào

theme 8

Chúc các bạn thành công ! Có gì thắc mắc xin để lại comment mình sẽ giải đáp nhanh nhất có thể cho các bạn.
Code của bài viết này ! Các bạn nên gõ lại như thế sẽ hiểu hơn về cách thức hoạt động của wordpress

Link tải

 

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

Leave a Reply

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

Notify of
avatar
Sort by:   newest | oldest
thanh1 năm gắn bó cùng NQDung.COMLevel 1
1 comment

ad ơi cho mình hỏi là 1 theme có cấu trúc như này là sao ạ? mình đính kèm ảnh ở link dưới ạ…sao lại có phần _theme và _theme_custom luôn là sao ạ? mong nhận được phản hồi từ bạn…
[IMG]http://i.imgur.com/gfmBMV9.png[/IMG]

học tiếng anh trực tuyến2 năm gắn bó cùng NQDung.COMLevel 1

Cái này chỉ có tác dụng với menu 2 cấp, còn với menu 3 cấp thì không hiển thị được bạn à @@
có cách nào làm cho nó có thể hiển thị không bạn

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

Bạn ơi mình bị mắc ở file function.php chả biết thêm vào file function thế nào cứ không chạy ra cái gì hichic :sosad:

Duong3 năm gắn bó cùng NQDung.COMLevel 1
2 comments

Cảm ơn bài viết rất hay, mình đang tìm hiểu cái này

Du lịch Thái Lan giá rẻ4 năm gắn bó cùng NQDung.COMLevel 1

Bên thachpham có 960, bên cậu có Bootstrap. 2 cậu ghê thật

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

“Hướng dẩn” sửa lại cho chữ dẫn đẹp nhé. Bài viết thật chi tiết, hôm nào rảnh ngồi làm thử. xem ra hơi khó phải k? thanks

Bảo4 năm gắn bó cùng NQDung.COMLevel 1
1 comment

Bài viết thiệt là công phu 😀

Stephen An4 năm gắn bó cùng NQDung.COMLevel 1
2 comments

Hi,

Bài hướng dẫn rất tuyệt, thanks bro nhé 🙂

wpDiscuz