Sticky Sidebar là cách làm cho sidebar của bạn di chuyển theo phần nội dung khi bạn trượt xuống. Cách đơn giản để tạo sticky sidebar cho wordpress là dùng plugin. Nhưng trong bài viết này mình giới thiệu một cách khác cũng khá đơn giản mà không cần cài thêm plugin, bạn chỉ cần thêm vài dòng CSS là có ngay sticky sidebar cho website wordpress của mình.
Sticky Sidebar trên wordpress hoạt động như thế nào?
Bạn có thể thấy ở video trên, khi trượt trang web xuống dưới phần nội dung bên trái biến mất dần trong khi sidebar bên phải luôn di chuyển theo. Sidebar chỉ bị đẩy lên trên và mất đi khi chiều cao của sidebar chạm tới phần footer. Bạn cũng có thể xem ngay trên blog của mình cũng đang sử dụng sticky sidebar.
Tác dụng của sticky sidebar
Sticky sidebar nhằm cố định các nội dung mà bạn muốn nhận được nhiều sự chú ý hơn từ khách ghé thăm website của bạn. Các nội dung này có thể là banner quảng cáo, hoặc danh sách các bài viết…
Cách tạo sticky sidebar bằng CSS
Trong bài viết này mình sẽ dùng theme Beginner của Theme Junkie để test thử cách tạo sticky sidebar cho wordpress nhé. Demo của theme ở đây. Đây là website đã cài theme này trên localhost. Mình có cài sẵn ở sidebar bên phải 1 banner và 1 recent post widget, và đăng một vài bài viết mẫu cho website có nội dung.
Bước đầu tiên để tạo sticky sidebar cho wordpress là bạn phải xác định được class hoặc id của sidebar là gì. Để xác định được class hoặc id của website đơn giản nhất là bạn sử dụng chức năng Inspect của trình duyệt. Để sử dụng chức năng nay bạn chuột phải vào khu vực sidebar của website chọn: Inspect(trình duyệt Chrome), Inspect Element(Firefox, Opera).
Sau khi chọn Inspect bạn có thể thấy được phần code dạng HTML của website.
Khi nhìn vào phần code HTML bạn có thể thấy khu vực sidebar thường có id hoặc class là sidebar, right -sidebar, left-sidebar, secondary…(tuỳ từng layout của theme). Ví dụ như theme Beginner khu vực sidebar có code HTML bắt đầu bằng:
<div id="secondary" class="widget-area sidebar" aria-label="Primary Sidebar" role="complementary" itemscope="itemscope" itemtype="http://schema.org/WPSideBar">
OK, mình sẽ chọn luôn class là “sidebar“, bây giờ bạn vào giao diện admin cửa website và chọn Customize ở trong phần Appearance.
Sau khi chọn Customize bạn sẽ được chuyển sang cửa sổ chỉnh sửa giao diện trực tiếp của website wordpress.
Lúc này bạn chọn Additional CSS và thêm đoạn code CSS này vào.
.sidebar {
position:sticky;
position:-webkit-sticky;
top:5%;
}Sau khi thêm đoạn code CSS bạn có thể thấy ngay sự thay đổi khi trượt trang web xuống dưới.
Ý nghĩa của đoạn code trên:
position: sticky; đoạn mã này cho biết sidebar của website sẽ được cố định khi bạn cuộn trang.
position:-webkit-sticky; đoạn mã này có chức năng cũng như trên nhưng giúp cho sticky sidebar hoạt động trên trình duyệt Safari.
top: 5%; đoạn mã này cho biết sidebar sẽ cố định ở vị trí cách đường biên phía trên phần hiện thị của trình duyệt một khoảng bao nhiêu đó khi cuộn trang. Ở đây mình để giá trị là 5% nhưng các bạn có thể để gía trị 5px cũng được, và nếu như bạn không dùng sticky menu thì có thể để gía trị là 0.
Bạn cần chú ý gì khi tạo sticky sidebar?
Trên đây chỉ là một trong các cách để tạo sticky sidebar cho wordpress bằng cách thêm code CSS cho id hoặc class cho sidebar. Tuy nhiên cách này không áp dụng được cho tất cả các theme wordpress hiện có. Mình có test một số theme thì các theme dựa trên boostrap, các theme của Junkie theme… có thể dùng cách này, nên mình đưa ra cách này để các bạn có thêm lựa chọn bên cạnh dùng plugin. Ngoài ra cách này cũng áp dụng được nếu bạn cần sticky một widget nào đó.
Nếu bạn có thắc mắc hoặc cần giúp đỡ gì khi chỉnh sửa sidebar hay comment phía dưới, mình sẽ cố gắng giúp đỡ trong khả năng nhé!
No working
Hello alex, can you send me your theme or website?
Em đã thử nhưng không được anh ạ.
Website của em: Vnhomes.vn
Cái này phải xem code bạn ạ.