Cố định phần tử website như thế nào? Việc làm này tưởng chừng như đơn giản nhưng không phải cũng biết! Khi truy cập website chúng ta thường rất hay gặp những phần tử như banner quảng cáo, giỏ hàng, thanh tìm kiếm, sidebar,… khi cuộn chuột chúng sẽ cố định lại để thuận tiện hơn cho người dùng.

Có rất nhiều cách để cố định phần tử khi cuộn chuột, hôm nay mình sẽ giới thiệu cho bạn một Jquery Plugin để làm việc này đơn giản và ngắn gọn đó là “Jquery lockfixed” của Yvo Schaap.

Trong bài hướng dẫn này, mình sẽ đóng đinh phần tử sidebar bên phải trang web nhé. Hình bên dưới mô tả một cách trực quan việc đóng đinh 1 sidebar.

Bước 1: Xác định phần tử muốn đóng đinh

Bước 2: Kiểm tra mã nguồn của bạn đã có thư viện Jquery chưa, nếu chưa có hãy chèn dòng code dưới đây trong phần của mã nguồn web.

Bước 3: Viết code jQuery điều khiển phần tử muốn cố định.

$(document).ready(function () { $.lockfixed("

sidebar", {offset: {top: 20, bottom: 470} });

});

Chú thích:

• sidebar: là phần tử muốn cố định

• top: tọa độ fixed phía trên của phần tử cố định ( so với top của trình duyệt) khi người dùng cuộn chuột xuống.
• bottom: tọa độ fixed phía dưới của phần tử cố định

Hãy lưu file và xem thành quả của bạn đi! Mong rằng qua bài viết này bạn không còn trở ngại nào khi thiết kế website wordpress nữa.

Thật dễ phải không nào, nếu có khó khăn gì hãy comment ở phía dưới mình sẽ giúp đỡ các bạn. Chúc các bạn thành công!

Tôi là Trần Đức Thắng, hiện đang là CEO & Co-Founder của Công Ty Ngọc Thắng. Tôi phát triển với nền tảng thiết kế website, SEO và Inbound Marketing. Hiện nay Ngọc Thắng cung cấp dịch vụ thiết kế website, SEO, quảng cáo Google Ads… Với kinh nghiệm triển khai nhiều dự án những năm qua, đội ngũ của Ngọc Thắng không ngừng nỗ lực mang đến những dịch vụ tốt với chi phí thấp nhất cho quý khách hàng.!

" Ngọc Thắng đã tạo 1 group cộng đồng HỎI - ĐÁP về Thiết kế WEBSITE và SEO Wordpress để chia sẻ kinh nghiệm và học hỏi kiến thức. Mời bạn tham gia trao đổi kinh nghiệm, đặt câu hỏi để được các chuyên gia hỗ trợ miễn phí tại Group: " https://www.facebook.com/groups/hocthietkewebwp/ Click để tham gia group

Tạo Stick Sidebar trong theme flatsome giúp cho sidebar ghim vào vùng hiển thị mà hình sẽ giúp website đỡ trống trãi và các nội dung quan trong luôn bảo đảm đập vào mắt người dùng

Cách Stick Sidebar trong theme flatsome

Cách Stick Sidebar trong theme flatsome

Từ bản Flatsome 3.14 trở lên Flatsome đã tích hợp stick vào trong theme mà ít bạn để ý điều đó ,

trước đây khi cần Stick bạn có nhièu cách dùng :

• Code cố định một Widget(Stick Widget) tự động trượt khi lăn chuột
• Plugin Widget CSS Classes Cách tạo sticky sidebar bằng css cho wordpess
• Plugin Q2W3 Fixed Widget &

  8211; cố định Widget sidebar

Khi bạn dùng Theme Flatsome thì không cần cài thêm vì trên Theme đã stick hợp sẳn rồi nhé

Để kick hoạt stick bạn vào

Flatsome / Theme Options / Blog / Blog Layout

Ngay side bar bên trái bạn tìm dòng Sticky sidebar Click chọn nó nhé ( như hình )

Cách Stick Sidebar trong theme flatsome

Sau khi stick xong bạn quay lại web view để xem stick chưa nhé 🙂

Ưu điểm của viẹc dùng Stick có sẳn trên Flatsome

• Không cần cài thêm Plugin hoặc code lằng nhằng
• Rất tiện dụng vì có sẳn cần là chọn hoặc bỏ chọn là được

Nhược điểm của việc Stick có sẳn

• Không chủ được được việc stick gì và không stick gì vì mỗi khi Stick là nguyên Sidebar không chọn stick từng widget riêng biệt được

Bạn có thêm nhiều lựa chọn ở trên nhé , Dùng Plugin Q2W3 Fixed Widget &

8211; cố định Widget sidebar

là một lựa chọn thay thế hoàn hảo.

Chúc các bạn thành công nhé

Điểm 4.9/5 - ( Có 11 bình chọn)

Đối với những ai thường xuyên làm việc với WordPress thì Sidebar không phải là một thuật ngữ quá xa lạ. Vậy ? Làm thế nào để sử dụng Sidebar một cách tối ưu nhất?

Bài viết sau đây sẽ giúp bạn biết được thành phần Sidebar trong WordPress là gì, ưu điểm nổi bật cũng như biết được những cách sử dụng Sidebar. Bên cạnh đó, bài viết còn gợi ý cho bạn vị trí đặt Sidebar tốt nhất trong trang web. Cùng theo dõi ngay nhé!

Sidebar là gì?

Trong WordPress, Sidebar là nơi để hiển thị các thông tin phụ không nằm trong nội dung chính. Đồng thời, Sidebar cũng là một ứng dụng khá linh hoạt, dễ thay đổi, sử dụng khi có thể được đặt ở bên phải, bên trái, hai bên hoặc bất kỳ vị trí nào mà bạn muốn.

Sidebar là gì? Đây là nơi hiển thị những thông tin ngoài nội dung chính của trang

Với Sidebar người quản trị website có thể thêm cũng như sắp xếp các nội dung như: bài viết mới, lịch, tìm kiếm,… mà không cần phải chỉnh lại code.

Việc lựa chọn sử dụng các hình thức Sidebar khác nhau sẽ còn tuỳ thuộc phần lớn vào ý tưởng và chủ đề mà người thiết kế đưa ra. Nhiều theme WordPress hỗ trợ cho nhiều Sidebar còn được gọi là khu vực sẵn sàng cho tiện ích.

Sidebar có vai trò quan trọng trong việc thiết kế bố cục để hiển thị các nội dung khác ngoài các bài viết tại mục chính của website. Ngoài ra, công cụ này còn được dùng để dùng để hiển thị quảng cáo từ các trang web của bên thứ ba.

Widget là gì?

Widget là các phần nội dung nhỏ, lẻ được thêm vào sidebar. Mỗi website sẽ có sự tùy biến về Widget tùy thuộc vào từng loại hình website khác nhau, Widget thường là nội dung về tin tức mới, sự kiện mới, dịch vụ liên quan, danh mục sản phẩm,…

Việc thêm các Widget vào sidebar giúp trang web trở nên đẹp mắt, thẩm mỹ hơn đồng thời đây cũng là một cách tuyệt vời để điều hướng người dùng đến các nội dung mong muốn.

Ưu điểm khi sử dụng Sidebar là gì?

Sidebar là một phần thể thiếu trong bất kỳ một trang web nào. Nếu không có thanh công cụ này, người dùng mỗi khi truy cập vào website sẽ cảm thấy trống vắng, thiếu sót.

Ưu điểm của Sidebar là gì?

Sidebar mang đến nhiều ưu điểm nổi bật cho website, một số trong đó có thể kể như:

• Giúp website trở nên đẹp mắt, tăng độ chuyên nghiệp hơn.
• Lấp đầy những chỗ trống trên website một cách hợp lý nhất.
• Góp phần nâng cao trải nghiệm của người dùng.
• Hỗ trợ, thúc đẩy website hoàn thành các mục tiêu hoạt động.
• Cung cấp nhiều thông tin cần thiết, hữu ích đến khách hàng.

Cách sử dụng Sidebar trong WordPress

Cách tạo Sidebar

Sidebar là một công cụ vô cùng tiện ích dành cho các đối tượng khách hàng là người trực tiếp quản trị website. Tuy nhiên, việc tạo Sidebar được đánh giá là khá phức tạp, không phải ai cũng có kiến thức tốt để tạo được Sidebar cho WordPress.

Dưới đây là một vài cách cơ bản và đơn giản nhất để bạn tạo Sidebar thành công.

Đối với các theme WordPress đã được kích hoạt

Trong trường hợp này thì bạn áp dụng những cách sau:

Cách 1: Tạo Sidebar bằng Widget

• Trong phần giao diện quản trị chính –> Chọn Appearance –> Chọn Widget
• Sau khi giao diện Widget được hiên thị –> Chọn Sidebar

Cách 2: Tạo Sidebar bằng Customize

• Trong phần giao diện quản trị chính –> Chọn Appearance –> Chọn Customize –> Chọn Widget
• Sau khi giao diện Widget được hiên thị –> Chọn Sidebar

Cách tạo Sidebar

Đối với các theme WordPress chưa được kích hoạt

Trong trường hợp này, để sử dụng được Sidebar, bạn phải đăng ký hàm register_sidebar. Một vài tham số của hàm mà bạn cần biết:

• Name: Tên của Sidebar và có thể dễ dàng thấy được ở trang quản lý
• ID: Tên địa chỉ bằng chữ thường mà bạn đã dùng để đăng ký hoặc địa chỉ có sẵn của máy
• Description: Đoạn văn mô tả về Sidebar
• Class: Lớp tên gọi của css được gán vào đoạn mã html widget
• Before_Widget: Đoạn mã html được đặt trước widget
• After_Widget: Đoạn mã html được đặt sau widget
• Before_Title: Đoạn mã html được đặt trước tiêu đề widget
• After_Title: Đoạn mã html được đặt sau tiêu đề widget

Như đã biết từ trước, việc tạo nên Sidebar khá phức tạp nếu người dùng không biết mã code PHP. Vậy nên, nếu bạn là người mới sử dụng thì không nên tự thực hiện để tránh xảy ra các lỗi không mong muốn khi WordPress hoạt động.

Thay vào đó, bạn có thể có thể nhờ đến các đơn vị thiết kế hoặc các dịch vụ thiết kế website có kinh nghiệm chuyên sâu để cài đặt cho mình.

Cách thêm nội dung vào Sidebar

Sidebar là một thành phần đóng vai trò quan trọng và có thể giúp website của bạn trở nên linh động hơn rất nhiều. Đặc biệt, bạn có thể tự tạo và quản lý được nội dung của Sidebar trên website.

Ngoài ra, thành phần này cũng là một nơi lý tưởng để hiển thị các loại quảng cáo như: quảng cáo hiển thị, quảng cáo liên kết văn bản, quảng cáo video,…

Để thêm nội dung mới cho Sidebar, đầu tiên bạn hãy truy cập quản trị giao diện Appearance/Widget. Sau đó, bạn hãy kéo thả Sidebar từ bên trái qua bên phải và điền nội dung tùy chỉnh, cuối cùng là lưu lại thay đổi.

Cách thêm nội dung cho Sidebar là gì?

Những widget mặc định là những widget nằm bên phải mà WordPress cung cấp cho người dùng. Ngoài ra, bạn cũng có thể thêm nội dung ngoài giao diện bằng cách dùng hàm get_Sidebar.

Cách hiển thị Sidebar

Sau khi đăng ký thành công Sidebar cho WordPress, điều bạn cần làm tiếp theo chính là hiển thị Sidebar trong Theme của mình. Có 2 cách để bạn thực hiện là:

• Cách 1: Tạo sidebar.php và hiển thị Sidebar vừa tạo trong sidebar.php, đồng thời sử dụng hàm dynamic_sidebar. Một lưu ý là bạn nên sử dụng hàm get_sidebar để thêm sidebar.php vào vị trí muốn hiển thị.
• Cách 2: Sử dụng hàm dynamic_sidebar để đặt Sidebar vào vị trí mà bạn muốn hiển thị. Tuy nhiên, bạn cần phải lưu ý đến tham số duy nhất của hàm. Những tham số đó có thể là Name hoặc ID của Sidebar.

Vị trí đặt Sidebar tốt nhất

Sidebar là một công cụ được sử dụng rất linh hoạt về vị trí. Vậy nên, có rất nhiều người dùng đang băn khoăn, không biết nên lựa chọn vị trí đặt Sidebar như thế nào là thích hợp nhất.

Dưới đây là những lợi thế của từng vị trí, có thể giúp bạn đưa ra quyết định phù hợp nhất với website của mình:

• Sidebar đặt bên trái: Người dùng khi truy cập vào một website sẽ có thói quen nhìn từ trái sang phải, từ trên xuống dưới. Vậy nên, đây sẽ là một vị trí khá thuận lợi để giúp nội dung Sidebar nổi bật, thu hút sự quan tâm đầu tiên của người dùng.
• Sidebar đặt bên phải: Vị trí này góp phần hướng khách hàng đi từ nội dung chính đến các vấn đề, chi tiết nhỏ liên quan khác. Cách làm này sẽ giúp họ thoải mái trong việc tiếp nhận thông tin, đồng thời tăng tỷ lệ tìm đúng nội dung họ đang cần.

Vị trí đặt Sidebar

Tóm lại, dù đặt Sidebar ở vị trí nào thì đều có những đặc điểm, lợi thế nổi bật riêng. Tuỳ theo mục đích, ý tưởng thiết kế cũng như cách sắp xếp bố cục mà bạn sẽ có cách đặt phù hợp, mang phong cách đặc trưng nhưng vẫn thuận mắt, dễ dàng truyền tải thông tin.

Những câu hỏi thường gặp về sidebar?

Sidebar dùng để làm gì?

Sidebar là một khu vực mà người quản trị website có thể tùy chỉnh để thêm hoặc bớt nội dung cho bài viết, như mục tìm kiếm, lịch, bài viết mới và nhiều thành phần khác. Nó còn được gọi là thanh bên và xuất hiện trong bài viết ở vị trí bên phải, bên trái hoặc cả hai tùy thuộc vào template bạn chọn.

Vai trò chính của sidebar là gì?

Sidebar thường được sử dụng để cung cấp thông tin phụ, hỗ trợ điều hướng nhanh, quảng cáo, liên kết liên quan hoặc các tiện ích như danh sách bài viết phổ biến, ô tìm kiếm, thẻ tag và nhiều hơn nữa.

Sidebar có ảnh hưởng đến trải nghiệm người dùng không?

Có, sidebar có thể ảnh hưởng đến trải nghiệm người dùng bằng cách cung cấp thông tin bổ sung, hỗ trợ điều hướng nhanh và tạo tiện ích. Tuy nhiên, cần đảm bảo rằng sidebar không gây xao lạc hoặc che mất nội dung chính của trang.

Có những loại sidebar phổ biến nào?

Một số loại sidebar phổ biến bao gồm: sidebar dọc (vertical sidebar), sidebar ngang (horizontal sidebar), sidebar cuộn (scrolling sidebar), sidebar cố định (fixed sidebar), sidebar điều hướng (navigation sidebar) và sidebar widget (widget sidebar).

Qua bài viết trên, đã giúp bạn hiểu được thành phần Sidebar là gì? Ưu điểm nổi bật cũng như biết được những cách sử dụng Sidebar. Ngoài ra, bài viết còn gợi ý cho bạn vị trí đặt Sidebar tốt nhất trong trang web. Hy vọng với những thông tin trên bạn sẽ có thêm kiến thức cũng như biết cách sử dụng Sidebar sao cho tối ưu nhất.

Cảm ơn bạn vì đã đọc bài viết! Đừng quên đọc thêm những bài viết hữu ích khác của Miko Tech nhé!

MikoTech.vn Chuyên thiết kế website chuyên nghiệp và dự án App cho Doanh nghiệp trong và ngoài nước. Đội ngũ chuyên viên tại Agency Miko Tech Marketing thực hiện các dự án Marketing tổng thể, Dịch vụ quản trị Website và tối ưu website. Thiết kế giao diện trang web tĩnh và động.