Thêm icon vào menu của Genesis Framework và Genesis 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.
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:
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. :)
Có một cách khác nếu các bạn không muốn dùng code đó là
B1. Cài plugin http://wordpress.org/plugins/font-awesome-4-menus/
B2. Giống của bạn Trung Hieu Bui
Cũng là một giải pháp hay. Nhưng nên hạn chết dùng plugin càng ít càng tốt bạn ạ. :)
Hiếu hd bài tạo menu như của ông đi
Làm như trong bài viết bên trên đó bạn. :P
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
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
Chả Được AD Ơi :( Làm Đi Làm Lại Vẫn Không Được :(
Bạn sửa 4.0.3 thành 4.3.0 xem có được không nhé. Nếu site sử dụng plugin tạo cache, minify, async js thì thử deactive xem sao. :P
Bạn sử dụng nhé bài viết này bác hiếu chưa cập nhật lại :D
Bạn ấy làm được rồi. Dùng thẻ span vẫn hiển thị bình thường mà. Mình cũng đang dùng đây. :-P
ọc html không hiển thị trong comment bạn thay thẻ span trong hướng dẫn thành chữ i
Mình có làm y trang hướng dẫn luôn mà dùng thẻ span không hiển thị chứ :(
Giờ phải chơi dạng này nó mới hiển thị chứ span không hiển thị được rồi.
Ủa. Mình vẫn dùng thẻ span mà. :P
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!
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
Dùng code không được chắc đành dùng Plugin thôi. Mày mò mãi cũng đổi được màu 2 thanh memu. Nhưng nó bị 2 khoảng đen như hình:
http://www.upsieutoc.com/images/2015/11/21/menu.png
Nếu được Ad cho mình xin phần code “Site Navigation” để ngâm cứu thì tốt quá!
Cám ơn AD!
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
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!
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!
sao mình làm ko được ban Hiếu nhỉ Home
Ban ơi sao minh cài cái icon giờ site mình ngừng hoạt động là sao bạn nhỉ
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
mình xóa rồi mà vẫn ko đc
Xóa sạch cái đoạn code vừa thêm chưa? Nếu xóa hết rồi mà vẫn không vào được thì vô lý. :P
mình vào Files Manager nhưng ko thấy tập tin đó
Gửi thông tin đăng nhập cPanel hoặc FTP đây mình check cho nào. :D
Mình đưa tài khoạn lên đây có sao ko bạn. Nhờ bạn đừng đăng lên nha
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?
Xong nhé. Đơn giản thôi mà. :)
Mình gửi tài khoản của mình trong phần liên hệ cho bạn rồi. Nhờ bạn giúp đỡ
Cảm ơn bạn nhiều lắm
Bạn kiểm tra lại site chưa? :D
Site mình vào giờ toàn hình cái cờ lê giờ fải làm sao bạn nhỉ?
Bạn chèn nó vào đâu thì vào đó xóa code đi là được mà. :P
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
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
hihi. cảm ơn anh Hiếu đã trả lời.
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
Để tích hợp Font Awesome vào trong theme, bạn dùng code này sẽ chuẩn hơn:
//* Add Font Awesomeadd_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' );
}
P/s: Bạn nhớ thay tên phiên bản cho phù hợp nhé. :P
Dear Hiếu,
T cảm ơn nhé.
Để t thử lại xem sao. Có gì không hiểu t lại làm phiền c.
Thanks.
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 Awesomeadd_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' );
}
Bạn đã download đủ các file cần thiết của bộ font và upload nó vào source của theme chưa? :P
Mình thấy trong source theme paradise có thư mục css rồ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
Mọi người dùng plugin này, rất chuyên nghiệp
https://mythemeshop.com/plugins/wp-mega-menu/
bạn nào cần link down inbox mình
Mình muốn thêm icon vào chuyên mục ở widget giống mục Series bạn nên xem phải làm sao vậy bạn?
Nó cũng là một cái menu thôi mà bạn. :)
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
Phiên bản hiện tại hình như 4.7 làm không được ad ơ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,fashayfarnhư trên trang chủ thì bạn cứ dùng mãfacũ là được.dùng code ở link cũ này mới được nhé https://fontawesome.com/v4.7.0/icons/
Đã sửa link trong bài. Cảm ơn bạn đã góp ý. :)
ờ, vì mình làm theo hướng dẫn với link mới nhất của nó không đc, ở link cũ chỉ cần cập nhật code bình thường vào là ok
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.
Đây bạn: https://use.fontawesome.com/releases/v5.0.12/css/all.css
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
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ý.
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?
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.