Sidebar cố định hay sticky sidebar là cách làm cho một phần nội dung cố định trên màn hình khi người dùng kéo thanh trượt.
Tác dụng của sticky sidebar là để làm nổi bật phần nội dung bạn muốn thể hiện. Nó sẽ luôn hiển thị trên màn hình mà không bị kéo theo thanh cuộn để người dùng chú ý. Các nội dung này thường là phần quảng cáo hoặc các bài viết xem nhiều, bài viết mới,…
Để làm điều này, sẽ có kha khá các plugin hỗ trợ. Nếu bạn muốn nhanh gọn mà không muốn đụng tới code thì vào trang wordpress.org/plugins hoặc vào phần cài đặt plugin trong admin gõ Sticky sidebar. Sẽ có nhiều lựa chọn cho bạn.
Nhưng ở đây, chúng tôi thường nói không với plugin. Đơn giản là do việc tích hợp thật đơn giản :). Chúng ta bắt đầu nào.
Xác định vị trí đặt widget
Trước tiên chúng ta cần xác định vị trí để làm nội dung cố định. Thường nó là một hoặc một số widget nằm bên trái hoặc phải của trang web.
Chúng ta sẽ tạo phần nội dung mẫu cần hiển thị ở sidebar. Với class sticky-sidebar như bên dưới.
Tuỳ theo mục đích hiển thị, chúng ta có thể đặt code bằng các cách khác nhau.
Chỉ cố định một phần sidebar
Đặt code vào file index.php (để hiển thị ở trang chủ), file single.php để hiển thị ở phần bài viết,…
Mở file index.php hoặc single.php của theme, tìm đoạn <aside class=”widget-area”> và copy đoạn code vào phía sau:
<div class="sticky-sidebar"> Phần nội dung cần cố định </div>Phần nội dung cần cố định thì như đã nói ở trên. Có thể là một list bài viết, một hình ảnh hoặc mã quảng cáo của google chẳng hạn.
Cố định toàn bộ sidebar
Để cố định tất cả widget của sidebar, mở file index.php hoặc single.php,… tìm và thay thế dòng <?php get_sidebar(); ?> bằng đoạn sau:
<div class="sticky-sidebar"> <?php get_sidebar(); ?></div>Viết CSS cho sticky sidebar
Class sticky-sidebar sẽ có dạng như bên dưới. Chỉ đơn giản là copy đoạn CSS và dán vào file style.css của theme đang sử dụng.
@media only screen and (min-width: 1024px) {
.sticky-sidebar {
position: -webkit-sticky;
position: sticky;
display:block;
margin-top: 20px;
top: 0;
padding-top: 10px;
}
}Trong đoạn CSS trên cần lưu ý một số điểm.
- @media only screen and (min-width: 1024px) : Thiết lập phần cố định cho màn hình có độ phân giải 1024 pixel trở lên. Với màn hình nhỏ hơn hoặc mobile sẽ hiển thị bình thường.
- position: -webkit-sticky; : Vị trí cố định, áp dụng cho trình duyệt safari
- position: sticky; : Vị trí cố định, áp dụng cho các trình duyệt khác
- Các thông số còn lại bạn có thể tuỳ chỉnh theo ý thích.
Rồi xong, lưu toàn bộ các file lại, mở lại trang web và ta sẽ có kết quả như mong muốn. Nếu bạn có trục trặc gì với vấn đề hiển thị, hãy để lại bình luận bên dưới nhé.
