WP Căn bản

Thủ thuật WordPress và kiếm tiền online

wordpress-theme-tot-nhat

Trang chủ » WordPress » Thủ thuật WordPress » Thêm icon vào menu của Genesis Framework và child theme

Thêm icon vào menu của Genesis Framework và child theme

67 Bình luận

Thêm icon vào menu của Genesis Framework và Genesis child theme.

theme-icon-vao-menu-cua-genesis-framework-va-child-theme

Bạn đã quá nhàm chán với việc suốt ngày phải nhìn vào một thanh menu toàn chữ là chữ? Chúng quá đơn điệu và không hề bắt mắt một chút nào. Bạn có muốn một thanh menu sống động, trông như hình minh họa bên trên? Vô cùng đơn giản. Ngay sau đây, tôi sẽ hướng dẫn các bạn cách thêm icon vào menu của Genesis Framework hoặc Genesis child themes chỉ với vài bước đơn giản. Hướng dẫn cũng có thể được áp dụng cho các WordPress themes khác.

Tham khảo thêm:

Thêm icon vào menu Genesis Framework và child theme

1. Thêm đoạn code dưới đây vào cuối file functions.php của Genesis Framework hoặc child theme mà bạn đang dùng.

Lưu ý: với theme Paradise, chúng tôi đã tích hợp sẵn Font Awesome v4.7.0 vào trong theme nên các bạn không cần phải thêm code bên trên nữa.

2. Truy cập vào Appearance => Menus (nơi tạo và chỉnh sửa menu), thêm <span> class dưới đây vào mục Navigation Label, trước các nhãn:

Các bạn cũng có thể sử dụng <i> class nếu <span> class không có tác dụng:

Giữa 2 dấu (“) là nơi bạn thêm mã của Font Awesome vào. Danh sách bảng mã, vui lòng xem tại đây. Ví dụ tôi muốn thêm biểu tượng nút home, tôi sẽ điền code là fa fa-home, xem hình minh họa bên dưới:

chèn-code-font-awesome-vao-menu

Lưu ý: kể từ phiên bản 5.0, Font Awesome đã sử dụng tiền tố khác (fas, far và fal thay cho fa), tuy nhiên trong bài hướng dẫn này chúng ta sử dụng Font Awesome v4.7.0 nên cả bạn phải sửa lại là fa thì icon mới hiển thị.

Làm tương tự với các nhãn khác trong menu. Sau khi hoàn tất, lưu lại và xem kết quả. Đơn giản vậy thôi. Chúc các bạn thành công!

Bạn có phương pháp đơn giản và hiệu quả hơn để thêm icon vào menu Genesis Framework và child theme? Hãy chia sẻ nó với chúng tôi bằng cách sử dụng khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)

Reader Interactions

Bình luận

    Trả lời

    Lưu ý:
    > Không sử dụng từ khóa trong mục "Tên".
    > Hãy sử dụng tên thật và địa chỉ email chính xác.
    > Vui lòng bình luận bằng tiếng Việt có dấu.
    Mọi bình luận trái quy định sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn.

  3. Anh Hiếu cho em hỏi cái :D , là thêm cái đoạn code của bác đưa vào file functions.php vào Genesis hay vào child themes thì đều bị trắng trang . mà mấy code khác của bác kêu thêm vào đó em thêm đều bị vậy hết , bác có thể chỉ em thêm vào khúc nào không ?, em thường thêm vào đoạn cuối của file đó. à mà bác cho em xin luôn cái Paradise child theme qua email nhé , hôm qua em có xin cái megazine pro rồi mà cài vào thấy font chữ và bố cục chưa ưng ý lắm :D

    Trả lời

    • Mình vừa update bài viết. Bạn thử lại xem sao nhé. Bạn chỉ cần chèn vào cuối file functions.php của child theme là được. Còn Paradise không phải là theme miễn phí bạn nhé. Mình không share mà chỉ sử dụng để cài đặt cho khách hàng. Mong bạn thông cảm. :P

      Trả lời

  5. ọc html không hiển thị trong comment bạn thay thẻ span trong hướng dẫn thành chữ i

    Trả lời

  8. Cách này mình dùng cũng ko đc luôn! Chán quá. Mò mấy chiêu Genesis của AD mà ko đc cái nào hoạt động. Heyza!

    Trả lời

    • Bật debug xem nó có bị xung đột với plugin nào khác không? Theme của mình tùy biến từ Magazine Pro ra và cũng sử dụng mấy code đó thôi. :P

      Trả lời

        • Rất tiếc là không được bạn nhé. Bạn phải tự nghiên cứu thôi. Cũng đơn giản mà. Biết chút CSS là có thể chỉnh sửa được. :P

          Trả lời

          • Thì mình toàn nghiên cứu đó. khó quá mới hỏi thôi. Thế không giúp gì hết được hả AD? Mình muốn full width mà không được. width: 100%; cũng không đc!

  9. Update: phiên bản FontAwesome liên tục được nâng cấp và bổ sung thêm icon mới. Để sử dụng một cách hoàn hảo nhất, các bạn truy cập vào trang https://fortawesome.github.io/Font-Awesome/ và kiểm tra xem phiên bản mới nhất là bao nhiêu. Sau đó, thay “4.0.3” trong code bên trên thành mã phiên bản mới nhất, chẳng hạn như “4.4.0”. Chúc các bạn thành công!

    Trả lời

    • Truy cập vào Files Manager của cPanel hoặc FTP, mở tập tin functions.php của child theme ra và xóa đoạn code vừa thêm đi. Có vẻ bạn chèn không đúng cách rồi. :P

      Trả lời

  15. Mình cài icon có hình cái cờ lê( cài đặt) xong cái nó hiện luôn cả site mình sợ hư nên mình vào xóa đoạn code đó. Nhưng nhìn ko rõ nên chỉ xóa đc 1 đoạn còn 1 đoạn trong đó. Nên mới bị thế. Bạn giúp mình đc ko?

    Trả lời

  16. Chào anh Hiếu,
    Mình muốn mỗi lần mình tạo một trang mới thì trang đó sẽ tự động đưa lên menu theo thư mục mình định sẵn không biết phải làm sao. Giống trang web này: http://miadesignstudio.com/english#about . Phần Residential mỗi lần có trang mới được tạo nó sẽ đưa lên menu con của phần Residential

    Trả lời

    • WordPress chỉ có chức năng tự động thêm trang mới vào menu chứ không thể tự động thêm vào menu theo thư mục được bạn ạ. Còn dùng functions hoặc plugin nào để tùy biến như vậy thì mình chịu. :P

      Trả lời

  17. Dear Hiếu,

    Cho t hỏi một chút. T có cài đặt font awesome theo cách thủ công.

    T up các thư mục của file awesome lên theme đang dùng và dùng hàm này trong function.php để gọi ra:
    function add_font_awesome() {
    wp_register_style('font-awesome-style', get_template_directory_uri() . '/css/font-awesome.min.css');
    wp_enqueue_style('font-awesome-style');
    }
    add_action('wp_enqueue_scripts', 'add_font_awesome');
    Và đã thành công.

    Tuy nhiên ngày hôm nay t check google page speed thì có phát hiện ra một đường dẫn lạ trong blog:
    http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css

    T đã kiểm tra trong toàn bộ css và function của theme thì đều không có.

    Vậy nhờ c kiểm tra giúp t link đó được gọi ra trong file nào trên blog được không? T cảm ơn.
    Blog của t: http://tiin24.net

    Trả lời

    • Để tích hợp Font Awesome vào trong theme, bạn dùng code này sẽ chuẩn hơn:

      //* Add Font Awesome
      add_action( 'wp_enqueue_scripts', 'load_font_awesome' );
      function load_font_awesome() {

      wp_enqueue_style( 'font-awesome', get_bloginfo( 'stylesheet_directory' ) . '/css/font-awesome.min.css', array(), '4.5.0' );

      }

      Trả lời

  18. Hiếu cho mình hỏi, mình thêm đoạn code này vao file function của paradise theme, nhưng không được, Hiếu check dùm nhé. Thanks

    //* Add Font Awesome
    add_action('wp_enqueue_scripts','load_font_awesome');
    function load_font_awesome() {
    wp_enqueue_style( 'font-awesome', get_bloginfo('stylesheet_directory').'/css/font-awesome.min.css', array(), '4.7.0' );
    }

    Trả lời

        • Ôi trời. Nếu là theme Paradise thì cần gì phải tích hợp FontAwesome nữa bạn. Bên mình đã tích hợp sẵn rồi mà. Bạn chỉ việc chèn icon vào là được. Nếu span class mà icon không hiện thì đổi thành i class xem sao. :P

          Trả lời

  21. Mình thêm icon vào menu thấy chữ(category) ở thanh menu bé xíu đi, muốn tăng cỡ chữ ở menu cho to lên thì chỉnh ở phần nào vậy bạn

    Trả lời

    • Vẫn làm được mà bạn. Tuy nhiên phiên bản trên trang chủ của FontAwesome giờ đã là 5.0 rồi nên mã cũng đã bị thay đổi so với phiên bản 4.7.0. Thay vì sử dụng mã fab, fas hay far như trên trang chủ thì bạn cứ dùng mã fa cũ là được.

      Trả lời

  24. Bạn có đường dẫn có bản 5.0 không vậy cho mình xin đường dẫn với. Cảm ơn.

    Trả lời

  25. Cho hỏi cách code chuyển màu đen sang màu khác thanh MENU childtheme Magazine Pro của Genesis Framework giúp e với. Tks

    Trả lời

    • Chèn code này vào Appearance => Customize => Additional CSS:

      .nav-primary {
      background-color: #222;
      }

      Nhớ thay mã màu hexa cho hợp lý.

      Trả lời

      • Ko a ơi, ý em là chỉnh thanh MENU nền trắng chữ đen có gạch xanh giống hình phía trên bài này a post ak? E Ko biết tuỳ chỉnh như thế nào từ đen sang như thế dc? A giúp e với?

        Trả lời

        • Trong bài viết là theme khác mà bạn. Có ai nói đó là theme Magazine Pro đâu? Website phát hành theme đó (WP Canada) cũng đã bị đóng cửa từ lâu rồi. Bạn muốn tùy biến thì tự tìm hiểu nhé. Cái này nó liên quan đến CSS. Mình không có thời gian để hỗ trợ các vấn đề liên quan đến tùy biến giao diện đâu. Bạn thông cảm.

          Trả lời

    • Ping Back, Track Back là tính năng của WordPress mà. Liên quan gì đến theme? Bạn vào Settings => Discussion => Bỏ tick trong 2 mục là “Attempt to notify any blogs linked to from the article” và “Allow link notifications from other blogs (pingbacks and trackbacks) on new articles” đi là được.

      Trả lời

Footer

Bình luận mới nhất

Bình luận nhiều nhất (tháng)

  1. Ngô Văn Cương (9)
  2. Cường (7)
  3. Đồng (7)
  4. An Ba (6)
  5. Anh Khôi (6)
  6. Giang Nguyen (6)

Thống kê WP Căn bản

10 Chuyên mục - 918 Bài viết - 32812 Bình luận