Magentoテーマ

Magentoできるもん!:></head> タグの前にコードを追加 Magentoテーマ

Magento2 Lumaテーマの編集方法 / カスタムテーマの作成

By |2019-01-25T15:33:32+09:002018年12月28日|Categories: Magentoテーマ|Tags: , , , |

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年も残りわずかです。皆さま、良いお年をお過ごしください。

Magento2にUltimoテーマをインストール(動画の解説)

By |2018-03-07T16:13:29+09:002017年10月19日|Categories: Magentoの設定, Envato themeforestについて|Tags: , , , , |

1. Envato themeforestでUltumoテーマを購入

こちらのUltimoテーマのインストールの動画は、すでにMagento2(Lumaサンプルテーマ)がサーバー上にインストールされた状態を前提として説明していますので、あらかじめご了承ください。
Magentoのインストールについては、Magentoの超簡単インストールをご参照ください。
また、Ultimoテーマは、Magentoテーマ/テンプレートを参照に、Envato themeforestにてダウンロード購入をしてください。

2. Magentoテーマをインストールする前の準備

テーマをインストールする前に、Magento側で準備しておくことがあります。

  • Magentoのキャッシュをクリアし、無効にしておく
  • Magento 管理画面からログアウトする
  • サーバー、CDN等のキャッシュをクリアし、無効にしておく
  • テスト環境でインストールをして動作確認をする
  • ライブサイトにインストールする時は、事前にバックアップをとる

Magentoのキャッシュクリア/無効化については、Magentoのキャッシュをご参照ください。(準備中)
バックアップの取り方は、Magentoのバックアップをご参照ください。(準備中)

3. Ultimoテーマファイルのアップロード

Ultimoテーマのファイルをダウンロードしたら、Zipファイルなので、それをWinRARなどのソフトを使い、ローカルのパソコン上で解凍をします。
そうすると、以下のようなファイル構造になっています。

Ultimoテーマのファイル構造

上の画像は、いくつかのフォルダを開いて、Magento2.1.x バージョン用のファイルまで辿りつく概念図になります。
これはUltimoテーマの例なのですが、他の多くのMagentoテーマでも、ダウンロードしたZipファイルを解凍展開して、テーマファイルの実体がどこにあるかを先ず把握します。

themeforest-3231798-ultimo-fluid-responsive-magento-theme.zip がダウンロードしたファイルで、これをパソコン上で解凍すると、Ultimo Theme 2.6.1 and 1.19.1 というフォルダが現われます。2.6.1や1.19.1というのは、Ultimoテーマのバージョン数です。
Ultimo Theme 2.6.1 and 1.19.1 の中には、Magento 1 Magento 2 Resources の三つのフォルダがあり、Help & Support というテキストファイルもあります。いま、Magento 2 にUltimoテーマをインストールしたいので、Magento 2 のフォルダをさらにクリックします。そうすると、Theme Files というフォルダがあり、Changelog というテキストファイルや Ultmo User Guide などのPDFファイルも入っています。
Theme Files フォルダをさらにクリックすると、Magento 2.0.xMagento 2.1.x という二つのフォルダがります。これは、それぞれ、Magento 2.0.xバージョン用のファイル、Magento 2.1.xバージョン用のファイルの格納されたフォルダになります。今回インストールするMagentoは、2.1.9バージョンなので、Magento 2.1.x のフォルダをクリックします。その中に、Theme というZipファイルがあります。
このZipファイルを解凍すると、app  pub という二つのフォルダが現われます。これが、Ultimoの本体ファイルになります。

なぜこれがUltimoテーマの実体ファイルとわかるかと言うと、Magento 2 本体も、app pub … というフォルダで構成されているからです。

Magentoのテーマをインストールするには、Magentoファイルのおおざっぱな構造を頭に入れておいてください。
なぜなら、Magentoのテーマをインストールするということは、そのテーマファイルを、Magentoのファイル構造の所定の位置に填め込むようにアップロードするということだからです。

下の画像が、Magento 2 のファイル構造(フォルダ)です。

Magento2のファイル構造

app bin dev lib phpserver pub… と、フォルダがあり、その下にたくさんのファイルがあり、index ファイルも見られます。
これらのMagentoの総ファイル(フォルダ)の置かれているサーバー上の場所(フォルダ)を、慣例的に Magento Root(ルート)と呼びます。

UltimoテーマをMagentoにインストールには、Ultimoのファイル app pub を、Magentoルートにある同じ app pub に重ねるようにアップロードすることになります。
実際には、テーマファイルの中身は、Magento本体のファイルと同じ構造になっているファイルは一つもないので、あたかも重ねるようなイメージでアップロードをしても、テーマファイルが、Magento本体のファイルを上書きしてしまうことはありません。Ultimoテーマの app フォルダ以下にあるファイルは、Magento本体の app フォルダ以下にあるファイルを決して上書きしないように配置されています。つまり、同じ app フォルダでも、その中身のファイル(フォルダ)は、まったく別モノです。

さて、アップロードの方法ですが、Ultimoテーマの app pub フォルダを、FilezillaなどのFTPでアップロードしてもいいのですが、ファイル数も多く時間がかかるので、動画ではその方法をとっていません。
Ultimoテーマの app pub フォルダは、Theme というZipファイルを解凍展開したものです。なので、動画では、Theme.zip をMagentoルートにアップロードし、アップした後に、サーバー上で解凍展開するという方法をとっています。
これを図でイメージすると、以下のような画像になります。

UltimoテーマファイルをMagento2にアップロード

Magentoルートに、Theme.zip をアップロードします。動画では、cPanelのFile Managerを利用して、ファイルをアップロードしています。アップロードをする前に、Magentoのルート(public_html/dekirumonn.com/demo)にあたる 「demo」フォルダをクリックして、アップロード先として選択しています。

MagentoルートにUltimoファイルをアップロード

Magentoルートにアップロードされた Theme.zip ファイルを、File Manager の Extract ボタンをクリックすることで、サーバー上で解凍します。そうすると、結局、app pub のテーマファイルが、Magento本体のファイルの app pub の中に展開され、組み込まれることになります。

UltimoテーマファイルをZipでアップして解凍

Magentoルートがどの位置(フォルダ)になるかは、サーバー上のMagentoインストール環境によって違ってきますので、注意してください。
また、Ultimoテーマは、Zipファイルをアップロードしてそのまま解凍すればいいのですが、テーマによっては、Zipを解凍しても、テーマファイルが裸のまま展開されず、それらを含むように別名のフォルダが現われるものもあります。この場合は、Magentoルートの下に余分な階層フォルダができてしまっているので、解凍展開後に、サーバー上でテーマファイルを一括選択し、Magentoルートにマウスドラッグ等で移動してください。

Magentoルートの話しは、開発者や制作者の方には当たり前のことなのですが、Magentoがはじめての場合、ここで躓いてしまう人が多いので、ややくどくどしく説明をいたしました。

4. PuTTYでアクセスできるようにする

テーマファイルのアップロードが完了したら、MagentoルートにSSHアクセスをし、コマンドの実行をします。
コマンド作業は、一般のサイト運営者にとって、Magento構築の最難関のところかもしれません。

本来、一般ユーザーはプログラミングとは無縁なので、コマンド作業を行うための準備環境がありません。にもかかわらず、Magento 2 から、Magento CLI(Command Line Interface)でなければできないような作業が目立つようになりました。
ちなみに、Magento 1.9 までは、一般ユーザーがコマンド作業を強いられることはありませんでした。

これは、Magento 2 が未だベータ版という認識で、いずれはすべて管理画面から作業できるようになるのか、あるいは、Magento社がMagento産業(制作会社やエージェンシー)に配慮をしたのか、あるいは単に技術的な問題なのか、よくわかりません。(誰か知っている方がいたら教えてください。)
ただ、現状コマンド作業が必須という状況は、Magento 2 の普及の妨げとなっているのではないかと思います。

いずれにせよ、Magento 2 にアップロードしたUltimoテーマを有効化するためには、三つのコマンドを実行しなければなりません。
Windowsであれば、PuTTYという無料ソフト、Mac OSであれば、内臓のTerminalを使うことになります。
ここでは、PuTTYを使う方法を説明したいと思います。

PuTTYのインストールや使い方については、日本語で豊富な情報があるので、当サイトでのハウツー的な説明は省略させていただきます。
「PuTTY インストール 使い方」などのワードで検索して、自分で読みやすいサイトをご参照してください。

尚、SiteGroundサーバーのアカウントに、PuTTYでSSHアクセスする方法については、PuTTYの設定についてをご参照ください(準備中です)。cPanelでのSSHアクセスキーの作成について説明しています。
以下、PuTTYの設定が完了してからの作業の説明になります。

5. コマンドの実行

動画の中のPuttyで、はじめに入力しているのは、cd public_html/dekirumonn.com/demo という文字です。
cd は、Change Directoryの省略で、現在のディレクトリーを移動するためのコマンドです。ですので、cd public_html/dekirumonn.com/demo は、public_html/dekirumonn.com/demo へ移動せよ、という意味の命令文になります。そして、この public_html/dekirumonn.com/demo は、Magentoのルートディレクトリです。

PuTTYでのコマンド Ultimoテーマインストール

上の画像では、[~] の [ ] の中の文字が、コマンドを実行させる現在のディレクトリの位置の表示になります。~ は、サーバーアカウントの親ルートを示しています。
そして、cd コマンドで、Magentoルートへの移動を実行すると、次の行で、[~/piblic_html/dekirumonn.com/demo] と表記が変化します。これにより、現在のディレクトリの位置が、public_html/dekirumonn.com/demo に移動したことが確認できます。フォルダで言うと、「demo」の位置にあたります。
ここにMagentoファイルが展開されているので、PuTTYでこのディレクトリに移動をすれば、Magentoファイルに対して、コマンドを実行できることになります。

環境により、Magentoをインストールしたルートまでのディレクトリ表記は様々です。
public_html というのは、パブリックに公開するファイルのルートフォルダのことで、SiteGroundをはじめとするcPanelを採用したサーバーの多くがこの表記を使用しているようです。慣例的に、この public_html のことを、ドキュメントルート(document root)と呼びます。サーバーアカウントのメインドメインは、このドキュメントルートに位置しています。
一方、サーバーアカウントにサブドメインや別のドメインを追加するには、cPanelで、そのドキュメントルート内のフォルダ位置を指定することになります。
public_html/dekirumonn.com フォルダには、dekirumonn.comドメインを指定しているので、Magentoインストールのルート位置である public_html/dekirumonn.com/demo は、URLで表すと、www.dekirumonn.com/demo ということになります。(実際、前回の動画では、そのようにMagentoを1クリックインストールしました。)
もし仮に、MagentoのインストールURLが、www.dekirumonn.com であるなら、ここのPuTTYでのディレクトリ移動も、cd public_html/dekiurmonn.com というコマンドになります。なぜなら、public_html/dekirumonn.com が、Magentoルートだからです。

以上、cdコマンドでの移動の意味が分かり、自分の環境にあわせてMagentoルートへの移動が正しくできれば、あとは以下の三つのコマンドをコピペするだけです。
三つのコマンドの仕組みを理解したり、覚えたりする必要はありません。テーマを有効にするためのおまじないのようなものと捉えるだけで十分です。

一つめのコマンド:

php bin/magento module:enable Infortis_Base Infortis_Brands Infortis_Cgen Infortis_Dataporter Infortis_Infortis Infortis_Ultimo Infortis_UltraMegamenu Infortis_UltraSlideshow

これをPuTTYにコピペし、キーボードのEnterボタンを押します。
このコマンドは、UltimoのユーザーガイドのPDFに書いてあります。ただし、PDFから直接コピペすると、空欄部が改行されてしまうので、いったんメモ帳などのエディタでコマンドを一行にまとめる必要があります。上のコマンドは一行に修正してあるので、そのままコピペで使えます。

PuTTYでのコマンド作業 Ultimoテーマのインストール

コマンドを実行すると、すぐに画像のような(緑色の)文字列が表示されます。これで、一つめのコマンドは無事に実行されました。PuTTYの画面上のカーソルが、次の行で点灯しているので、再び新しいコマンドを入力することができます。

二つめのコマンド:

php bin/magento setup:upgrade

をPuTTYにコピペし、Enterを押します。

PuTTYでのコマンド作業 Ultimoテーマインストール

同じように、文字列が数秒流れ、その流れが止まると、次の一行でカーソルが点灯します。
これで二つめのコマンドも無事に実行されました。

三つめのコマンド:

php bin/magento setup:static-content:deploy

をPuTTYにコピペし、Enterを押します。

PuTTYでのコマンド Ultimoテーマインストール

三つめのコマンドは、動画では経過がやや長いのですが、画面の前で待っていると、同じように文字列の流れが止まり、New version of deployed files: という文字が現われます。そして、 次の一行でカーソルが点灯します。
これで、三つのコマンドがすべて無事に実行されました。

6. Magento管理画面での作業

コマンド作業がクリアできれば、あとはMagentoの管理画面で所定の作業をクリックで進めるだけです。
基本的に、動画でご案内している通りのクリック作業なので、以下、概略をリストにします。(Magento2.1.xバージョンでの説明になりますが、2.2.x以降も大きな変化はないと予想されます。)

  • Magento管理画面にログインする
  • Content > Design > Configuration に入り、変更するストアの「Edit」ボタンをクリックし、Applied Theme のドロップダウンから「Infortis Ultimo」を選択、上の「Save Configuration」をクリックする
  • Stores > Configuration > Infortis Themes – Configuration > Theme Settings に入り、Data Import タブの一番上にある「Import」をクリックし、インポートするデモの種類と、それを適用させる範囲(Deault/Website/Store)を選択する
  • Stores > Configuration > Infortis Themes – Configuration > Theme Settings に入り、Data Import タブの内の Import Demo From のドロップダウンで、インポートするデモの種類を選択し、「Save config」をクリック(動画では、すでにインポートするデモの種類が選択されているので省略)
  • 「Import Static Blocks」をクリックして、CMSブロックをインポートする
  • 「Import Pages」をクリックして、CMSページをインポートする
  • System > Cache Management に入り、「Flush Magento Cache」をクリックする

また、動画ではスルーしているのですが、最後の「Import Pages」のクリック後に、Magento管理画面アナウンスに以下のような注意メッセージが表示されています。

Ultimoテーマ CMSインポート

Unable to import items (1) with the following identifiers (they already exist in the database): customer-service

これは、インポートしようとしたUltimoテーマのページの中に、すでに同じidのページがMagentoに存在していたので、インポートができませんでした、というメッセージです。
この場合、Magento 2 に事前に入っていた Lumaテーマに、customer-service というid(URL)のページデータが既に存在していたので、それを残して、Ultimoテーマの同じidのページデータを取り込まなかった、ということになります。
新しいテーマのページを上書きするように再インポートするためには、「Import Pages」のボタンの直下にある、Overwrite existing pages のプルダウンを、No から Yes に変更をしてください。

Ultimoテーマ CMSページインポート上書き

上の画像にあるように、上書きのプルダウンを「Yes」にしてからインポートボタンをクリックすると、新しいテーマのページが上書きインポートされます。

以上で、Magento 2 に Ultiimoテーマをインストールする動画説明は終わりです。

Magentoテーマについては、Magentoテーマ/テンプレートのページもご参照ください。
Ultimoテーマは、Envato themeforest(英語)にて、$99ドル(約11,000円)でご購入いただけます。

Magento定番Ultimoテーマを購入する(英語)

Envato themeforestでのMagento/Magento2テーマの注文方法について

By |2019-05-22T07:25:26+09:002017年10月17日|Categories: Envato themeforestについて|Tags: , , |

1. Envato themeforest の Magentoテーマについて

Magentoのデザインテーマは、Envato themeforestという海外サイトでダウンロード購入することができます。
Magentoテーマ/テンプレートや、Magentoデモサイトでは、Envatoで販売しているおすすめのテーマをいくつか紹介しています。

Envatoを見ると、非常に多くのテーマがあり、デザイン的に優れたものが目につきやすいのですが、実際に購入するに当たっては、そのテーマの累計販売数や購入者からの評価をよくチェックしてください。
どんなに美しいテーマでも、安定して動かなければ、現実のストア運営は難しくなってしまいます。販売数の多いテーマは、多くのユーザーからの検証を通過し、様々な不具合を修正してバージョンアップを重ねています。
また、長く売れ続けているテーマは、Magentoのバージョンアップにも合わせ、テーマファイルを常にアップデートしています。そして、将来的にもアップデートを継続するだろうと期待されます。
そのような意味からも、Magentoテーマ/テンプレートは、美しさや見た目だけではなく、評価や販売実績を基にした安定感を優先して選択するのがおすすめです。

このページでは、Envato themeforestでベストセラーとなっているUltimoテーマの購入をサンプルとして画像で紹介します。
Ultimo以外のテーマも、すべて購入方法は同じです。

2. EnvatoでUltimoテーマを購入する

それでは、Envato themeforestのサイトに行ってUltimoテーマを購入しましょう。

先ず、Envato themeforest Magento Ultimoテーマにアクセスしてください。
すると、下の画像のようなページが開くと思います。

EnvatoでUltimoテーマを購入

緑色の[Add to Cart]ボタンで、カート画面に進みます。(同じように、下の[Buy Now]でもカート画面に入ります。)
Regulaer License $99 USD なので、Ultimoテーマを一つのMagentoストアで利用することのできるライセンス料金が、99ドル(日本円で約11,000円)ということになります。
この料金には、今後のアップデートファイルのダウンロードと、購入後6ヶ月間のサポートが含まれます。
追加の Extend Support to 12 manth($31.5 USD)にチェックを入れると、サポートを12ヶ月に延長することができます。後日、別途サポート(6ヶ月間)を追加購入することもできますが、その際には、サポートのみで $73.5 USD の料金となります。
尚、Ultimoテーマの場合は、サポートにはEnvato theeforestサイトのコメント欄での対応と、直接、開発者にメールで問い合わせる方法の、二つの方法があります。

Magento Ultimoテーマ購入

[Add to Cart]をクリックすると、上の画像のように、Ultimoテーマがカートに入りますので、緑色の[Go to Checkout]をクリックしてください。

Magento Ultimoテーマ購入

チェックアウトの画面に進みます。Envatoがはじめての方は、先ずアカウント作成となり、お名前とメールアドレスを入力します。

First Name: 名前をローマ字で入力してください。
Last Name: 姓をローマ字で入力してください。
Email: メールアドレスを入力してください。

入力ができましたら、緑色の[Next]ボタンをクリックしてください。

Magento Ultimoテーマ購入

画面が替わり、ユーザー名とパスワードを入力する欄が現われます。

Choose your username: ユーザー名を入力してください。
Choose your password: パスワードを入力してください。

その後「私はロボットではありません」にチェックを入れてください。チェックを入れると簡単なクイズが出るので、クイズに回答してください。(スパム防止のための措置です。)
I have read, and agree to, the Envato Market’s Terms and Conditions and Privacy Policy. にチェックを入れてください。
緑色の[Creat account & continue]をクリックします。

Magento Ultimoテーマ購入

次に、Billing Details 請求先の住所を入力する欄が現われます。
First NameとLast Nameは、自分の入力内容が反映されています。

Company Name: 法人名を入力してください(任意)。
Country: プルダウンでJapanを選択してください。
Address Line1: 市町村以下の住所をローマ字で入力してください。
Address Line2: マンション名等の入力欄です(任意)。
City: 市町村名(区名)をローマ字で入力してください。
State/Province/Region: 都道府県名をローマ字で入力してください。
Zip/Postal Code: 郵便番号を入力してください(ハイフンなし)。

入力ができたら、緑色の[Save and continue]をクリックしてください。

Magento Ultimoテーマ購入

次に、Select Payment Method お支払方法の選択となります。

クレジットカードのお支払いの場合、Visa/Masterのロゴをクリックすると、カード情報の入力欄が現われます。お使いいただけるカードは、Visa/Masterの2種になります。(JCBやAmexなどそれ以外のカードは、PayPalを通じてお支払いにご利用いただくことができます。)
Card Number: カード番号を入力してください。
Expirery Date: カードの有効期限をプルダウンで選択してください。MMが月、YYが年です。
CVV: カードのセキュリティーコードを入力してください。Visa/Masterはカード表面の3ケタの数字です。
Save card for next timeには、チェックを入れる必要はありません。
入力ができましたら、緑色の[Make Payment]をクリックすると、ご注文完了となります。

PayPalのお支払いの場合、PayPalロゴをクリックすると、緑色の[Checkout with PayPal]のボタンが現れますので、それをクリックしてください。PayPalの画面に移動しますので、PayPalアカウントにログインし、ご注文を完了してください。PayPalのアカウントをお持ちでなくても、初回のこの注文にてアカウントを作成することができます。画面のご案内(日本語)に従い、必要事項を入力し、ご注文を完了してください。

ご注文が完了すると、Envatoより、[ThemeForest] Purchase Confirmation という件名のメールが届きます。
以上が、Envato themeforestでのご注文方法となります。

3. Magentoテーマファイルのダウンロード方法

テーマの注文が完了したら、すぐにテーマファイルをダウンロードすることができます。
下の画像のように、Envatoマーケットの右上にある自分のアカウント名にマウスを合わせると、Profiles、Settings、Downloads、、、とメニューが表示されますので、「Downloads」をクリックしてください。
(また、Envatoから届いた注文完了メールの本文にある、「My Downloads」という緑色のボタンをクリックして、ダウンロードページにアクセスすることもできます。)

EnvatoでMagentoテーマをダウンロードする
Envato Magentoテーマ ダウンロード

Downloadsをクリックすると、自分のアカウントでダウンロードのできるテーマ一覧の表示されたページにアクセスします。
上の画像のように、先ほど購入したUltimoテーマの欄にある緑色の[Download]をクリックすると、ダウンロード内容が選択できるメニューが現われるので、All Files & Docimentation をクリックします。そうすると、テーマファイルのダウンロードが自動的に始まります。
License certificate & Purchase code をクリックすると、ライセンスコードをダウンロードすることができます。(一部のテーマでは、インストール後にライセンスコードの入力が求められます。)

以上が、Envatoにて購入したテーマのダウンロード方法の説明です。
テーマファイルはZipファイルなので、Windowsの場合は、WinRARなどの無料ソフトでファイルを解凍/展開させてください。
どのテーマにもインストールや使い方のガイドがあります(英語)が、インストールに関してはほぼ同じ方法ですので、Magentoテーマのページの動画をご参照ください。

Ultimoテーマ

$99 USD

Ultimoテーマを購入(英語)
Portoテーマ

$99 USD

Portoテーマを購入(英語)
Fastestテーマ

$99 USD

Fastestテーマを購入(英語)