管理画面テーマを作成します。
管理画面テーマのステップを作成します。
1.以下のディレクトリにテーマのディレクトリを作成します
app/design/adminhtml/[your_vendor_name]/[your_theme_name].
2. theme.xmlファイルにテーマを宣言する
3. registration.phpファイルにテーマを登録する
4. etc/view.xmlファイルに画像の設定を設定する
5. テーマロゴを宣言する
テーマディレクトリを作成する
テーマのディレクトリを作成します:
MAGENTO_DIRECTORY/app/design/adminhtmlに、
上記のディレクトリに、<vendor>ディレクトリを作成して、テーマのディレクトリを作成します。
私の場合、以下を設定します。
- ベンダー名： Karabiner
- テーマ名：「green」。
Karabiner ←ベンダー名
├── green/ ←テーマ名
│ ├── etc/
│ │ ├── view.xml
│ ├── web/
│ │ ├── images
│ │ │ ├── karabiner_logo.svg
│ ├── registration.php
│ ├── theme.xml
theme.xmlファイルにテーマを宣言する
app/design/adminhtml/Karabiner/greenに、 theme.xmlファイルを作成します。
theme.xmlファイルはテーマの基本情報（テーマ名、親テーマ、プレビュー画像など）を設定します。
<?xml version="1.0" encoding="UTF-8"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Green</title> <!-- テーマ名 -->
<parent>Magento/blank</parent> <!-- 親テーマ -->
</theme>
registration.phpファイルにテーマを登録する
テーマの登録ファイルは以下のような感じです。
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'adminhtml/Karabiner/green', // theme path
__DIR__
);
etc/view.xmlファイルに画像の設定を設定する
これは構成ファイルです。このファイルは、Magento 2テーマでは「必須」※です。
※ - 親テーマに存在する場合はオプションです。
app/design/adminhtml/Karabiner/green/に、 etc/view.xmlファイルを作成する
theme-adminhtml-backendテーマなどの親テーマでview.xmlファイルをコピーできます。
vendor/magento/theme-adminhtml-backend/etc/view.xml
<image id="category_page_grid" type="small_image">
<width>250</width>
<height>250</height>
</image>
テーマロゴを宣言する
Magento 2のデフォルトでは、 [theme_dir]/web/images/logo.svgを使用します。default.xmlでは、png、jpgなどの別の画像形式に変更できますが、設定する必要があります。
[theme_dir]/Magento_Theme/layout/default.xml
ロゴのサイズは100x100pxにします
<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/karabiner_logo.svg</argument>
<argument name="logo_img_width" xsi:type="number">100</argument>
<argument name="logo_img_height" xsi:type="number">100</argument>
</arguments>
</referenceBlock>
</body>
</page>