Trong bài viết này chúng ta sẽ tìm hiểu cách tạo menu admin trong Magento 2. Và thay đổi icon mặc định của nó.
Tạo menu admin trong Magento 2
Đầu tiên các bạn tạo file: ViMagento/HelloWorld/etc/adminhtml/menu.xml
|
1 2 3 4 5 6 7 8 9 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd"> <menu> <add id="ViMagento_HelloWorld::vimagento" title="ViMagento" module="ViMagento_HelloWorld" sortOrder="41" resource="ViMagento_HelloWorld::menu"/> <add id="ViMagento_HelloWorld::parent" title="ViMagento Post" module="ViMagento_HelloWorld" sortOrder="10" resource="ViMagento_HelloWorld::menu" parent="ViMagento_HelloWorld::vimagento"/> <add id="ViMagento_HelloWorld::post" title="Manage Posts" module="ViMagento_HelloWorld" sortOrder="10" action="helloworld/post/index" resource="ViMagento_HelloWorld::post" parent="ViMagento_HelloWorld::parent"/> <add id="ViMagento_HelloWorld::configuration" title="Configuration" module="ViMagento_HelloWorld" sortOrder="20" parent="ViMagento_HelloWorld::parent" action="adminhtml/system_config" resource="ViMagento_HelloWorld::parent"/> </menu> </config> |
- id: Tên định danh là duy nhất không được trùng và nên đặt theo định dạng Vendor_Module::menu_name
- title: Tên sẽ hiển thị ở menu
- module: Tên module mà menu này phụ thuộc
- sortOrder: xác định vị trí sắp xếp của menu. Giá trị càng thấp thì menu càng được sắp xếp ở trên top
- parent: xác định id của menu cha
- action: đường dẫn khi nhấn vào menu
- resource: xác định ACL đã học ở bài trước
Sau đó các bạn chạy câu lệnh php bin/magento cache:clean để xóa cache của Magento
Mặc định khi tạo một menu sẽ có một icon. Vậy muốn thay đổi thành icon khác thì phải làm như thế nào ?
Thay đổi icon mặc định
1. Vào trang icommon và download font mà bạn muốn.
2. Giải nén icon
Giải nén file vừa tải về và copy vào thư mục ViMagento/HelloWorld/view/adminhtml/web/fonts
3. Tạo file _module.less
Các bạn tạo file ViMagento/HelloWorld/view/adminhtml/web/css/source/_module.less
Bạn copy nội file style.css vừa giải nén ở trên, paste vào file _module.less và thay đổi đường dẫn cũng như class css của menu của bạn ở đây của tôi là item-vimagento
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@font-face { font-family: 'icomoon'; src: url('../../fonts/fonts/icomoon.eot?ibcmtq'); src: url('../../fonts/fonts/icomoon.eot?ibcmtq#iefix') format('embedded-opentype'), url('../../fonts/fonts/icomoon.ttf?ibcmtq') format('truetype'), url('../../fonts/fonts/icomoon.woff?ibcmtq') format('woff'), url('../../fonts/fonts/icomoon.svg?ibcmtq#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } .admin__menu .item-vimagento.level-0 > a:before { font-family: 'icomoon'; content: '\e91b'; } |
Kiểm tra
|
1 2 |
rm -rf var/view_preprocessed/* pub/static/* php bin/magento setup:static-content:deploy |
Kết luận
Bài tiếp theo tôi sẽ hướng dẫn các bạn tạo system.xml để tạo các thiết lập trong store configuration. Cám ơn các bạn đã theo dõi bài viết.