Chào các bạn ở bài viết này mình sẽ hướng dẫn tạo thêm sidebar chỉ với vài dòng lệnh đơn giản .Trước khi bắt đầu mình cũng khuyên bạn nên mở file lên và ngồi gõ từng dòng lệnh như thế sẽ tốt hơn thay vì copy rồi paste vào. Nó chỉ ngắn mất khoản 10 phút của bạn thôi nhưng nó sẽ giúp bạn nhớ lâu hơn :

Bạn có thể tham khảo cách tạo sidebar tại đây :


Bước 1: Đăng ký sidebar



Hãy chèn đoạn code sau đây vào file function.php trong theme


register_sidebar(array(
    'name' => 'Code Sider',// Tên của sidebar
    'id' => 'code-sider', // id buộc phải viết thường
    'description' => 'Khu vực sidebar hiển thị dưới mỗi bài viết',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => '</aside>',
    'before_title' => '<h1 class="widget-title">',
    'after_title' => '</h1>'
));

Bây giờ ta vào widget để kiểm tra xem có xuất hiện Demo Sidebar hay nhé. Nếu xuất hiện thì bạn đã làm đúng. Nếu không thì hãy kiểm tra lại những dòng code nha. Nếu xong ta đến bước tiếp theo nha.

  • Bước 2: Hiển thị sidebar vừa tạo vào theme

    Ngay sau khi đã có sidebar trong Appearance -> Widget, bây giờ chúng ta sẽ làm một bước cuối cùng nữa đó chính là cho sidebar vừa tạo ở trên hiển thị ra theme.
    Để hiển thị, ta sẽ sử dụng một hàm trong WordPress tên là dynamic_sidebar(). Bạn mở file bất kỳ trong theme ra và chèn đoạn dưới đây vào.

    <?php dynamic_sidebar('code-sider'); ?>
    Trong đó, tham số bên trong chính là ID của sidebar mà bạn đã tạo ở bước 1. Hãy nhớ rằng bạn có thể đặt bất kỳ đoạn nào trong theme, thường là người ta đặt trong file sidebar.php. Bạn cũng có thể đặt vào file single.php nếu muốn hiển thị sidebar ngay bên dưới hoặc trên bài viết.
    Nếu bạn muốn chuyên nghiệp hơn thì có thể sử dụng thêm một hàm khác kèm theo mang tên là is_activate_sidebar() để kiểm tra xem sidebar cần gọi có hoạt động không (có chứa widget không).
    <?php if ( is_active_sidebar( 'code-sider' ) ) : ?>
                    <?php dynamic_sidebar( 'code-sider' ); ?>
    <?php endif; ?>
    Chúc các bạn thành công

0 nhận xét :

Post a Comment

SEO

 
Top