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


Ở đâ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

<div class="sidebar"> <h3> Sidebar area</h3> <div class="sidebarcontent"> </div> </div>

<div class="sidebar"> <h3>Sidebar area</h3>         <div class="sidebarcontent">                                     </div> </div>

 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)

.sidebar { display: block; margin-left: 1630px; margin-top: 174px; position: absolute; text-align: center; width: 334px; } .sidebarcontent > div.widget { background: url("../img/white-trans.png") repeat scroll 0 0 rgba(0, 0, 0, 0); border-radius: 10px; padding: 1px 0 0 20px; text-align: left; }

.sidebar {     display: block;     margin-left: 1630px;     margin-top: 174px;     position: absolute;     text-align: center;     width: 334px; } .sidebarcontent > div.widget {     background: url("../img/white-trans.png") repeat scroll 0 0 rgba(0, 0, 0, 0);     border-radius: 10px;     padding: 1px 0 0 20px;     text-align: left; }

 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

<?php $args = array( 'name' => 'main-sidebar', 'id' => 'main-sidebar-1', 'description' => 'Đây là sidebar của tui', 'before_widget' => '<div class="widget"> ', 'after_widget' => '</div> ', 'before_title' => '<h4> ', 'after_title' => '</h4> '); register_sidebar( $args ); ?>

<?php         $args           = array(     'name'          => 'main-sidebar',     'id'            => 'main-sidebar-1',     'description'   => 'Đây là sidebar của tui',     'before_widget' => '<div class="widget">',     'after_widget'  => '</div>',     'before_title'  => '<h4>',     'after_title'   => '</h4>');     register_sidebar( $args ); ?>

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 đó ^^

<div class="sidebar"> <h3> Sidebar area</h3> <div class="sidebarcontent"> <?php dynamic_sidebar( 'main-sidebar' ); ?> </div> </div>

1 2 3 4 5 6

<div class="sidebar"> <h3>Sidebar area</h3>    <div class="sidebarcontent">          <?php dynamic_sidebar( 'main-sidebar' ); ?>            </div> </div>

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

 
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é
Xem thêm tại : http://hocweb.com.vn/cach-widget-doi-voi-theme-cua-ban/
----------------------------------------------------------------------------------------------------------------------------------------------------------
Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!