[Bài 2] Cách thêm widget đối với theme của bạn

Như bài trước chúng ta đã phần nào biết cách convert 1 trang html/css sang theme tĩnh cho wordpress nay mình xin hướng dẫn các bạn về cách thêm “đồ chơi” cho theme mà bạn vừa convert tĩnh.

Thoạt nhìn ta có thể thấy vùng bên cạnh khá trống có thể viết html/css tạo thêm 1 vùng vào đấy để sử dụng làm vị trí đặt sidebar ( hay nói nôm na là chỗ bỏ widgets )

10-3-2013 11-45-37 PM

Ở đây mình sẽ tiến hành bỏ đoạn html vào file header.php ( thực ra bỏ vòng vòng chỗ nào tùy các bạn nhé nhưng để được giống hình thì mình bỏ vào phần đầu trang

 Code css bỏ vào file style.css ( Chú ý nhé có class tên là widget trong css nhưng tại sao trong html lại không có nhỉ ?  ……..lát nữa mình sẽ giải thích)

 Nào bây giờ tới phần quan trong đây, Các bạn vào thư mục candytheme (nói chung là thư mục theme của bạn đó) tạo 1 file có tên là functions.php (đây là 1 file quan trọng với theme wordpress)

Ta copy đoạn mã đăng kí 1 sidebar như sau

name: tên sidebar (quan trọng nhé, ghi nhớ chỗ này lát nữa sẽ sử dụng để gọi sidebar đó)

Id: Không ghi cũng không sao, nhưng nếu có 2 sidebar thì nên ghi

Description: Miêu tả sidebar của bạn

before_widget: Đoạn html sẽ chèn trước 1 widget ( ở đây mình sài class widget 😀 đó như bạn thấy lúc này trong file css ta đã định dạng rồi )

after_widget: html luôn

before_title:Đoạn code html trước 1 cái tên widget nào đó

after_title:Đoạn code html tsau 1 cái tên widget nào đó

Lát nữa mình sẽ show ra code html sau khi có widget các bạn sẽ dễ hiểu hơn

Nào bây giờ ta mới có đăng kí sidebar thui, giờ gọi nó ra sài nè, quay lại với cái file header.php, cái chỗ html ban đầu mà chúng ta tạo ra để có chỗ đặt sidebar đó các bạn phải thêm đoạn code nhỏ là

<?php dynamic_sidebar(‘main-sidebar’); ?>

Cú pháp nó là thế này dynamic_sidebar(‘name‘) (name của sidebar hoặc id của sidebar nhé)

name ở đây = với cái name lúc mình đăng kí sidebar trong file functions.php đó ^^

Rồi xong rồi đó “nghịch” thôi

Cầm cái widgets Search drag’n’drop qua bên kia 😀 rùi đặt tên cho Title là “Tìm Kiếm” ấn nút Save và ra ngoài trang tận hưởng thành quả nào

10-3-2013 11-43-57 PM

 10-4-2013 1-01-33 AM

Tất nhiên là chưa tìm kiếm được đâu ^^,đành hẹn các bạn ở các bài viết sau nhé

 

Leave a Reply


*