Tạo dynamic widget-ready sidebars WordPress

Tạo Dynamic Widget-Ready Sidebars trong WordPress

WordPress là một nền tảng quản lý nội dung (CMS) mạnh mẽ, cho phép người dùng dễ dàng tạo và quản lý các trang web. Một trong những tính năng quan trọng của WordPress là khả năng thêm các widget vào sidebars, giúp tăng tính tương tác và cung cấp thông tin hữu ích cho người dùng. Tuy nhiên, sidebars mặc định thường tĩnh và không linh hoạt. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo các sidebars dynamic (động) widget-ready trong WordPress, cho phép bạn dễ dàng tùy chỉnh nội dung hiển thị trên sidebar một cách linh hoạt.

Tại Sao Cần Tạo Dynamic Sidebars?

Sidebars mặc định của WordPress thường được định nghĩa cứng trong các file theme. Điều này có nghĩa là nếu bạn muốn thay đổi nội dung hiển thị trên sidebar, bạn cần phải chỉnh sửa trực tiếp các file theme, điều này có thể gây ra nhiều vấn đề nếu bạn không có kiến thức về lập trình. Dynamic sidebars giải quyết vấn đề này bằng cách cho phép bạn thêm, xóa và sắp xếp các widget một cách dễ dàng thông qua giao diện quản trị WordPress. Dưới đây là một số lợi ích chính của việc sử dụng dynamic sidebars:

Dễ dàng tùy chỉnh nội dung hiển thị trên sidebar mà không cần chỉnh sửa code.
Cho phép hiển thị các widget khác nhau trên các trang khác nhau.
Tăng tính linh hoạt và khả năng tùy biến của trang web.

Các Bước Tạo Dynamic Sidebars

Để tạo dynamic sidebars trong WordPress, chúng ta sẽ thực hiện các bước sau:

Đăng ký sidebar trong file functions.php của theme.
Hiển thị sidebar trong các file template của theme.

1. Đăng Ký Sidebar trong `functions.php`

Đầu tiên, bạn cần mở file functions.php của theme đang sử dụng. File này thường nằm trong thư mục theme của bạn (ví dụ: /wp-content/themes/tentheme/functions.php). Thêm đoạn code sau vào file này:


function my_theme_register_sidebars() {
  register_sidebar( array(
    'name'          => __( 'Sidebar chính', 'text_domain' ),
    'id'            => 'sidebar-1',
    'description'   => __( 'Sidebar hiển thị ở bên phải trang web.', 'text_domain' ),
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
  ) );

  register_sidebar( array(
    'name'          => __( 'Sidebar chân trang', 'text_domain' ),
    'id'            => 'sidebar-footer',
    'description'   => __( 'Sidebar hiển thị ở chân trang web.', 'text_domain' ),
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
  ) );
}
add_action( 'widgets_init', 'my_theme_register_sidebars' );

Trong đoạn code trên:

my_theme_register_sidebars() là một hàm tùy chỉnh để đăng ký các sidebars.
register_sidebar() là hàm của WordPress để đăng ký một sidebar.
name: Tên của sidebar hiển thị trong giao diện quản trị WordPress.
id: ID duy nhất của sidebar, được sử dụng để hiển thị sidebar trong template.
description: Mô tả của sidebar hiển thị trong giao diện quản trị WordPress.
before_widget: HTML code được thêm vào trước mỗi widget.
after_widget: HTML code được thêm vào sau mỗi widget.
before_title: HTML code được thêm vào trước tiêu đề của mỗi widget.
after_title: HTML code được thêm vào sau tiêu đề của mỗi widget.

Bạn có thể đăng ký nhiều sidebars bằng cách gọi hàm register_sidebar() nhiều lần với các tham số khác nhau. Hãy nhớ thay đổi name, id và description cho mỗi sidebar.

2. Hiển Thị Sidebar trong Template

Sau khi đã đăng ký sidebars, bạn cần hiển thị chúng trong các file template của theme. Ví dụ, để hiển thị sidebar chính trong file sidebar.php, bạn có thể sử dụng đoạn code sau:


<aside id="secondary" class="widget-area">
  <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>

Trong đoạn code trên:

dynamic_sidebar( 'sidebar-1' ) là hàm của WordPress để hiển thị các widget trong sidebar có ID là sidebar-1.

Bạn có thể hiển thị sidebar chân trang trong file footer.php bằng cách sử dụng đoạn code sau:


<div id="footer-widgets" class="widget-area">
  <?php dynamic_sidebar( 'sidebar-footer' ); ?>
</div>

Hãy nhớ thay đổi ID của sidebar trong hàm dynamic_sidebar() cho phù hợp với sidebar mà bạn muốn hiển thị. Bạn có thể hiển thị các sidebars khác nhau trên các trang khác nhau bằng cách sử dụng các conditional tags của WordPress. Ví dụ, để hiển thị một sidebar khác nhau trên trang chủ, bạn có thể sử dụng đoạn code sau:


<?php if ( is_front_page() ) : ?>
  <?php dynamic_sidebar( 'sidebar-home' ); ?>
<?php else : ?>
  <?php dynamic_sidebar( 'sidebar-1' ); ?>
<?php endif; ?>

Thêm Widget vào Sidebars

Sau khi đã đăng ký và hiển thị các sidebars, bạn có thể thêm widget vào chúng thông qua giao diện quản trị WordPress. Để làm điều này, hãy truy cập vào Appearance > Widgets. Tại đây, bạn sẽ thấy danh sách các sidebars mà bạn đã đăng ký, cùng với danh sách các widget có sẵn. Bạn có thể kéo và thả các widget từ danh sách widget vào các sidebars để thêm chúng vào trang web của bạn. Bạn cũng có thể cấu hình các tùy chọn của mỗi widget bằng cách nhấp vào mũi tên xuống bên cạnh tên của widget.

Ví Dụ Cụ Thể

Giả sử bạn muốn tạo một sidebar hiển thị danh sách các bài viết mới nhất, danh mục bài viết và hộp tìm kiếm. Bạn có thể thực hiện các bước sau:

Đăng ký sidebar trong functions.php như đã hướng dẫn ở trên.
Hiển thị sidebar trong file sidebar.php.
Truy cập Appearance > Widgets.
Kéo widget “Bài viết gần đây” vào sidebar.
Kéo widget “Danh mục” vào sidebar.
Kéo widget “Tìm kiếm” vào sidebar.
Cấu hình các tùy chọn của mỗi widget theo ý muốn.

Lời Kết

Việc tạo dynamic widget-ready sidebars trong WordPress là một cách tuyệt vời để tăng tính linh hoạt và khả năng tùy biến của trang web. Bằng cách làm theo các bước hướng dẫn trong bài viết này, bạn có thể dễ dàng tạo các sidebars tùy chỉnh và thêm các widget vào chúng để cung cấp thông tin hữu ích và tăng tính tương tác cho người dùng. Chúc bạn thành công!

Lưu Ý Quan Trọng

Luôn sao lưu file functions.php trước khi chỉnh sửa để tránh mất dữ liệu nếu có lỗi xảy ra.
Sử dụng một child theme để tùy chỉnh theme, tránh làm mất các thay đổi khi theme được cập nhật.
Kiểm tra kỹ lưỡng trang web sau khi thêm hoặc thay đổi widgets để đảm bảo mọi thứ hoạt động đúng cách.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa