Thiết kế theme WP – phần 9: Làm việc với widget

Cũng gần cả tháng trời rồi mình mới trở lại với chuỗi chủ đề này để viết tiếp cho các bạn phần tiếp theo. Hôm nay chúng ta tiếp tục công việc thiết kế giao diện WordPress bằng cách tự xây dựng các widget riêng để phục vụ công việc của mình nhé.

Widget là gì

Câu hỏi này có thể là hơi thừa nhưng không phải ai cũng có thể hiểu được đúng nghĩa của nó. Mà để có thể xây dựng được nó thì mình nghĩ các bạn nên biết rõ về nó một tí.

Widget là một đoạn mã động giúp thể hiện một phần nội dung nào đó lên website mà không làm ảnh hưởng đến các thành phần khác. Nó cũng tương tự như thuật ngữ plugin hoặc extension mà bạn hay gặp ở các ứng dụng web. Đối với WordPress, các widget được xây dựng linh động cho phép kéo thả cho phép kéo thả các widget vào các vị trí mà giao diện có thể cho phép xuất hiện.

Một điểm chúng ta cần phải lưu ý khi làm việc với widget là tùy theo giao diện mà widget được cho phép thể hiện ở một ví trí nào đó. Bạn cũng đừng thắc mắc là tại sao cái giao diện này widget có thể đặt ở vị trí này, mà cũng cái widget đó nhưng lại không thể đặt được nó ở vị trí tương ứng trên 1 giao diện khác.

Làm việc với giao diện: xác lập trị trí cho phép widget

Đây là công việc đầu tiên mà bạn phải làm khi thiết kế giao diện. Bạn nên cho người dùng những tùy biến riêng của mình trên giao diện bạn xây dựng để người dùng có thể dễ dàng làm chủ giao diện ấy.

Trước tiên, chúng ta đưa đoạn code sau nào functions.php

[php] /**
* Register widgetized areas, including two sidebars and widget-ready columns in the footer.
*
* To override nhanweb_widget() in a child theme, remove the action hook and add your own
* function tied to the init hook.
*
* @uses register_sidebar
*/
function nhanweb_widget() {
// Dang ky widget cho Admin
register_sidebar( array(
‘name’ => __( ‘Widget cột phải’, ‘nhanweb’ ),
‘id’ => ‘right-widget-area’,
‘description’ => __( ‘Vị trí widget cột bên phải’, ‘nhanweb’ ),
‘before_widget’ => ‘<li id="%1$s" class="widget-container %2$s">’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h3 class="widget-title">’,
‘after_title’ => ‘</h3>’,
) );

register_sidebar( array(
‘name’ => __( ‘Widget Footer’, ‘nhanweb’ ),
‘id’ => ‘footer-widget-area’,
‘description’ => __( ‘Vị trí widget ở cuối thang’, ‘nhanweb’ ),
‘before_widget’ => ‘<li id="%1$s" class="widget-container %2$s">’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h3 class="widget-title">’,
‘after_title’ => ‘</h3>’,
) );
}
/** Register sidebars by running nhanweb_widget() on the widgets_init hook. */
add_action( ‘widgets_init’, ‘nhanweb_widget’ );
[/php]

Đoạn code này có tác dụng gọi hàm nhanweb_widget() mà để đăng ký các vị trí đặt widget trong Dashboard khi hook widgets_init được gọi. Theo như cấu trúc mà mình đã viết ở trên. Bạn có thể đăng ký bao nhiêu Widget cũng được.

Kết quả đăng ký widget

Bạn mở Dashboard truy cập vào phần Widget sẽ thấy:

Đồng thời, chúng ta quay lại theme đang sử dụng sẽ thấy phần Widget được bổ sung vào option của theme:

Công việc tiếp theo mà chúng ta cần làm đó là xác lập vị trí hiển thị của 2 vùng widget như đã khai báo ở trên trong theme. Nói cách khác, chúng ta cần nói cho theme biết là đối với vị trí bên phía tay phải, chúng ta sẽ lấy widget area có ID = right-widget-area và ở vị trí Footer chúng ta yêu cầu lấy những widget nằm trong vùng id = footer-widget-area.

Công việc này khá đơn giản, tại vị trí cần lấy thứ tương ứng chúng ta bổ sung đoạn code sau

Phần này mình không để code vì muốn các bạn tự gõ lại nhé….

Một điểm bạn cần lưu ý khi xây dựng Widget là các Widget được thể hiện dưới dạng mỗi list item (tag li). Do đó, khi viết đoạn này bạn cần đưa widget vào tag ul hoặc ol như đoạn code trên của mình.

Đoạn code này mình add vào sidebar.php vì vị trí widget cần thể hiện được đặt ở đó. Bạn chú ý ID đưa vào phải đúng với ID đã khai báo. Tương tự như vậy cho vị trí widget dưới Footer trong file footer.php. Bạn muốn xây dựng thêm các widget khác và tìm những vị trí đặt khác (ví dụ như vị trí feature article, homepage, theo category…) thì bạn tự thiết lập đúng chỗ nhé.

Sau khi hoàn tất đoạn code trên, chúng ta tiến hành kéo thử các widge vào vị trí tương ứng và kiểm tra. Kết quả :

Như vậy là chúng ta đã làm việc việc giúp các Widget có sẵn của WordPress hiển thị lên trang trang. Trong phần tiếp theo chúng ta sẽ cùng nhau nghiên cứu cách viết 1 widget riêng cho mình. Các bạn đón đọc nhé.