Thủ thuật Web

Cách thêm Icon Font Awesome vào tiêu đề Widget trong WordPress

[Thủ thuật WordPress] Hướng dẫn cách thêm Icon Font Awesome vào tiêu đề Widget – Có một cách để làm cho trang Web của bạn trở nên sinh động hơn đó là thêm các biểu tượng cho trang Web, nhưng bạn không thể thêm các Icon Font Awesome vào Widget. Theo mặc định mã nguồn WordPress không cho thêm các Shortcode hay mã html trong tiêu đề Widget! Vậy làm thế nào để chúng ta có thể thêm biểu tượng Icon Font Awesome trong tiêu đề Widget của trang Web?

Bất cứ khi nào bạn thêm mã vào Widget thì nó sẽ tự động chuyển về dạng Text, cho nên nếu bạn muốn thêm các Icon Font Awesome vào tiêu đề Widget thì bạn không thể dùng cách thông thường như chèn mã html hoặc sử dụng Shortcode trừ khi bạn can thiệp vào mã nguồn hoặc cài đặt Plugin chuyên dụng!

Thêm Icon Font Awesome vào tiêu đề Widget

Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách chèn nút like mạng xã hội vào WordPress không Plugin giúp bạn có thể dễ dàng tùy biến mạng chia sẻ trên trang Web, tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách thêm Icon Font Awesome vào tiêu đề Widget.

#1 Thêm Icon Font Awesome không dùng Plugin

Với phương pháp này bạn chỉ cần thực hiện những thao tác sau là có thể sử dụng ngay Icon Font Awesome dành cho tiêu đề Widget, đầu tiên bạn hãy khai báo đoạn mã được cung cấp bên dưới để cấp quyền cho Widget có thể sử dụng Shortcode trong tiêu đề (dán vào File Function.php).

Sau khi sử dụng đoạn mã trên thì bạn có thể sử dụng Shortcode trong tiêu đề Widget rồi đấy, tiếp tục để thêm biểu tượng Font Awesome bạn hãy sử dụng đoạn mã sau và dán vào File Function.php của giao diện đang sử dụng.

Để lấy các Font Awesome bạn hãy truy cập vào liên kết này để chọn Icon. Sau đó chọn Icon bạn cần lấy bạn sẽ thấy một đoạn mã như sau.

hãy thay đổi nó nếu bạn muốn. Với đoạn mã trên bạn đã định nghĩa được một Shortcode có tên [fa-heart]. Bây giờ chỉ cần mở tiêu đề Widget và đặt vào mã như sau.

Và bạn sẽ có được kết quả như thế này!

thêm Icon Font Awesome vào tiêu đề Widget
Thêm Icon Font Awesome vào tiêu đề Widget

Với phương pháp này bạn sẽ thêm được 1 Shortcode, nếu bạn muốn thêm Shortcode hãy sử dụng đoạn mã bên dưới và sửa lại là được.

Trong đó:

(1): Định nghĩa tên Shortcode (ví dụ fa-heart, fa-search…)

(2): Tên Shortcode (ví dụ heart, search…)

(3): Cấu trúc Shortcode có dạng (<i class=”fa fa-search” aria-hidden=”true”></i>)

Ví dụ tôi muốn thêm một Shortcode tìm kiếm thì code sẽ như sau.

Chú ý

Nếu khi chèn Shortcode vào tiêu đề Widget mà bạn không thấy xuất hiện biểu tượng Icon thì bạn phải cần thêm đoạn mã dưới đây vào File Function.php của giao diện đang sử dụng.

Bạn hãy dán nó ngay sau thẻ <?php trong tập tin Function.php.

#2 Sử dụng Plugin

Nếu bạn cảm thấy cách trên quá rườm rà thì có thể sử dụng Plugin để thêm Icon cho tiêu đề Widget, đầu tiên bạn vào liên kết này để tải Plugin Widget Icon

 dành cho WordPress về máy tính và tiến hành cài đặt Plugin (nếu bạn chưa biết cách cài đặt Plugin cho WordPress bạn có thể tham khảo bài viết hướng dẫn cài đặt Plugin cho WordPress).

Sau khi kích hoạt xong hãy truy cập vào Widget, lúc này bạn sẽ thấy các tùy chọn của Widget Icon bên mỗi Widget. Công việc còn lại là chỉ cần chọn Icon mà bạn muốn xuất hiện là được!

Với 2 phương pháp trên bạn có thể dễ dàng thêm Icon vào tiêu đề Widget, theo bạn nếu như để chèn Icon cho tiêu đề Widget bạn sẽ dùng phương pháp nào? hãy để lại tin nhắn bên dưới bằng cách bình luận, quá đơn giản để thêm Icon Font Awesome vào tiêu đề Widget phải không?

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!

19 comments

  1. Không liên quan đến nội dung bài đăng lắm. Nhưng không biết anh có bị tình trạng nâng cấp lên wordpress 4.8, thì không tùy biến được phần widget nữa. Cụ thể, Thêm widget “text” vào sẽ không cho tùy chỉnh lại text đó. Không biết admin thử nâng cấp lên bản mới chưa?

      1. Em thử xóa cache trình duyệt, tắt luôn cả plugin cache mà vẫn không ăn thua. Hôm qua em vừa thấy genis nâng cấp lên 2.5.1, nay lại ra 2.5.2 em cũng đã update lên bản mới nhất, nhưng vẫn lỗi. Của anh vào Apperance/widgets rồi edit widget ở khung sidebar vẫn bình thường ạ?

        1. Thôi xong! Không biết có phải do em nghịch cái gì ở trong child theme không mà bị lỗi khi nâng cấp.

    1. Cái đó đơn giản thôi bác – bác vào phần tạo menu sau đó tạo menu mới và thêm các chuyên mục vào sau đó chèn thêm Icon. Sau đó quay trở lại Widget hãy sử dụng Widget tùy chọn menu và chọn menu vừa tạo là oke!

        1. Đúng rồi, em có bài nói về vụ chậm rồi đó. Host đấy, cài cái web trắng tinh cũng chậm. Xài gói host khác cùng server cũng chậm. Bực lắm

Leave a Reply

Your email address will not be published. Required fields are marked *

Cách thêm Icon Font Awesome vào tiêu đề Wid…

Tác giả: Thuần Te Tua Thời gian đọc để hiểu: 5 min
19