Cách tạo Sticky Sidebar không dùng plugin

Sticky sidebar trong WordPress có rất nhiều lợi ích, có thể kể đến như sau

  • Giúp tăng tốc độ truy cập: Các thành phần trong sticky sidebar sẽ luôn hiển thị một cách cố định, giúp người dùng truy cập nhanh chóng và dễ dàng.
  • Tăng tốc độ điều hướng: Nếu bạn cần chuyển hướng người dùng đến một trang nội dung cụ thể, sticky sidebar sẽ giúp bạn làm điều đó một cách dễ dàng hơn.
  • Tăng tính gợi nhớ: Sticky sidebar có thể giúp tăng tính gợi nhớ của người dùng về nội dung hoặc thông tin mà bạn muốn họ nhớ.
  • Tăng tính chất lượng dịch vụ: Sticky sidebar có thể giúp tăng tính chất lượng dịch vụ của bạn bằng cách cung cấp thông tin cần thiết và dễ dàng truy cập cho người dùng.
  • Tăng tính tương tác: Sticky sidebar có thể giúp tăng tính tương tác với người dùng bằng cách cung cấp các nút hoặc liên kết để họ có thể tương tác với nội dung của bạn.

Để tạo sticky sidebar có nhiều cách bao gồm cài plugin hỗ trợ sticky sidebar hoặc có thể dùng code JS/ CSS hoặc đơn giản hơn là chỉ sử dụng CSS nếu đơn giản chỉ cẩn cố định vị trí của sidebar ở bên trái hoặc bên phải màn hình.

Để tạo plugin đơn giản bạn chỉ cần search “sticky sidebar wordpress” nhưng đã đọc đến đây hẳn bạn đang muốn tìm một cách đơn giản hơn. Chúng ta sẽ cùng nhau thực hiện cách đơn giản hơn mà Phú đang thực hiện cho website của mình.

Để thực hiện được bạn cần làm theo các thao tác sau đây

Dò tìm class sidebar

Bạn F12 hoặc chuột phải chọn Inspect tại trang web chưa sidebar để tìm vị trí class sidebar

Lưu ý, tùy từng theme mà class có thể có tên khác nhau, nếu không được bạn có thể sử dụng class trong hoặc ngoài

Thêm CSS vào website

Vào mục Tùy biến chọn Thêm CSS, có thể vào nhanh bằng cách truy cập vào link này https://domaincuaban.com/wp-admin/customize.php (thay domaincuaban.com bằng địa chỉ website của bạn)

Thêm đoạn code sau đây vào mục CSS bổ sung, thay inside-right-sidebar bằng tên class bạn vừa tìm được ở bước 1

.inside-right-sidebar {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 20px; /* Khoảng cách từ trên cùng */
  float: right; /* Vị trí bên phải */
}

Nếu website sử dụng cả 2 sidebar trái và phải thì bạn phải tạo 2 node css như hình minh họa bên dưới

.inside-left-sidebar {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 20px; /* Khoảng cách từ trên cùng */
  float: right; /* Vị trí bên phải */
}

.inside-right-sidebar {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 20px; /* Khoảng cách từ trên cùng */
  float: right; /* Vị trí bên phải */
}

Chúc bạn thực hiện thành công

Related posts