Như các bạn đã biết, mặc định của Magento có 2 chủ đề “Blank” và “Luma”. Khi cài đặt thành công Magento, trong frontend sẽ có theme mặc định là “Luma”. Để dễ dàng nâng cấp và bảo trì, chúng ta không nên chỉnh sửa trực tiếp 2 theme mặc định này.
Nếu bạn muốn tùy chỉnh và thiết kế trang web của mình, hãy tạo một chủ đề mới theo các bước sau.
Tạo một thư mục theme
Thư mục chủ đề được lưu trữ trong app/design/frontend.
Trong đó:
- Example: Vendor directory name
- default: Tên thư mục chủ đề (bạn có thể tạo bất cứ tên nào bạn thích, miễn là nó phù hợp và có ý nghĩa).
Khai báo theme.xml
Sau khi bạn tạo một thư mục cho chủ đề của mình, bạn phải tạo “theme.xml”.
app/design/frontend/Example/default/theme.xml
|
1 2 3 4 5 6 7 |
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>Example default</title> <parent>Magento/luma</parent> <media> <preview_image>media/example.jpg</preview_image> </media> </theme> |
Trong đó:
- title: tên theme
- parent: điền vào theme cha. Nếu hệ thống không tìm thấy theme Example/default thì nó sẽ tự động lấy theme cha.
- media: hình ảnh preview, đc đặt tại app/design/frontend/Example/defaule/media/example.jpg
Composer.json
Trong Magento 2, mỗi chủ đề được sử dụng như một gói tổng hợp. Bạn có thể sao chép từ chủ đề Blank hoặc Luma theo đường dẫn Magento mặc định.
app/design/frontend/Example/defaule/composer.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
{ "name": "example/default", "description": "N/A", "type": "magento2-theme", "license": [ "OSL-3.0", "AFL-3.0" ], "config": { "sort-packages": true }, "version": "100.4.1", "require": { "php": "~7.3.0||~7.4.0", "magento/framework": "103.0.*", "example/default": "100.4.*" }, "autoload": { "files": [ "registration.php" ] } } |
registration.php
Để đăng ký một chủ đề trong hệ thống Magento, bạn cần tạo tệp registration.php
app/design/frontend/Example/default/registration.php
|
1 2 3 4 5 6 7 8 9 10 |
<?php /** * Copyright © 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Example/default', __DIR__ ); |
Tạo thư mục static files (fonts, jquery, css, image…).
Bạn có thể thêm fonts, css, image… bằng cách thêm thư mục web vào đường dẫn sau: app/design/frontend/Example/default/web
Bên trong thư mục web sẽ chứa các thư mục khác như css, images, js…
Thêm logo cho theme
app/design/fronend/Example/default/Magento_Theme/layout/default.xml
|
1 2 3 4 5 6 7 8 9 10 11 |
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/logo.jpg</argument> <argument name="logo_img_width" xsi:type="number">300</argument> <argument name="logo_img_height" xsi:type="number">300</argument> </arguments> </referenceBlock> </body> </page> |
Sau đó các bạn chạy câu lệnh: php bin/magento setup:upgrade
Áp dụng và config theme trong admin
Kiểm tra chủ đề của bạn đã được tạo hay chưa:
Truy cập Content > Design > Themes
Detail:
Apply theme on the website:
Truy cập Content > Design > Configuration > Chọn edit website mà bạn muốn apply theme vừa tạo.
Sau đó thì Save Configuration để lưu lại thay đổi.
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
Chạy 2 câu lệnh trên, sau đó reload frontend:
Xem thêm: