1. Magento2 Lumaテーマについて

Magento2には、公式サンプルテーマとして、Lumaテーマをデフォルトでインストールすることができます。このLumaテーマは、Magentoデモ・導入事例のページでもご紹介しています。

Lumaテーマをインストールには、cPanelのある環境ではMagento2本体を1クリックインストールする際に、Sample Dataの項目にチェックを入れるだけです。
ComposerによりMagento2をインストールする場合は、php bin/magento sampledata:deploy、もしくは、sudo bin/magento sampledata:deploy のコマンドを、Magento2をブラウザでインストールする前に実行してください。
また、FTPでMagento2ファイルのマニュアルアップロードをする場合は、Magentoの公式ダンロードページにて、Full Release with Sample dataをダウンロードしてください。

Magento2 Lumaテーマ

Magento2 Lumaテーマ デモサイト(英語ストアのみ)

Lumaテーマをインストールしたフレッシュな状態のMagento2を目の当たりにすると、色を変えたり配置を少し工夫したり、テキストを置き換えたりして、そのまま自分のストアのテーマとして使えるのではないだろうか、と、そんな風に考える人も多いかと思います。私もはじめはそう考えました。
色を変えるくらいならきっと簡単だろう、この画像を置き換えれば同じようなレイアウトで自分のカテゴリページのトップも作れるだろう、フッターのこのリンクはいらないから削除しよう、別のリンクに置きかえよう等々、そんな風に考えるのが、サイト運営者としては普通のことだと思います。

ところが、このLumaテーマ、そうは問屋が卸してくれません。
通常のECアプリケーションであれば、色を変えるなんてお茶の子さいさいのはずなのですが、このLumaでは、管理画面からは色一つ変えることができません。フッターのリンクをいじるにはどこを編集すればいいのか、管理画面を延々さまよっても、全く見つけることができません。それどろか、特にMagento2をはじめて触る人にとっては、ホームページのトップ画像がどこにどうやってアップロードされているかさえ皆目見当がつかないのです。

正直言って、Magento2のとっつきにくさは、このLumaテーマの不親切さにも原因があると言えます。

2. Lumaテーマを編集するには、Lumaを上書きするカスタムテーマを作らないといけない

実は、Magento2 Lumaテーマを編集することは、できないのです。
Lumaテーマを編集するためには、Lumaをそのまま編集しようとするのではなくて、Lumaを上書きするためのカスタムテーマを自分で作成しなければなりません。つまり、Magento2のフロントエンドの開発者と同じ発想で作業をしなければならないということになります。
この道を極めるのは茨の道ですので、今回はカスタムテーマを作るための基本的な方法論といくつかの編集例だけをご紹介させていただきます。

先ずは、次の動画を見てください。

動画を見てよく分からなくても心配ありません。ただ、この動画で作業していることが、Magento2のLumaテーマの「編集」なので、とりあえずこれを見てイメージをつかんでください。
ちなみに、このPronkoさんが使っているのは、PHPStormというエディターだと思います(プロ向けですね)。こういう優れたエディターがなくても、普通にコードを書けるエディターがあって、ファイルをアップロードするFTPがあれば、カスタムテーマを作成することはできます。

Pronkoさんの動画以外では、他に以下のサイトもご参照ください。
https://www.emiprotechnologies.com/blog/magento-blog-56/post/how-to-create-magento2-custom-theme-625
http://www.codextblog.com/magento-2/create-a-custom-child-theme-from-luma-theme/

Magentoの公式ドキュメントでの説明はこちらです。
https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/themes/theme-create.html

3. カスタムテーマを作るための3つのファイル

カスタムテーマ作成の出発点として、テーマの名前を決めます。
テーマの名前の表記は、「作成者/テーマ名」(Vendor/theme) で、これをローマ字で書くと、Sakuseisya/temamei のように表記するルールになっています。作成者の名前は大文字で始まる単語、テーマ名は小文字で始まる単語で、両者の間にスラッシュ(/)を挟みます。
例えば、「Dekirumonn」という作成者が、「Luma Custom」という名前のテーマを作成しようとする場合、このテーマ名は、Dekirumonn/luma_custom となります。それぞれの大文字と小文字の使い方にご注意ください。

そして、このテーマをMagento2に認識させるために、3つのファイルによりテーマの定義を行います。
3つのファイル名は、registration.phptheme.xmlcomposer.json です。それぞれのファイルに、以下の内容を記述します。

registration.php

コピーする

Magento2のシステムにテーマを登録するためのファイルです。

theme.xml

コピーする

テーマの定義となるファイルです。親テーマとして、Magento/luma を指定しています。

composer.json

コピーする

Composerに対してテーマを一つのパッケージとして認識させます。Dekirumonnと大文字で始めていますが、このcomposerファイルに関しては、小文字dekirumonnで始めても、どちらでも構いません。
また、magento/theme-frontend/luma は、親テーマとなるLumaのファイルパスで、このカスタムテーマがLumaテーマとの依存関係にあることを示します。

つづいて、これらのファイルのアップロード先となるフォルダを、Magento2本体の内部に作成をします。
FileZillaなどのSFTPソフトで、Magento2のルートにアクセスして、以下の階層構造になるように、Dekirumonnluma_customの二つのフォルダを作成します。

[magento2 root]/app/design/frontend/Dekirumonn/luma_custom

/app/design/frontend/ まで順に辿り、そこに、Dekirumonn という名前のフォルダを新規で作成してください。そして、Dekirumonn の下層に、luma_custom という名前のフォルダを新規で作成してください。そして、この luma_custom のフォルダ内に、先ほど作成した三つのファイル registration.phptheme.xmlcomposer.json をアップロードします。
画像で見ると、以下のような構成になります。

Lumaカスタムテーマファイルの階層

4. カスタムテーマの適用

つづいて、Magento2の管理画面にログインします。
もし、ここでエラー画面が出てしまったら、ファイル名のスペルなどを再チェックしてください。また、コマンドラインで、Magento2のキャッシュをクリアしてみてください。

管理画面にログインしたら、Content > Design Configration に進みます。

Magento2テーマの設定

この画面で、カスタムテーマを適用させたいストアの「Edit」テキスト(表の右にある青い字)をクリックします。
上の画像では、一番下の「简体中文」ストアをクリックしています。

Magento2テーマの設定

Default Theme の Applied Theme のプルダウンをクリックすると、既存の「Magento Blank」「Magento Luma」に加えて、先ほどファイルをアップロードしたばかりの「Luma Custom」が選択肢として追加されています。これにより、このカスタムテーマが、Magento2本体に正しく認識されたのが確認できます。
そのまま「Luma Custom」を選択し、オレンジ色の [Save Configration] をクリックして保存します。そして、Magento2のキャッシュをクリアします。

ここまでの作業で、新しいカスタムテーマを「简体中文」ストアに適用することができた、ということになります。
ただし、まだカスタムテーマの中は空っぽで、はじめの3つのファイルしかありませんので、Lumaをベースとして、そのLumaを上書きする要素は何も追加されていない状態です。

この状態でストアにアクセスすると、以下の画像のようなデザインレイアウトになっています。

Magento2 Lumaカスタムテーマ

Lumaテーマのデザインのままですが、ヨガの女性バナーなどのトップページのメインコンテンツが消えています。

実は、元々Lumaのこの箇所のコンテンツは、管理画面 Content > Widgets から、特定の Block を結びつけることで表示させています。そして、Widgetsはテーマと結びつけて設定されているので、ストアの適用テーマを変更することで、Widgetsの指定により該当のポジションに表示されていたBlockコンテンツは、全てカスタムテーマでは表示されないことになります。

もちろん、カスタムテーマのためにWidgetsをコピー的に作成し、それぞれ同じBlockを結びつければ、元と同じコンテンツを同じポジションに表示することも可能です。また、Blockの内容を編集して(翻訳など)新規のBlockとして結びつければ、その編集内容がカスタムストアに反映されます。

ちなみに、ヨガ女性のバナー等は、Content > BloksHome Page Block (home-page-block) にて編集できます。このブロックは、Content > Widgets  の 14 Home Page により配置されています。
(Widgets と Blocks の使い勝手については、Magento2.3バージョンにて、Page Builderという機能が追加されたことにより、大きく改善されています。詳細はまた別の機会に記事にしたいと思います。)

5. 基本色の変更(編集事例)

それでは、このカスタムストアの配色の編集をしてみます。

Magento2 Lumaテーマは、LESSを使用した、Magento2特有のUIライブラリというシステムで基本色を設定しています。
https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-topics/theme-ui-lib.html

LESSは、CSSのスマートな親分のようなもので、LESSに書かれたルールが、CSS上にコンパイルされ(展開され)、サイト全体を規定する働きをします(と私は理解しています)。

Magento2の基本色を規定しているファイルは、以下にあります。
[magento2 root]/lib/web/css/source/lib/variables/_colors.less

_colors.less

ここで規定されている色コードを上書きすれば、LESSファイル上で適用されている箇所すべての色を一括で変更することができます。

例えば、サイト上部のヘッダーパネル(黒っぽいグレイ)の色を変えるとします。
ブラウザからコードを見ると、どのCSSでのどの色が指定されているかを確認することができます。以下の画像で(ちょっと小さいのですが)、background-color: #6e716e; がその色だと分かります。

Magento2 Lumaテーマ ヘッダーの色

そして、#6e716e の色が、上記の _colors.less ファイルをチェックすると、54行目にある、@color-gray-middle4:#6e716e と一致することに気づきます。
これにより、このヘッダーパネルの背景色は、LESSで規定された配色なのだろうと考えられます。

そこで、LESSの編集をすることになるのですが、方法としては、ヘッダーパネルの規定色(@color-gray-middle4)を別の規定に変更する方法と、基本配色の定義そのもの(@color-gray-middle4:#6e716e)を変更する方法の、二つの方法があります。今回の記事では、後者の方法をご紹介いたします。

基本配色の定義を変えるには、 _colors.less ファイルを上書き変更することになります。
そこで、[magento2 root]/lib/web/css/source/lib/variables/_colors.less をいったんローカルにダウンロードし、エディターで該当箇所の編集をします。

_colors.less(編集箇所のみ)

コピーする

上記は変更箇所のみのコードです。1行目(元コード)は削除して、変更したい色コードのラインを残してください。
また、この1行のみをファイルに残すのではなく、他の規定行もそのまますべて残し、純粋に変更箇所のみを編集するようにしてください。

そして、この編集済みの _colors.less ファイルをアップロードする先は、Luma Customテーマ作成のため、はじめに3つのファイルをアップロードした先の内部の、以下の階層になります。

[magento2 root]/app/design/frontend/Dekirumonn/luma_custom/web/css/source/lib/variables/_colors.less

luma_custom のフォルダ内に web というフォルダを作成し、その中にまた css というフォルダを作成し、その中にまた source、その中にまた lib、さらにその中に variables というフォルダを作成し、そこに _colors.less ファイルをアップロードします。

この階層は、元ファイルのパス
[magento2 root]/lib/web/css/source/lib/variables/_colors.less
この/lib/以下の部分をそっくりそのまま反復しています。

画像で見ると、編集ファイルは以下のように配置されます。

Magento2カスタムテーマの基本配色変更ファイル

この後、PuTTYやターミナルなどのSSHで、Magento2のルートへアクセスして、以下のコマンドを実行してください。

Magento2のルートへ移動
cd [Magentoルートへのパス]

Magentoのキャッシュクリアと既存の生成ファイル削除
php bin/magento cache:clean
php bin/magento cache:flush
rm -rf pub/static/*
rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/view_preprocessed/pub/*
rm -rf generated/code/* generated/metadata/*

Magentoコンパイル
php bin/magento setup:di:compile
php bin/magento indexer:reindex
php bin/magento cache:clean
php bin/magento cache:flush

そして、カスタムストアのホームページにアクセスすると、以下の画像のように、色が変更されているのが確認できます。

Magento2 Lumaテーマの色変更

ヘッダーパネルだけではなく、最下部のコピーライトの背景画像も茶色系に変更されています。
これは、コピーライトの背景画像も、同じ規定色(@color-gray-middle4)が当てられているということです。

このように、LESSファイルの基本色の定義を変更すると、該当の箇所だけでなく、同規定されている別の箇所の配色も連動して変更されます。
これは、デザインのバランス上はいいことなのですが、変更により思わぬ配色(テキストが読めない等)になってしまう可能性もあり、注意が必要です。また、PCとスマートフォンでスタイルシートの適用が異なっているので、それぞれの端末で変更結果を確認する必要があります。

6. フッターリンクの削除・編集

配色以外にLumaテーマでまっさきに編集したい箇所としては、フッターリンクがあります。
デフォルトのフッターのリンクには、Search Termsや、Orders and Returnsなど、通常のECストアには必ずしも必要でないリンクがあります。しかし、これらのリンクを編集しようとしても、管理画面内からは該当するBlockを見つけることができません。

実は、このフッターリンクも、カスタムテーマ内にレイアウトのファイルをアップロードしなければ、変更することができないのです。

このフッターリンクを削除・編集する方法としては、以下のページが参考になります。
https://magento.stackexchange.com/questions/93628/magento-2-remove-and-change-footer-links

それぞれのリンクには、コード名がつけられています。
Privacy and Cookie Policy: privacy-policy-link
Search Terms: search-term-popular-link
Contact Us: contact-us-link
Advanced Search: catalog-search-advanced-link
Orders and Returns: sales-guest-form-link

そして、削除したいリンクを、コード名で指定するように、以下のxmlファイルを作成します。

default.xml

コピーする

この例では、Search Terms、Advanced Search、Orders and Returns の三つのリンクを削除します。

そして、この default.xml ファイルを、以下の階層にアップロードします。

[magento2 root]/app/design/frontend/Dekirumonn/luma_custom/Magento_Theme/layout/default.xml

luma_custom の中に、Magento_Theme というフォルダを新規作成し、その中にまた、layout というフォルダを作成し、そこに default.xmlをアップロードします。

これにより、三つのリンクを削除することができます。

Magento2 Lumaテーマ フッターリンクの削除

フッターにあった5つのリンクのうち3つが削除され、2つのみ残っているのが確認できます。

ちなみに、この default.xml の元ファイルは、
[magento2 root]/vendor/magento/theme-frontend-luma/Magento_Theme/layout/default.xml
に配置されています。

今回は、元ファイルすべてをコピーするのではなく、純粋に変更箇所のコードのみを、元ファイルに対して追加で差しはさむようなイメージになります。

このように、Lumaテーマを編集する際に管理画面内で作業できないことは、上記の配色変更やフッターリンクの削除と同じように、カスタムテーマ内のフォルダに、上書き(追加)する編集ファイルを配置するという方法をとります。

Magento2は、はじめに適用テーマ内のファイルを読むと、そこに欠落している必要な実装コードを親テーマ(Luma/Blank)のファイル群に遡って読み込む機能を持っています。これを、Magentoのフォールバックシステム(Fallback system)と言い、これにより最小限の変更でカスタムテーマの作成を行うことができると言われています。

7. Magento2 有料テーマのおすすめ

しかし、色一つ、リンク一つを変えるためにこれだけを作業をしなければならないのは、サイト運営者にとっては現実的ではありません。Lumaテーマはシンプルで素晴らしいテーマだと思いますが、正直、開発者による開発者のためのテーマという感じがします。

そこで、やはりおすすめするのは、有料テーマの使用になります。
有料テーマは、要するに、上記で作成したカスタムテーマの完成版のような存在です。しかも、基本的な編集は全て管理画面から作業できるように設計されています。有料テーマのいくつかはMagentoテーマでご紹介しておりますので、ご参照ください。

特に当サイト一押しのUltimoテーマは、Magento2のコアコードとのシンクロ率が高く、またカスタマイズの柔軟性もあり、安定感も抜群ですので、Magento2の初心者にも経験者にもおすすめのできる、秀逸なテーマです。

Magento2定番テーマ Ultimoテーマの紹介

Lumaテーマの編集のブログのはずが、最後は有料テーマの紹介になってしまいました。。
2018年も残りわずかです。皆さま、良いお年をお過ごしください。