Diều Hâu
Kho theme & plugin bản quyền cho WordPress
  • WordPress
    • Plugin
    • Theme
    • Hướng Dẫn
    • Thủ Thuật
  • Công Nghệ
    • Điện thoại
    • Internet
    • Máy tính
  • Marketing
  • MMO
  • SEO
No Result
View All Result
  • WordPress
    • Plugin
    • Theme
    • Hướng Dẫn
    • Thủ Thuật
  • Công Nghệ
    • Điện thoại
    • Internet
    • Máy tính
  • Marketing
  • MMO
  • SEO
No Result
View All Result
Diều Hâu
No Result
View All Result
Home Thiết kế / Lập trình WordPress Hướng Dẫn

Cách thêm hình ảnh vào Sidebar Widget trong WordPress

07/08/2018
in Hướng Dẫn
0

Mục Lục

  1. Thêm hình ảnh trong WordPress bằng Image Widget
  2. Thêm hình ảnh vào Sidebar trong WordPress sử dụng Text Widget
  3. Thêm hình ảnh vào Sidebar Widget theo cách thủ công
  4. Thêm hình ảnh vào sidebar WordPress bằng cách sử dụng plugin

Bạn có muốn thêm hình ảnh vào sidebar widget trong WordPress không? WordPress cho phép bạn dễ dàng upload và thêm hình ảnh ở bất kỳ đâu trên website. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách đơn giản nhất để thêm hình ảnh vào sidebar widget trong WordPress. Dưới đây là một số cách, bạn có thể chọn cách phù hợp nhất với mình.

Thêm hình ảnh trong WordPress bằng Image Widget

Cách dễ nhất để thêm hình ảnh trong sidebar là sử dụng Image Widget. Bạn chỉ cần truy cập vào Appearance » Widgets và thêm widget “Image” vào sidebar. Nếu trước đây bạn chưa từng sử dụng các widget, hãy xem hướng dẫn của chúng tôi về cách hiển thị bình luận gần đây trong sidebar.

Image Widget sẽ xổ xuống và bạn có thể tiến hành cài đặt.

Trước hết bạn cần thêm Title vào Image Widget. Sau đó, nhấp vào nút ‘Add Image’ để tiếp tục.

Sau đó bạn chỉ cần nhấp vào nút tải tệp lên để upload hình ảnh hoặc chọn hình ảnh mà bạn đã upload trước đó.

Sau khi tải lên hình ảnh, bạn có thể cài đặt hình ảnh ở cột bên phải. Bạn có thể thêm title/ ALT text cho hình ảnh, thêm mô tả, chọn kích thước hoặc thậm chí thêm link.

Khi đã hoàn thành, bạn nhấp vào nút “Add to Widget” để lưu các thay đổi. Một bản xem trước sẽ xuất hiện trong khu vực cài đặt widget.

Đừng quên nhấp vào nút “Save” để lưu.

Bây giờ bạn có thể truy cập website của mình để xem hình ảnh được hiển thị ở thanh sidebar trong blog WordPress của bạn.

Thêm hình ảnh vào Sidebar trong WordPress sử dụng Text Widget

Thêm hình ảnh vào sidebar bằng widget image khá dễ dàng. Tuy nhiên, đôi khi bạn cần thêm hình ảnh với custom HTML hay văn bản có định dạng. Trong trường hợp đó, bạn sẽ cần sử dụng Widget ‘Text’ (Văn bản) để thay thế.

Chỉ cần vào Appearance » Widgets và thêm widget ‘Text’ vào sidebar của bạn. Trong phần cài đặt widget, bạn sẽ thấy nút “Add media” ở phía trên vùng chỉnh sửa văn bản.

Nhấp vào nút đó trình tải lên sẽ hiển thị cho phép bạn tải hoặc chọn hình ảnh từ Media.

Sau khi chọn hình ảnh, nhấp vào nút “Insert into post”. Giờ đây, bạn có thể xem bản xem trước trong phần cài đặt.

Bạn có thể tiếp tục thêm văn bản hay bất cứ cái gì vào widget “text”. Thanh công cụ trong trình soạn thảo văn bản sẽ có một số nút để định dạng cơ bản.

Khi hoàn tất, đừng quên nhấp vào nút ‘Save’ để lưu các cài đặt của bạn.

Bây giờ bạn có thể truy cập trang web của mình để xem hình ảnh hiện trên sidebar.

Thêm hình ảnh vào Sidebar Widget theo cách thủ công

Trong một số trường hợp, bạn cần thêm đoạn custom HTML để hiện hình ảnh. Mặc định Text Widget chỉ cho phép bạn thêm một số HTML rất cơ bản, vì thế bạn cần phải thêm hình ảnh vào sidebar của blog theo cách thủ công.

Trước tiên, bạn cần tải hình ảnh lên trang web WordPress bằng cách truy cập vào Media » Add New và tải lên tệp hình ảnh của bạn.

Sau khi tải lên hình ảnh, bạn cần nhấp vào link Edit ở bên cạnh hình ảnh.

WordPress sẽ hiện ra trang ‘Edit Media’ có chứa URL của tệp hình ảnh ở bên phải màn hình. Bạn cần sao chép URL này và dán nó vào một trình soạn thảo văn bản như Notepad.

Tiếp theo, bạn cần truy cập Appearance » Widget và kéo thả widget ‘Custom HTML’ vào sidebar, nơi bạn muốn hiển thị hình ảnh.

Trong phần nội dung, bạn thêm hình ảnh bằng đoạn code sau:

<img src="Điền Image URL vào đây" alt="Huong-dan-nguoi-moi" />

Img tag được sử dụng dưới dạng HTML để hiển thị hình ảnh. Nó có hai thuộc tính cần thiết là src và alt. Src xác định đường dẫn tham chiếu tới hình ảnh. Đây là nơi bạn sẽ dán URL mà bạn đã

sao chép trước đó.

Alt được sử dụng như một văn bản thay thế khi hình ảnh không hiển thị (hoặc không có sẵn)cho hình ảnh. Img tag hoàn chỉnh sẽ có dạng như sau::

<img src="http://www.example.com/wp-content/uploads/2014/09/strawberries.jpg" alt="Huong-dan" />

Bạn cần phải nhấp vào nút “Save” để lưu các cài đặt.

Thêm hình ảnh vào sidebar WordPress bằng cách sử dụng plugin

Một cách khác để thêm hình ảnh vào sidebar WordPress là sử dụng plugin. Công cụ này cung cấp thêm một số tùy chọn và một giao diện đơn giản giúp người mới bắt đầu có thể sử dụng dễ dàng.

Trước tiên, bạn cần cài đặt và kích hoạt plugin Image Widget. Để biết thêm chi tiết, hãy xem hướng dẫn của chúng tôi về cách cài đặt plugin WordPress.

Khi kích hoạt, bạn chỉ cần truy cập vào Appearance » Widgets. Bạn sẽ thấy một widget mới ‘ Image Widget’ ở dưới cột “available widget”. Chỉ cần kéo và thả image widget vào sidebar WordPress, nơi bạn muốn hiển thị hình ảnh.

Tiếp theo, nhấp vào nút “Select Image” để tải lên hình ảnh hoặc chọn hình ảnh từ media library. Sau đó nhấp vào nút “Insert to Widget” và bạn sẽ thấy bản xem trước trong phần cài đặt.

Bạn có thể thêm title, alt text, link và caption cho hình ảnh. Bạn cũng có thể chọn kích thước hình ảnh từ danh sách các tùy chọn có sẵn.

Khi đã hoàn tất, bạn chỉ cần nhấp vào nút Save để lưu image widget. Giờ đây bạn có thể truy cập website của bạn và xem hình ảnh được hiển thị trong sidebar.

Chúng tôi hy vọng bài viết này đã giúp bạn biết cách thêm hình ảnh trong widget sidebar WordPress. Nếu gặp phải vấn đề, đừng quên xem hướng dẫn của chúng tôi vềcách khắc phục những lỗi cơ bản trên WordPress

Nếu bạn thích bài viết này, hãy đăng ký theo dõi Diều Hâu để nhận thêm nhiều thông tin hữu ích nhé.

Tags: hình ảnhsidebarwidget

Related Posts

Free-Stock-Photo
Tài Nguyên

Top 22 nguồn tải hình ảnh đẹp, chất lượng cao (Stock Photo Free)

17/03/2021
hover-effects-image
Plugin

Hướng dẫn thêm Hover Effects cho hình ảnh trong WordPress

29/03/2021
10 tính năng thú vị của Google Photos có thể bạn chưa biết
Máy tính

10 tính năng thú vị của Google Photos có thể bạn chưa biết

07/12/2020
Hướng dẫn chèn file SVG vào WordPress
Hướng Dẫn

Hướng dẫn thêm file SVG vào trong WordPress ( 2 cách)

22/09/2020
Hướng dẫn hiển thị ảnh Before và After trong WordPress (với hiệu ứng Slide)
Plugin

Hướng dẫn hiển thị ảnh Before và After trong WordPress (với hiệu ứng Slide)

18/09/2018
quản lý hình ảnh
Hướng Dẫn

Hướng dẫn hoàn thiện về cách quản lý hình ảnh trong WordPress

22/09/2020
Next Post
ngừng lưu địa chỉ ip

Làm thế nào ngừng lưu địa chỉ IP trong bình luận Wordpress

Đăng ký
Thông báo về
guest
guest
0 Bình Luận
Inline Feedbacks
View all comments

Bạn Cần Hỗ Trợ Về

Viết Blog

Bảo Mật

Sửa Lỗi

Tăng Tốc

SEO

Bán Hàng

Xem Nhiều Nhất

Huong-dan-su-dung-WordPress

Hướng dẫn sử dụng WordPress cho người mới (Chi tiết từ A->Z)

26/09/2020
Loi-thuong-gap-trong-wordpress

25 lỗi thường gặp nhất trong WordPress và cách sửa chúng

21/09/2020
Cách khắc phục lỗi không kết nối được cơ sở dữ liệu

Cách khắc phục lỗi không kết nối được cơ sở dữ liệu

22/09/2020
Plugin-hay-nhat-cho-WordPress

20 Plugin tốt nhất phải có trên mọi website WordPress (2021)

03/03/2021
Hướng dẫn sửa lỗi Troubleshooting

Hướng dẫn khắc phục lỗi WordPress cho người mới bắt đầu

22/09/2020

Series Nổi Bật

Thủ thuật WooCommerce Thủ thuật WooCommerce Thủ thuật WooCommerce
Website đa ngôn ngữ Website đa ngôn ngữ Website đa ngôn ngữ

VPS Khuyên Dùng

VPS khuyên dùng VPS khuyên dùng VPS khuyên dùng
  • Liên hệ
  • Sitemap
  • Chính sách bảo mật
  • Điều khoản sử dụng

© 2021 Diều Hâu - Tạp chí công nghệ cho mọi người

No Result
View All Result
  • WordPress
    • Plugin
    • Theme
    • Hướng Dẫn
    • Thủ Thuật
  • Công Nghệ
    • Điện thoại
    • Internet
    • Máy tính
  • Marketing
  • MMO
  • SEO

© 2021 Diều Hâu - Tạp chí công nghệ cho mọi người

wpDiscuz
Comment Author Info
:wpds_smile::wpds_grin::wpds_wink::wpds_mrgreen::wpds_neutral::wpds_twisted::wpds_arrow::wpds_shock::wpds_unamused::wpds_cool::wpds_evil::wpds_oops::wpds_razz::wpds_roll::wpds_cry::wpds_eek::wpds_lol::wpds_mad::wpds_sad::wpds_exclamation::wpds_question::wpds_idea::wpds_hmm::wpds_beg::wpds_whew::wpds_chuckle::wpds_silly::wpds_envy::wpds_shutmouth: