Cách thêm ảnh vào widget sidebar WordPress

5 giờ ago, Hướng dẫn người mới, 1 Views

Cách Thêm Ảnh Vào Widget Sidebar WordPress

Sidebar là một phần quan trọng của trang web WordPress của bạn, thường được sử dụng để hiển thị thông tin bổ sung, quảng cáo, liên kết quan trọng hoặc đơn giản là làm cho trang web của bạn trông hấp dẫn hơn. Thêm ảnh vào sidebar có thể là một cách tuyệt vời để thu hút sự chú ý của khách truy cập, quảng bá sản phẩm hoặc dịch vụ, hoặc đơn giản là làm cho sidebar của bạn trông trực quan hơn. Có nhiều cách để thêm ảnh vào widget sidebar WordPress, và bài viết này sẽ hướng dẫn bạn qua một số phương pháp phổ biến nhất.

Sử Dụng Widget “Ảnh” Mặc Định của WordPress

WordPress đi kèm với một widget “Ảnh” mặc định, giúp bạn dễ dàng thêm ảnh vào sidebar mà không cần bất kỳ plugin hoặc mã tùy chỉnh nào. Đây là cách thực hiện:

Đăng nhập vào bảng điều khiển WordPress của bạn.
Đi đến Appearance > Widgets.
Tìm widget “Ảnh” trong danh sách các widget khả dụng.
Kéo và thả widget “Ảnh” vào sidebar mà bạn muốn thêm ảnh.
Nhấp vào nút “Thêm ảnh”.
Chọn ảnh bạn muốn tải lên từ máy tính của bạn hoặc chọn một ảnh đã có trong thư viện phương tiện.
Nhập tiêu đề cho ảnh (tùy chọn).
Nhập văn bản thay thế (alt text) cho ảnh (rất quan trọng cho SEO và khả năng truy cập).
Nhập URL liên kết (nếu bạn muốn ảnh dẫn đến một trang web cụ thể).
Chọn kích thước ảnh.
Nhấp vào nút “Lưu”.

Sau khi lưu, ảnh của bạn sẽ xuất hiện trong sidebar. Bạn có thể kéo và thả widget “Ảnh” để thay đổi vị trí của nó trong sidebar.

Sử Dụng Widget “Text” (HTML) để Thêm Ảnh

Widget “Text” cho phép bạn thêm bất kỳ mã HTML nào vào sidebar, bao gồm cả mã để hiển thị ảnh. Đây là một phương pháp linh hoạt hơn, cho phép bạn kiểm soát nhiều hơn về cách ảnh được hiển thị. Đây là cách thực hiện:

Đăng nhập vào bảng điều khiển WordPress của bạn.
Đi đến Appearance > Widgets.
Tìm widget “Text” (đôi khi được gọi là “Custom HTML”) trong danh sách các widget khả dụng.
Kéo và thả widget “Text” vào sidebar mà bạn muốn thêm ảnh.
Trong trường văn bản, nhập mã HTML sau:


<img src="URL_CỦA_ẢNH" alt="Văn bản thay thế" width="ĐỘ_RỘNG" height="CHIỀU_CAO">

Thay thế URL_CỦA_ẢNH bằng URL thực tế của ảnh bạn muốn hiển thị. Bạn có thể tìm URL của ảnh trong thư viện phương tiện WordPress.
Thay thế Văn bản thay thế bằng mô tả ngắn gọn về ảnh.
Thay thế ĐỘ_RỘNG và CHIỀU_CAO bằng kích thước mong muốn của ảnh (tính bằng pixel). Nếu bạn muốn ảnh tự động điều chỉnh kích thước theo chiều rộng của sidebar, bạn có thể bỏ qua thuộc tính width và height hoặc đặt width thành 100%.

Ví dụ:


<img src="https://example.com/wp-content/uploads/2023/10/my-image.jpg" alt="Ảnh về sản phẩm của tôi" width="300">

Nhấp vào nút “Lưu”.

Bạn cũng có thể thêm liên kết vào ảnh bằng cách bọc thẻ <img> trong thẻ <a>. Ví dụ:


<a href="https://example.com/product-page">
  <img src="https://example.com/wp-content/uploads/2023/10/my-image.jpg" alt="Ảnh về sản phẩm của tôi" width="300">
</a>

Sử Dụng Plugin WordPress

Có rất nhiều plugin WordPress có thể giúp bạn thêm ảnh vào sidebar một cách dễ dàng và linh hoạt. Một số plugin phổ biến bao gồm:

Image Widget: Plugin này cho phép bạn thêm ảnh vào sidebar với nhiều tùy chọn cấu hình, chẳng hạn như tiêu đề, mô tả, liên kết và kích thước ảnh.
Simple Image Widget: Một plugin đơn giản và dễ sử dụng để thêm ảnh vào sidebar.
Widget Options: Plugin này cho phép bạn kiểm soát các widget hiển thị trên các trang khác nhau của trang web của bạn. Bạn có thể sử dụng nó để hiển thị các ảnh khác nhau trong sidebar trên các trang khác nhau.

Để cài đặt một plugin:

Đăng nhập vào bảng điều khiển WordPress của bạn.
Đi đến Plugins > Add New.
Tìm kiếm plugin bạn muốn cài đặt.
Nhấp vào nút “Install Now”.
Sau khi cài đặt xong, nhấp vào nút “Activate”.

Sau khi plugin được kích hoạt, bạn có thể tìm thấy các widget mới trong trang Appearance > Widgets.

Tùy Chỉnh CSS cho Ảnh trong Sidebar

Nếu bạn muốn tùy chỉnh giao diện của ảnh trong sidebar, bạn có thể sử dụng CSS. Bạn có thể thêm CSS tùy chỉnh vào trang web WordPress của bạn bằng cách sử dụng:

Trình tùy biến WordPress (Appearance > Customize > Additional CSS): Đây là cách dễ nhất để thêm CSS tùy chỉnh vào trang web của bạn.
Tệp style.css của theme: Bạn có thể chỉnh sửa tệp style.css của theme con (child theme) của bạn. Tuy nhiên, bạn nên sử dụng theme con để tránh mất các tùy chỉnh của bạn khi theme chính được cập nhật.

Dưới đây là một số ví dụ về CSS mà bạn có thể sử dụng:

Để thay đổi kích thước ảnh:


.widget img {
  width: 100%; /* Đảm bảo ảnh có chiều rộng tối đa là 100% của widget */
  height: auto; /* Duy trì tỷ lệ khung hình của ảnh */
}

Để thêm viền cho ảnh:


.widget img {
  border: 1px solid #ccc; /* Thêm viền màu xám nhạt */
}

Để thêm khoảng cách xung quanh ảnh:


.widget img {
  margin-bottom: 10px; /* Thêm khoảng cách 10px bên dưới ảnh */
}

Hãy nhớ thay thế .widget bằng class CSS cụ thể của widget chứa ảnh của bạn nếu cần thiết. Bạn có thể sử dụng công cụ kiểm tra của trình duyệt (ví dụ: Chrome DevTools) để tìm class CSS chính xác.

Lời Khuyên Quan Trọng Khi Thêm Ảnh Vào Sidebar

Khi thêm ảnh vào sidebar, hãy ghi nhớ những điều sau:

Kích thước ảnh: Đảm bảo rằng ảnh của bạn có kích thước phù hợp với sidebar. Ảnh quá lớn có thể làm chậm trang web của bạn và trông không đẹp.
Tối ưu hóa ảnh: Tối ưu hóa ảnh của bạn để giảm kích thước tệp mà không làm giảm chất lượng. Bạn có thể sử dụng các công cụ trực tuyến hoặc plugin WordPress để tối ưu hóa ảnh.
Văn bản thay thế (alt text): Luôn thêm văn bản thay thế cho ảnh của bạn. Văn bản thay thế giúp công cụ tìm kiếm hiểu nội dung của ảnh và cải thiện khả năng truy cập cho người dùng khiếm thị.
Tính nhất quán: Đảm bảo rằng ảnh của bạn có phong cách nhất quán với thiết kế tổng thể của trang web của bạn.

Thêm ảnh vào widget sidebar WordPress là một cách tuyệt vời để cải thiện giao diện và chức năng của trang web của bạn. Bằng cách sử dụng các phương pháp và lời khuyên được nêu trong bài viết này, bạn có thể dễ dàng thêm ảnh vào sidebar và làm cho trang web của bạn trông hấp dẫn và chuyên nghiệp hơn.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa