文章彙整

Magento2 佈景主題開發的基本設定

By Steffi 5 months agoNo Comments
首頁  /  Magento  /  Magento-2  /  Magento2 佈景主題開發的基本設定

不久前介紹如何解決Magento 2 預設主題的選單問題,不少網友也提問到佈景主題該怎麼設定?

本篇文章就來解決大家對Magento2佈景主題開發的基本設定做教學

主題包的路徑

Magento2 的佈景主題包有二個位置可以存放。vendor/magento/theme-<Vendor>-<theme>app/design/frontend/<Vendor>/<theme>
Magento2預設安裝的二個主題包–blank及luma 就存放在
vendor/magento/theme-frontend-blank 及 vendor/magento/theme-frontend-luma
如果要開發新的Magento2佈景主題,建議放在app/design/frontend/<Vendor>/<theme>,資料夾結構相對比較單純,比較不會發生錯手移動或刪除的意外。

開始自訂主題包

1.在app/design/frontend新增一個<Vendor>資料夾
2.在剛剛新增的<Vendor>資料夾裡接著新增一個<theme>資料夾

app/design/frontend/
├── <Vendor>/
│   │ ├──...<theme>/
│   │ │   ├── ...
│   │ │   ├── ...

3.在<theme>資料夾裡新增一個theme.xml檔,範例如下:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>New theme</title> <!-- 主題包的名稱 -->
    <parent>Magento/blank</parent> <!-- 如果你的主題包有繼承某個主題包、那麼就在這裡寫上你繼承的主題包 -->
    <media>
        <preview_image>media/preview.jpg</preview_image> <!-- 主題包預覽的圖片路徑 -->
    </media>
</theme>

如果你的主題包沒有任何繼承、也沒有預覽圖、那麼可以將檔案簡化成以下:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>New theme</title> <!-- 主題包的名稱 -->
</theme>

4.在<theme>資料夾裡新增一個registration.php檔案,範例如下:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::THEME,
   'frontend/<Vendor>/<theme>',
   __DIR__
);

做完以上四個步驟、你應該就可以在Magento2的管理後台找到新建立的主題包。
登入Magento2後台,點選 > CONTENT > Themes 看看你剛剛建立的主題包是不是有出現在右側的Themes列表中。如果有的話,恭喜你、你可以進入下一步了。

設定產品圖片

Magento2 商品圖片的尺寸及屬性由 view.xml 這個檔案控制。檔案的路徑如下:
<theme_dir>/etc/view.xml
view.xml 是主題包必要的檔案,如果你所繼承的父主題裡已經有view.xml,那麼你可以忽略他。你可以複製vendor/magento/theme-frontend-blank/etc/view.xml 到新建立的主題包裡來使用。新的檔案路徑如下:
app/design/frontend/<Vendor>/<theme>/etc/view.xml

商店Logo

Magento2預設的商店Logo檔名及格式是logo.svg。將新的logo.svg放在<theme_dir>/web/images 目錄底下就可以輕鬆替換掉商店的Logo。
如果你的商店logo使用不同的檔名或格式,就需要重新聲明它。

聲明Magent2 商店logo 
在你的主題包新增一個檔案、檔名及路徑如下:
app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml
假設新的logo尺寸為 300x300px,檔名為mylogo.png,那麼設定如下:

<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/mylogo.png</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>

登錄主題包

一旦你登入Magento2的管理後台,新增的主題包就會自動登錄到Magento2的資料庫中。

套用主題包

1.登入Magento2管理後台,點選CONTENT > Design > Configuration
2.點選你的store view、進入store view的設定畫面
3.在Default Theme / Applied Theme 的下拉選單中,選擇你新建的主題包
4.點擊右上角的Save Configuration按鈕保存設定。
5.清快取
6.執行deploy
7.到Magento2 網站前台刷新畫面
8.刷新頁面之後、你應該可以看到新的網站Logo。

注意:

1.截至目前為止我們的主題包裡並沒有設置css樣式表,若又沒有繼承其他主題包的話、這時候的網站畫面就會因為缺少css而呈現混亂的狀態。
2.如果你的新主題包是繼承Magento / blank 或是Magento / luma 二個主題包其中之一的話、那麼你現在已經完成了主題包的基本設定。

解除安裝主題包

如果需要解除安裝主題包,請在Magento2根目錄底下執行底下命令,底下的命令是同時備份程式碼及解除安裝主題包。

bin magento theme:uninstall frontend/<Vendor>/<theme> --backup-code

以上是這次關於如何在Magento2上面做基本佈景主題設定的分享,看更多Magento2的教學,別忘了訂閱我們的電子報,以及追蹤我們的Facebook粉絲專頁唷!

更多Magento相關文章請看: Magento教學導覽

 

延伸閱讀:
如何解決Magento 2 預設主題的選單問題

 

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  Magento-2

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。