Cách tạo icon cho các chuyên mục hiển thị trên Widget

[Thủ thuật WordPress] Hướng dẫn cách tạo icon cho các chuyên mục hiển thị trên Widget – Đây cũng là một câu hỏi của độc giả có địa chỉ Email (dam…[email protected]) tưởng chừng việc tạo icon cho các chuyên mục hiển thị trên Widget là rất đơn giản tuy nhiên không phải ai cũng có thể biết cách thực hiện, đối với mình thì ban đầu mình cũng không biết phải làm sao để có được các Widget hiển thị các chuyên mục hay “tag” kèm với các Icon, để tạo được icon cho các chuyên mục hiển thị trên Widget không hề khó chỉ cần các bạn đọc hướng dẫn bên dưới là các bạn có thể làm được ngay.

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 cách thêm Icon Font Awesome vào tiêu đề Widget giúp bạn có thể dễ dàng thêm các Icon vào tiêu đề Widget một cách đơn giản và nhanh chóng giúp trang Web của bạn chuyên nghiệp hơn, tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách tạo icon cho các chuyên mục hiển thị trên Widget.

Tạo icon cho các chuyên mục hiển thị trên Widget

Như mình đã nói bên trên việc tạo icon cho các chuyên mục hiển thị trên Widget tương đối đơn giản, sau khi thực hiện bạn sẽ có một Widget chuyên mục trông rất chuyên nghiệp, giúp trang Web của bạn thân thiện hơn, với việc sử dụng Font Awesome để tạo các Icon sẽ không làm ảnh hưởng đến tốc độ tải trang, hãy cùng blog thủ thuật tìm hiểu cách tạo icon cho các chuyên mục hiển thị trên Widget.

#1 Tích hợp code Font Awesome

Đầu tiên để sử dụng được Font Awesome bạn hãy tích hợp đoạn mã dưới đây vào giao diện đang sử dụng. Chỉ cần sao chép đoạn mã bên dưới và dán vào ngay sau thẻ <?php trong tập tin Function.php là được!

//Font awesome
add_action( 'wp_enqueue_scripts', 'load_font_awesome' );
function load_font_awesome() {
wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '4.7.0' );	
}

Sau đó hãy truy cập vào liên kết này để lựa chọn các Icon mà bạn muốn!

#2 Tạo Menu và tích hợp Icon

Sau khi tích hợp đoạn mã trên vào giao diện và chọn được biểu tượng Icon công việc tiếp theo là tạo Menu và chèn Icon cho Menu bằng cách vào Appearance (Giao diện) > chọn Menus > Chọn “Create a new menu” đặt tên cho Menu và nhấn “Create Menu”!

tạo icon cho các chuyên mục hiển thị trên Widget
Tạo icon cho các chuyên mục hiển thị trên Widget

(1) Nhấn “Create a new menu” để tạo Menu mới.

(2) Đặt tên Menu mới.

(3) Nhấn “Create Menu” để hoàn thành việc tạo Menu.

Lúc này bạn sẽ có một Menu mới vừa được tạo ra, tiếp tục hãy thêm các chuyên mục hay các “tag” vào Menu, bạn có thể chọn hình thức “Custom Links” để có thể tùy biến liên kết theo ý muốn.

Cách tạo icon cho các chuyên mục hiển thị trên Widget 2

(1) Phần Url hãy điền liên kết, Link Text điền từ khóa cho Link, sau khi thực hiện xong nhấn Add to Menu lúc này bạn sẽ thấy một chuyên mục xuất hiện trong Menu.

(2) Bạn hãy truy cập vô trang Font Awesome ở bước 1 sau đó hãy chọn Font cần lấy, lúc này bạn sẽ có một đoạn mã có dạng <i class=”…”></i> hãy sao chép nó và dán vào phía trước từ khóa là được.

Cách tạo icon cho các chuyên mục hiển thị trên Widget 3

Và cứ như thế bạn hãy thực hiện đến khi có được một Menu hoàn chỉnh.

#3 Tích hợp vào Widget

Truy cập vào Appearance (Giao diện) > chọn Widgets, sau đó tìm Widget có tên là “Custom Menu” (Widget này được tích hợp sẵn trong WordPress bạn không cần phải cài thêm Plugin), hãy kéo Widget này và thả vào Sidebar (vào vị trí bạn muốn xuất hiện).

Cách tạo icon cho các chuyên mục hiển thị trên Widget 4

(1) Kéo và thả Widget Custom Menu vào Sidebar.

(2) Đặt tên cho Widget và trong phần Select Menu chọn Menu vừa tạo là xong.

Cuối cùng hãy lưu lại (nhấn Save)

và hãy xóa Cache nếu có, truy cập trang chủ bạn sẽ thấy được kết quả như bên dưới.

Cách tạo icon cho các chuyên mục hiển thị trên Widget 5

Như vậy là mình đã hướng dẫn các bạn cách tạo icon cho các chuyên mục hiển thị trên Widget, quá đơn giản để bạn có thể tạo một Menu chuyên nghiệp phải không nào? và bạn có cách nào khác nữa không hãy chia sẻ bằng cách bình luận bên dưới!

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!

Xin chào các bạn mình có bán các dịch vụ tăng tương tác mạng xã hôi như: Facebook, Ticktok, instagram, Youtube... giá rẻ, đảm bảo chất lượng. Bạn sẽ được hoàn tiền nếu số lượng tăng không đúng yêu cầu, bạn có thể tham khảo tại Subre.xyz !

Bài viết có ích cho bạn?

Average rating / 5. Vote count:

guest
37 Bình luận
Inline Feedbacks
View all comments
Sơn

Không liên quan đến bài viết lắm nhưng vì không tìm được bài viết liên quan đến nội dung cần hỏi, nên đành viết tại đây. Sau khi được admin chia sẻ theme mình tải về và cài đặt thấy theme hoạt động rất tốt, chỉ có một vấn đề nhỏ phát sinh là không hiểu sao mình không thể chèn widget vào phần Secondary sidebar, trong khi ở phần primary sidebar có thể hiển thị bình thường. Không biết việc tạo thêm một vùng để chứa các widget ở phần sidebar có phức tạp không, admin có thể viết… Đọc tiếp »

Sơn

Mình đã chọn bố cục có 2 sidebar rồi. http://imgur.com/a/IBEMK nhưng vẫn không được, chỉ khi chọn kiểu thứ 3 từ trái sang thì mới hiển thị được secondary sidebar ở mục bên cạnh. Tìm mãi trên mấy trang nước ngoài cũng được đoạn code thêm 1 custom widget vào sidebar bên phải genesis_register_sidebar( array( ‘id’ => ‘custom-widget’, ‘name’ => __( ‘Custom Widget’, ‘genesis’ ), ‘description’ => __( ‘Custom Widget Area’, ‘childtheme’ ), ) ); add_action( ‘genesis_after_sidebar_widget_area’, ‘add_genesis_widget_area’ ); function add_genesis_widget_area() { genesis_widget_area( ‘custom-widget’, array( ‘before’ => ”, ‘after’ => ”, ) ); } Nhưng chỉ biết thêm 1 cái… Đọc tiếp »

Sơn

Chọn cái 3,4,5 nó hiển thị được secondary sidebar nhưng lại 3 cột nhìn nó xấu xấu làm sao ấy!

Sơn

chết chắc có thể bác hiểu nhầm ý em! Ý em là thêm widget cho primary sidebar

Sơn

Mình tưởng mỗi cái chỉ chứa được 1 widget? Nhấn vào chữ add kéo qua mà nó không cho thả. Mình lên mạng mò mãi, chèn thêm 2 đoạn code dài hơn code bên trên vào file funtion.php mới tạo được 2 vùng nữa để thả. Là được 4 vùng cho thả widget, giờ bảo thêm một vùng nữa để thả widget chắc cũng thua… hehe!!

Sơn

Khổ không biết tí gì về code cả, khi nào có thời gian chắc phải học một khóa php căn bản

Sơn

Giờ nghĩ lại em mới thấy mình rảnh, người ta cho add nhiều widget và primary sidebar, rồi quy định nó nằm ở vị trí 1,2,3,4,.. Thế mà tự nhiên rảnh lên đi code thêm 3-4 khu vực để thả widget trong phần quản trị wp-admin.

Sơn

Cái này với những host yếu dùng nhiều Font Awesome sẽ ảnh hưởng rất nhiều đến tốc độ tải trang

V An.

Đang tính dùng cách này để loại bỏ cái plugin cho đỡ nặng web

Võ Thanh Điền

Chuẩn luôn bác Huy Kira 🙂 Hướng dẫn thêm cách dùng plugin thì bài post ok đó bác Hữu Thuần 🙂

Hoang

cảm ơn bác, cũng đang kiếm cái font này

37
0
Hãy bóc tem giúp mình !x
()
x