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!

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

Average rating / 5. Vote count:

37 bình luận về “Cách tạo icon cho các chuyên mục hiển thị trên Widget”

  1. 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 bài hướng dẫn tạo thêm cái này được không ạ? Mặc định theme chỉ có 2 phần là primary sidebar và secondary sidebar.

    Trả lời
      • 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òn muốn thêm nữa lại không biết. Hình như, để làm điều này thì cần phải đăng ký thêm 1 vùng để chứa cái widget sau đó quy định cho vùng đó nằm ở đâu “https://genesistutorials.com/visual-hook-guide/”

        Trả lời

Viết một bình luận