【Shop Isle】無料のワードプレス・テーマShop Isleの使い方

※この記事は2017/3/28日時点のバージョン4.7.3のワードプレスを使用したスクリーンショットを利用しております。使用するテーマShop Isleのバージョンは1.1.14です。

Shop Isleとは

ワードプレスのテーマであり、無料で利用することが可能です。特徴としてはECサイトを構築したいと考えた時にある程度無料で作成することが可能なこと。そして楽天やアマゾンのように商品を並べて、ついクリックしたくなるような素敵なページを構築できます。プラグインの組み合わせとアイデア次第で自分だけのECサイトを構築出来る素晴らしいテーマです。

インストール

それでは早速ですが、ワードプレスのテーマ「Shop Isle」のインストール手順についてご説明します。

まずはShop Isleをダウンロードします。
https://ja.wordpress.org/themes/shop-isle/
1x1.trans

上記URLにアクセスすると、ワードプレスのテーマ「Shop Isle」のダウンロードページが表示されます。ここではページ右側「ダウンロード」をクリックして、パソコンに保存します。なお、保存する場所については任意ですが「shop-isle.1.1.14.zip」は.zip形式のまま解凍しないようにしましょう。ワードプレスでテーマをインストールする時は、.zip形式で圧縮されたままアップロードしてインストールすることが可能となっております。

次は、ワードプレスにログインして、ダッシュボードを表示します。ダッシュボードの左側の外観をクリックします。メニューが開くので、その中のテーマをクリックします。
1x1.trans

こちらはまだワードプレスにテーマをインストールしていない状態のスクリーンショットです。画面左上の「テーマ」という文字列の右側に「新規追加」というボタンがあるので、そこをクリックします。
1x1.trans

画面が移動したら、また画面左上の「テーマを追加」の文字列の右側にある「テーマのアップロード」というボタンをクリックします。
1x1.trans

テーマのアップロードをクリックすると、上記のようにファイルの選択を促す表示が出るので、「ファイルを選択」をクリックします。ダイアログが開きますので、先ほどダウンロードした「shop-isle.1.1.14.zip」を選択します。
1x1.trans

ファイルが選択されると、上記のように「ファイルを選択」の右側に「shop-isle.1.1.14.zip」が表示されます。表示されたことを確認して、その右側の「今すぐインストール」をクリックします。
1x1.trans

「今すぐインストール」をクリックすると、下記のような画面になります。次は青文字で下線のある「有効化」をクリックします。
1x1.trans

下記の画面が移動します。
1x1.trans

ここまでが、ワードプレスでテーマをインストールする方法と、インストールしたテーマを有効化する手順となっております。

試しにいくつかテスト投稿とカテゴリの設定をして表示してみました。
1x1.trans

このように表示されます。これが何もカスタマイズしていない状態の表示です。Shop Isleのダウンロードページにあったものとは配置やサムネイルなどが違いますね。これはテーマの設定をする中で少しずつ近づくようになります。

WooCommerceを導入する

このテーマは、以下のプラグインの利用を推奨しています: WooCommerce。

テーマを導入し外観、テーマとクリックすると下記のように表示されます。プラグインのインストールを開始をクリックしてみましょう。
1x1.trans

下記の画面に移動します。WooCommerceをインストールをクリックします。
1x1.trans

WooCommerceがインストールされました。
1x1.trans

次は管理画面の左側サイドバーのプラグインをクリックします。

WooCommerceがまだ有効化されていません。WooCommerceの下の青文字の有効化をクリックします。
1x1.trans

こちらの画面に移動します。あとで設定しますをクリックしましょう。
1x1.trans

管理画面の左側のサイドバーのテーマをクリックし、その中のカスタマイズをクリックします。
1x1.trans

固定フロントページをクリックして設定画面を出します。Shop Isleの機能をフルで利用するにはここを「固定ページ」にします。「固定ページ」に変更されていないようだったら「固定ページ」に変更して、フロントページと投稿ページをセットしましょう。(フロントページ、投稿ページともに本文が空っぽの固定ページを予め作っておきます。)
(画面中の「最新の商品」欄は予め商品を作成しておいたものです。※商品登録はこの後に説明します。)
1x1.trans

簡単に商品登録の方法を説明します。

管理画面の左側サイドバーの商品をクリック。その中に商品を追加という項目があるのでクリックします。これはテストとして入力した商品です。商品名と概要、右下の商品画像を登録してみました。
1x1.trans

同じように4つの商品を登録しました。
1x1.trans

次は、ワードプレスのダッシュボードに戻り、画面左側の「外観」をクリックします。そして、Shop Isleのテーマのサムネイルにカーソルを合わせます。「テーマの詳細」という表示が出ますので、クリックしてみましょう。
1x1.trans

Shop Isleについての説明が表示されます。ここで確認しておくのは画面右下の部分です。
1x1.trans

“”タグ: 2列, 1列, グリッドレイアウト, 右サイドバー, カスタム背景, カスタムカラー, カスタムヘッダー, カスタムメニュー, アイキャッチ画像, 全幅テンプレート, フッターウィジェット, テーマオプション, 翻訳対応, e コマース, ブログ, ポートフォリオ, スレッドコメント””

上記の引用の部分がテーマごとに違いがあります。これがShop Isleの主要なデザインの要素・機能・設定することが可能な項目となっています。これらを確認することで、テーマをインストールした時に、どのようなものがあるのか、すぐに確認することが可能です。

外観・カスタマイズ

次はインストールしたテーマのカスタマイズをします。先ほどと同じように、ダッシュボードの左側の外観をクリックして、「有効化:Shop Isle」の文字列の右側にある青地白文字の「カスタマイズ」をクリックします。

カスタマイズ

カスタマイズをクリックすると、下記の画面に移動します。これがワードプレスのテーマ「Shop Isle」をカスタマイズする画面です。一般的にカスタマイズと聞くと、もともとあるプログラムやコードを改変したり、改造するイメージがありますが、ワードプレスでは表示される文字列や配置など、テーマごとに設定できる項目を変更することを意味します。
1x1.trans

プロ版を表示

プロ版は有償版のことです。今回は有償版機能の説明はしませんので、どのような項目があるのかだけ、掲載しておきます。
1x1.trans

  • 強化されたカート
  • サイトのすべての配色対応を入手
  • セクションの並べ替え
  • Add New Sections
  • マップセクション
  • サービスセクション
  • クイックビュー機能
  • カテゴリーセクション
  • サポート

プロ版にする目安としては、商品が売れるようになり、安定してから、という考え方もありますし、企業やもう既にお店として存在していて、ECショップを新たに展開ということであればその時点で購入するというのも手です。どちらにしても、やりたいことが達成できるかどうかを購入する際の判断の材料としてください。

サイト基本情報

カスタマイズに戻り、サイト基本情報をクリックすると下記の画面に遷移します。
1x1.trans

上記の画面に移動しました。ここがShop Isleのタイトルやキャッチフレーズ、ロゴを設定することが可能です。項目についてひとつひとつ見てみましょう。

  • サイトのタイトル
  • キャッチフレーズ

サイトのタイトルはWEBサイトの名前、キャッチフレーズは空欄が良いでしょう。理由は下記のページを参照下さい。
一般設定の使い方

サイトのタイトルについては、ここは何をするところなの?どんなサービスなの?その疑問にすぐに答えることで、ユーザーに安心感を与えることが出来ます。

  • サイトアイコン

サイトアイコンはサイトのアプリとブラウザーのアイコンとして使用されます。アイコンは正方形で、幅・高さともに 512 ピクセル以上である必要があります。

こちらについてはワードプレスのコミュニティなどで表示されるアバターだと考えて頂ければわかりやすいですね。同時にサイトのロゴの設定としても扱われているようです。きちんと設定しておくことで、見に来たユーザーに覚えてもらいやすくなります。必ず設定するようにしましょう。

カスタマイズに戻り、次は色の項目をクリックします。ヘッダーテキスト色と背景色の設定が出来ますね。ここでもプロ版の機能についてのリンクがあります。
1x1.trans

ヘッダー

カスタマイズに戻り、次はヘッダーの項目をクリックします。
1x1.trans

「新規画像を追加をクリックした後に、好きなように画像を切り取ることができますが、お使いのテーマはヘッダーのサイズとして 1200 × 280 ピクセルを推奨しています。」

ここでのヘッダーの画像はブログ一覧のヘッダー画像です。

また、下記のように画像内に表示する文字列が設定できます。ワードプレスでカスタマイズする時にひとつひとつを細かく設定できるので、後からここだけ直したい!というのがとても簡単です。そして逆に細かく設定できない部分については把握してく必要があるということも覚えておきましょう。
1x1.trans

フロントページセクション

カスタマイズに戻り、次はフロントページセクションの項目をクリックします。
フロントページ(トップページ)のデザインや文字の設定が出来ます。
1x1.trans

  • 大きなタイトルセクション
  • バナーセクション
  • 商品セクション
  • 動画セクション
  • 商品スライダーセクション

画面が移動すると上記のように表示されます。ここでもプロ版についての項目表示がありますね。無料で利用できる項目をひとつひとつ見てみましょう。

大きなタイトルセクション

まずは大きなタイトルセクションをクリックしてみます。

1x1.trans

  • 大きなタイトルセクションを非表示にします。
  • タイトル
  • サブタイトル
  • ボタンラベル
  • ボタンリンク

現在の設定ではトップに大きな画像で目を引きやすくなっています。そこに表示される文字列をここで設定できるということですね。

次に大きなタイトルセクションを非表示にしますにチェックを入れてみましょう。
1x1.trans

トップの大きなタイトルセクションが非表示になりました。このようにチェック一つ入れるだけで、デザインが大きく変わることがわかります。

一つ前の画面に戻り、バナーセクションをクリックしましょう。

バナーセクション

1x1.trans

  • バナーセクションを非表示にします。
  • セクションタイトル
  • 新しいバナーを追加
  • 新規フィールドを追加

ここでは大きいタイトルセクションの下の部分の設定が出来るようです。新しいバナーや新規フィールドを作り、自分らしいワードプレスを構築できると言えますね。

試しにバナーセクションを非表示にします。にチェックを入れてみます。
1x1.trans

トップの大きな画像の下のバナーセクションが非表示になりました。今回は元に戻しておきます。一つ前のページに戻りましょう。

商品セクション

1x1.trans

  • 商品セクションを非表示にする。
  • セクションタイトル
  • WooCommerce ショートコード(WooCommerce ショートコードを追加)
  • 商品カテゴリー(または商品カテゴリーを選択します。ショートコードとカテゴリーのいずれも登録されていない場合、 WooCommerce の新着商品を表示します。)

セクションタイトルが今表示されている「最新の商品」になっています。ここで設定できるということがわかりました。

また、カテゴリーの設定が反応しない場合があります。その場合はショートコードを使いましょう。動作確認のためとにかくトップページに商品を表示させてみたい、という方は下記のショートコードを上のWooCommerce ショートコード欄に下記のコードを貼り付けて下さい。

[recent_products per_page=”9″ columns=”3″]

WooCommerceのショートコードについてとても細かく書かれている記事がありましたので、細かい設定は下記のリンク先を参照下さい。

https://s-pegasus.com/woocommerce%E3%81%A7%E7%99%BB%E9%8C%B2%E3%81%97%E3%81%9F%E5%95%86%E5%93%81%E3%82%92%E4%BD%95%E5%87%A6%E3%81%A7%E3%82%82%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%B3/

商品セクションを非表示にする。にチェックを入れて非表示にしてみましょう。
1x1.trans

最新の商品の部分が非表示になることがわかりました。元に戻して一つ前の画面に戻ります。

動画セクション

次は動画セクションをクリックしてみましょう。
1x1.trans

動画セクションについてここで設定出来ることがわかります。サムネイルなどを上手に使うことも大切です。ここでも非表示にする設定があるので、ページビューやアクセス解析などを行いながら色々と試行錯誤してみましょう。一つ前の画面に戻ります。

商品スライダーセクション

次は商品スライダーセクションをクリックします。
1x1.trans

  • フロントページで、商品スライダーセクションを非表示にする。
  • 商品個別ページで、商品スライダーセクションを非表示にする。
  • セクションタイトル
  • セクションのサブタイトル
  • 商品カテゴリー(カテゴリーを選択しない場合、1つ目のカテゴリー内の WooCommerce の商品を表示します。)

フロントページで、商品スライダーセクションを非表示にするにチェックを入れてみます。
1x1.trans

先程まで下部にあった特別な商品というセクションが消えました。ここではフロントページだけでなく、商品個別ページでのスライダーを利用しこのセクションの非表示も設定できます。サイトの雰囲気や取り扱う商品、そしてデザインのバランスを見て表示するべきかどうかを考えるようにしましょう。元に戻してカスタマイズのトップに戻ります。

フッター

ここではページの一番下、フッターの設定が行えます。
試しに新しいソーシャルアイコンを追加をふたつクリックしてみます。
1x1.trans

下記のようにフェイスブックとツイッターの設定が出来ますね。
1x1.trans

次はサイト情報を非表示にするの部分にチェックを入れます。
1x1.trans

小さく表示されていた項目が非表示になっていることがわかります。元に戻して、カスタマイズのトップに戻りましょう。

高度なオプション

1x1.trans

  • プリロードを無効化します。
  • 背景画像
  • タイトル(404 エラー)
  • テキスト(リクエストした URL は見つかりません。<br>その他の情報はありません。)
  • ボタンリンク
  • ボタンラベル
  • ホームに戻る

ここでは404ページの設定やホームへ戻るなどのボタンの設定ができるようですね。商品の在庫がなくなったり、新しくなってページを非表示にした場合、リンクなどを辿ってきたユーザーが困らないように404ページはとても大切です。場合によっては「こちらのページにあった商品は販売が終了しました。ありがとうございます。」のようなページ作成することも検討しても良いのではと考えます。カスタマイズのトップに戻りましょう。

背景画像

次は背景画像をクリックします。ここでは背景画像の設定などを行うことができますね。設定項目を表示するために試しに無料画像にて背景画像を設定します。
1x1.trans

下記のようにアップロードされたものをクリックし画像の選択を押します。
1x1.trans

下記のように左側サイドバーに変化が出ます。商品ページに移動し、プリセットをフルスクリーンにしてみました。Shop Isleではフロントページでは背景画像の設定よりも大きなタイトルセクションの画像の方が優先となるようです。
1x1.trans

元に戻して、カスタマイズのトップに戻ります。

お問い合わせページ

次はお問い合わせページをクリックしてみます。
1x1.trans

お問い合わせページをカスタマイズするには、まずあなたがこの目的のために使用したいページのテンプレート「お問い合わせページ」を選択する必要があります。その後、ブラウザでそのページを開いて、上部のバーに「カスタマイズ」を押してください。

更なる情報はこちらのドキュメンテーションをご覧ください。

上記のように表示されました。指示通りにしてみましょう。

管理画面の固定ページ一覧でお問い合わせページを作成します。
1x1.trans

そして右側のサイドバーのテンプレートの部分をお問い合わせテンプレートに変更します。
変更したらサイドバー右側の更新(または公開)をクリックします。
1x1.trans

更新を押したあと、固定ページを更新しました。という文字列の右側のページを表示をクリックします。

お問い合わせページが表示されました。画面上部のカスタマイズをクリックします。
(下記画像では画像が切れてしまい「カスタマイズ」の文字が見えません。「ホーム」と書かれた文字の上の方にあります。)
1x1.trans

テーマのカスタマイズのページに移動しました。お問い合わせページをクリックしてみましょう。
1x1.trans

先ほどカスタマイズから直接お問い合わせページをクリックした時とは表示が違います。これで変更できることがわかりますね。
1x1.trans

※このカスタマイズの表示には「お問い合わせページを開いた状態でカスタマイズを開く」といった条件が必要です。

  • お問い合わせフォームのショートコード(フォームを作成し、生成されたショートコードをここに貼り付けます。)

こちらはお問い合わせ用のプラグインをインストールし、設定し、そのショートコードを貼り付けて下さい。という意味です。Contact form7は動作しましたが、MW WP Formは動作しませんでした。

  • マップショートコード(このセクションを使用するには Intergeo Maps プラグインをインストールして地図を作成し、生成されたショートコードをここに貼り付けます。)

ここにもショートコードを設定できる項目があります。プラグインのインストールを促す文字列があるので、利用してみるのも面白いかもしれません。カスタマイズのトップに戻ります。

メニュー

メニューの項目をクリックします。
1x1.trans

  • メニューの位置
  • トップメニュー
  • ソーシャルリンクメニュー

項目が3つあることがわかります。ひとつずつ見てみましょう。

メニューの位置

1x1.trans

  • お使いのテーマは1つのメニューに対応しています。使用したいメニューを選択してください。
  • 「カスタムメニュー」ウィジェットを利用してウィジェットエリアへメニューを配置することもできます。
  • メインメニュー

メインメニューのプルダウンは「トップメニュー」と「ソーシャルリンクメニュー」が選べるようになっています。

試しにソーシャルリンクメニューに変更してみます。
1x1.trans

ページ上部の右側の部分がソーシャルリンクメニューに変更できました。次はトップメニューに変更してみます。
1x1.trans

最初に表示されていた固定ページとは違う、トップメニューに設定されている項目が表示されました。元に戻して一つ前のページに戻ります。

トップメニュー

基本機能として、トップメニューの項目作成が出来たり、並べ替えが出来ます。

1x1.trans

  • トップメニュー
  • メニューを削除
  • 表示位置(メインメニュー)
  • メニュー設定(このメニューに新しいトップレベルページを自動的に追加)

トップメニューの欄は上述の通り、トップメニューの追加や並べ替え設定が出来ます。メニューを削除はメニューが削除出来ます。

表示位置のメインメニューの部分をチェックを入れてみます。メニューの位置の項目でトップメニューを選んだ時と同じように表示されました。
1x1.trans

メニュー設定については、トップレベルページを作成した時に自動で追加するかどうかというチェックです。何か追加してすぐに表示したい場合はチェックを入れましょう。

一つ前の画面に戻ります。

ソーシャルリンクメニュー

こちらもトップメニューと同じように、項目の追加や並べ替え設定が出来ます。
トップメニューと同じような動作なので、こちらは詳しい説明は割愛させていただきます。

1x1.trans

ウィジェット

1x1.trans

こちらはフッターエリアの項目を設定できるようですね。フッターエリア1をクリックします。

画面が移動したら、スクロールしてフッターエリアを見てみます。こちらではフッターエリア1としてアクセスについてのテキストが設定されていることがわかります。
1x1.trans

一つ前の画面に戻り、フッターエリア2をクリックします。

「このサイトについて」の項目が設定されていることがわかります。
1x1.trans

このようにフッターエリアについても自由に、自分の思い通りに設定が可能ということが理解できますね。カスタマイズのトップに戻ります。

固定フロントページ

最初の方で記載した「Woocommerceを導入する」内の内容と被りますので割愛させて頂きます。

Shop Isle(ドキュメンテーション)

ドキュメント、いわゆるリファレンスです。「ドキュメンテーション」をクリックするとそのページへ遷移します。
1x1.trans

英語のページに移動しました。Google翻訳でページごと日本語にしてみましょう。
1x1.trans

わからない時は調べる。英語がわからなければ翻訳するというのも今はとても簡単です。翻訳がよくわからない場合でも、単語自体がわかるだけで理解度に違いが出ますから、ぜひ試してみてください。カスタマイズのトップに戻ります。

追加CSS

追加CSSはテーマによっての違いがないため、下記にまとめさせて頂きました。
ワードプレス・テーマ内にある追加CSSの使い方

プレビューモードの選択

画面の左下にアイコンで表示されていますね。こちらをクリックすることでそれぞれの端末での表示を確認することが可能です。

デスクトッププレビューモードに入る
1x1.trans

タブレットプレビューモードに入る
1x1.trans

モバイルプレビューモードに入る
1x1.trans

このようにテーマのカスタマイズをする時には端末ごとの見栄えをしっかりと確認することが大切です。文字数によって、パソコンだとちょうどよくても、スマホだと3行くらいになったりすることもあります。テーマやデザインはしっかりとしているのに、意外と文字列の長さや、折り返す位置などを気にしない場合がありますから、これもひとつのアドバイスとして覚えておいてくださいね。

Shop Isleをテーマ一覧から削除する

テーマを削除する時はまず別のテーマを有効化する必要があります。デフォルトのテーマなどに変更した上で、外観をクリックし、Shop Isleにマウスカーソルを合わせるとテーマの詳細という文字が表示されるのでクリックしましょう。Shop Isleについての詳細が表示されます。画面右下に赤文字で削除という文字列があるので、そこをクリックすればShop Isleをテーマ一覧から削除することが可能です。
1x1.trans

ここまでがShop Isleをインストール・カスタマイズ・削除までの手順となります。

まとめ

このテーマはECサイト・ネットショップなどが欲しいと考えた時、構築するための費用などについて悩んでいたとしたら、その気持ちを吹き飛ばしてくれる素晴らしいデザインと機能を有したものだということです。

そして何よりも、作成する中で自分の手でECサイトが作れる!商品登録をしていけば、これはもうネットショップだとすぐに実感できるのも魅力です。

それは運営するオーナーとしての自信にも繋がり、前向きに努力することを促されることも意味します。無料でこれだけできる!と感じることが出来たなら、それだけでこのテーマに出会えた価値は十分にあると思います。