Top Posts
Gửi mail trong Magento 2 – Đính kèm...
Tạo grid trong Magento 2 sử dụng block
Tạo form admin sử dụng block
Cách sử dụng insertListing trong Magento 2
Compile LESS file với Grunt trong Magento 2
Magento 2 get product image url
Format price với currency trong Magento 2
Magento 2 Add URL Rewrite programmatically
Magento 2 Upload image admin form
Magento 2 Create Category Attribute
vi-magento.com
  • Magento 2
    • Magento 2 cơ bản
    • Bài tập Magento 2
    • Magento 2 Api
  • PHP
  • JavaScript
  • Cơ sở dữ liệu
    • Học MongoDB
    • SQL Server
    • Mysql
    • Học Oracle
    • SQLite
  • Liên hệ
  • Trắc nghiệm Magento 2
Trang chủ Lập trình Magento 2Magento cơ bản Theme trong Magento 2
Magento cơ bản

Theme trong Magento 2

bởi admin 25/01/2021
bởi admin 25/01/2021 0 Bình luận 1738 xem

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.

Danh mục

  1. Tạo một thư mục theme
  2. Khai báo theme.xml
  3. Composer.json
  4. registration.php
  5. Tạo thư mục static files (fonts, jquery, css, image…).
  6. Thêm logo cho theme
  7. Áp dụng và config theme trong admin

Tạo một thư mục theme

Thư mục chủ đề được lưu trữ trong app/design/frontend.

Thư mục theme trong Magento 2
Thư mục theme trong Magento 2

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ục theme trong Magento 2
Thư mục theme trong Magento 2

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

Manage theme
Manage theme

Detail:

Theme detail
Theme 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.

Áp dụng theme cho website
Áp dụng theme cho website

Sau đó thì Save Configuration để lưu lại thay đổi.

Quản lý design configuration
Quản lý design configuration

php bin/magento setup:static-content:deploy

php bin/magento cache:clean

Chạy 2 câu lệnh trên, sau đó reload frontend:

Chủ đề được áp dụng ở frontend
Chủ đề được áp dụng ở frontend

Xem thêm:

  • Create a new storefront theme(devdocs)
  • Indexing trong Magento 2
  • Message queue trong Magento 2
chủ đềfrontendmagentomagento 2theme
Chia sẻ
0
FacebookSkype
Bài trước
Message queue trong magento 2
Bài tiếp theo
Bài 16: Các hàm xử lý file trong php

Related Posts

Hướng dẫn cài đặt Magento 2.4 trên Ubuntu

13/08/2020

Magento 2 Add URL Rewrite programmatically

12/07/2021

Widget là gì? Hướng dẫn tạo custom widget...

03/09/2020

Filter Collection trong Magento 2

12/09/2020

Frontend model trong Magento 2 (system.xml)

13/09/2020

Tạo Source model trong Magento 2

13/09/2020

Phân biệt Salable Quantity và Quantity trong Magento...

19/06/2021

Data Patch trong Magento 2 – Hướng dẫn...

19/08/2020
5 2 votes
Đánh giá
Login
guest
guest
0 Comments
Inline Feedbacks
View all comments

Bài viết cùng chủ đề

  • Hướng dẫn cài đặt Magento 2.4 trên Ubuntu

  • Hướng dẫn tạo Module trong Magento 2

  • Tạo Controller trong Magento 2 chi tiết nhất

  • Layout, Block, Template trong Magento 2

  • Layout trong Magento 2 – Hướng dẫn chi tiết

  • Plugin trong Magento 2 – Hướng dẫn chi tiết

  • Magento 2 thay đổi tên product sử dụng Plugin

  • Tạo bảng trong Magento 2 với Setup script

  • Tạo bảng với db_schema.xml trong Magento 2

  • Hướng dẫn cài đặt xdebug cho phpstorm trên ubuntu

  • Model, Resource Model và Collection trong Magento 2

  • Data Patch trong Magento 2 – Hướng dẫn chi tiết

  • Thêm Product Attribute Trong Magento 2

  • ACL trong Magento 2 – Hướng dẫn tạo ACL

  • Tạo Menu Admin trong Magento 2

  • Tạo system.xml trong Magento 2

  • Tạo form admin trong Magento 2 với Ui Component

  • Tạo Grid trong Magento 2 với Ui Component

  • Thêm, Xóa, Sửa dữ liệu trong Magento 2

  • Magento 2 Thêm Action Column trong Admin Grid

  • [Magento 2 cơ bản] Tìm hiểu về Events và Observers trong Magento 2

  • Tất tần tật danh sách các Events trong Magento 2

  • Bóc mẽ cách Magento tổ chức, thiết kế sản phẩm

  • Magento 2 Hướng dẫn tạo Cron Job

  • [Magento 2 cơ bản] Hướng dẫn thêm một Customer Attribute trong Magento 2

  • Magento 2 Đối tượng Factory

  • Cài đặt HTTPS (SSL) cho localhost dễ hiểu

  • Magento 2 Các loại join và giải thích chi tiết

  • Magento 2 Dependency Injection là gì? Tại sao phải sử dụng Dependency Injection?

  • Hướng dẫn thêm custom field ở trang checkout trong Magento 2

  • Sắp xếp danh sách sản phẩm theo price, name trong Magento 2

  • Magento 2 Add custom column into sales order grid

  • Magento 2 Cách sử dụng Knockout Js trong custom templates

  • Magento 2 Tìm hiểu về 6 loại product

  • Hướng dẫn thêm product type trong Magento 2

  • Các cách để override templates trong Magento 2

  • Widget là gì? Hướng dẫn tạo custom widget trong Magento 2

  • Tạo Admin User thông qua Command line trong Magento 2

  • Hướng dẫn lấy đường dẫn hiện tại, media, static trong Magento 2

  • Hướng dẫn sắp xếp danh sách sản phẩm theo lượt view trong Magento 2

  • Tìm hiểu về di.xml trong Magento 2

  • Filter Collection trong Magento 2

  • Các hàm xử lý dữ liệu trong Magento 2

  • Translate trong Magento 2

  • Tạo Source model trong Magento 2

  • Frontend model trong Magento 2 (system.xml)

  • Backend model trong Magento 2 (system.xml)

  • Magento 2 cơ bản – tự học magento 2

  • Tạo popup modal trong Magento 2

  • Thêm Custom Validate Rule trong Magento 2

  • Danh sách các validate rule trong Magento 2

  • Lợi ích và cách sử dụng Jquery trong Magento 2

  • Lưu custom data vào bộ nhớ cache | Magento 2

  • Truy vấn SQL trong Magento 2

  • Cách tạo Cronjob trong Magento2

  • Sử dụng Ajax với Knockout JS trong Magento 2

  • Sử dụng Ajax trong Magento 2

  • EAV trong Magento 2 | Magento 2 cơ bản

  • Hiểu Về Repository trong Magento 2

  • Hướng dẫn customize Magento 2 commands

  • Cách cài đặt zsh và zsh-autosuggestions trên Ubuntu

  • Thêm Multi Select Filter trong Admin Grid

  • Tạo admin grid với dữ liệu của nhiều table

  • Tìm hiểu về indexing trong magento 2

  • Quản lý indexer – các command cần thiết

  • Message queue trong magento 2

  • Linux Là Gì?

  • Phân biệt Salable Quantity và Quantity trong Magento 2

  • Magento 2 Tìm hiểu về Proxy

  • EAV Attribute trong Magento 2

  • Cài đặt Magento 2.4 trên windows

  • Magento 2 – Kiểm tra customer đã đăng nhập hay chưa?

  • Thêm Command Console Trong Magento 2

  • Các lệnh cơ bản trong Magento 2 mà lập trình viên cần phải biết

  • Tạo Custom Indexer Trong Magento 2

  • Magento 2 Create Category Attribute

  • Magento 2 Upload image admin form

  • Magento 2 Add URL Rewrite programmatically

  • Format price với currency trong Magento 2

  • Magento 2 get product image url

  • Compile LESS file với Grunt trong Magento 2

  • Cách sử dụng insertListing trong Magento 2

  • Tạo form admin sử dụng block

  • Tạo grid trong Magento 2 sử dụng block

  • Gửi mail trong Magento 2 – Đính kèm file

@2020 - All Right Reserved. vi-magento.com

vi-magento.com
  • Magento 2
    • Magento 2 cơ bản
    • Bài tập Magento 2
    • Magento 2 Api
  • PHP
  • JavaScript
  • Cơ sở dữ liệu
    • Học MongoDB
    • SQL Server
    • Mysql
    • Học Oracle
    • SQLite
  • Liên hệ
  • Trắc nghiệm Magento 2
wpDiscuz