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!

23
bình luận. Để lại câu hỏi & nhận trả lời nhanh qua email.

avatar
5 Comment threads
18 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
Thuần Te TuaLang ThangSơnBlog Duy ĐàmNguyễn Hữu Thuần Recent comment authors
newest oldest most voted
Lang Thang
Guest
Lang Thang

Mình thêm đoạn code đó vào chổ nào vậy? AD hướng dẫn cụ thể hơn với!

Lang Thang
Guest
Lang Thang

Chèn icon trước người bình luận như hình, làm thế nào vậy ad?
http://www.mediafire.com/view/y8x04f9suldn9v8/Capture.PNG

Sơn
Guest

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?

Blog Duy Đàm
Guest

Mình muốn thêm icon ở phần chuyên mục ở widget phải làm sao vậy bác? Giống phần chủ đề nổi bật của bác đó.

Tịnh Nguyễn Blog
Guest

Oánh dấu gấp, lúc trước muốn bắt chước anh em (học bạn) tí mà không biết làm răng. Giờ thì biết rầu nhá :v