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 預設主題的選單問題

Magento, 技術應用

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