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テーマを購入する(英語)