最終更新日: 2019/07/12

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

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

1 Shop Isleとは
2 インストール
3 外観・カスタマイズ
4 Shop Isleをテーマ一覧から削除する
5 まとめ

Shop Isleとは

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

インストール

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

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

ダウンロードページが表示されますので画面右側の「ダウンロード」をクリックしてファイルを保存します。ファイルはzip形式でダウンロードされます。インストールの際もzip形式のままアップロードしますので、解凍しないようにしてください。

次にワードプレス管理画面から「外観」→「テーマ」の順で進みます。

テーマの設定画面が表示されますので、画面上に表示される「新規追加」をクリックします。

テーマの追加画面が表示されるので「テーマのアップロード」をクリックします。

ここで先ほどダウンロードしたzipファイルをアップロードします。「ファイルを選択」をクリックしてダウンロードしたzipファイルを指定してください。

ファイルの選択が完了したら「今すぐインストール」をクリックしてテーマをインストールしましょう。

インストールが完了したら「有効化」をクリックしてワードプレスにテーマを適用しておきましょう。

有効化が完了するとテーマ一覧の画面が表示されます。

ここまでがテーマをインストールする方法とインストールしたテーマを有効化する手順になります。

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

上画像がデフォルトの状態です。Shop Isleのダウンロードページにあったレイアウトとは違うレイアウトになっていますが、テーマを設定することによってデモサイトのようなネットショップ型のレイアウトにすることができます。

WooCommerceを導入する

テーマのインストールが完了したら管理画面より「外観」→「テーマ」の順に進むと画面上部に「このテーマは、以下のプラグインの利用を推奨しています: WooCommerce。」と表示されていますので「プラグインのインストールを開始」をクリックしてプラグインをインストールします。

プラグインのインストール画面が表示されますので「WooCommerceをインストール」をクリックします。

WooCommerceのインストールが完了しました。

次に管理画面より「プラグイン」をクリックします。

現段階ではWooCommerceが有効化されていないので、WooCommerceの下に表示されている「有効化」をクリックしてプラグインを有効化します。

有効化が完了するとクリック設定ウィザードが表示されますので、ここでは「後で設定します」をクリックして設定をスキップしましょう。

管理画面より「外観」→「テーマ」→「カスタマイズ」の順にクリックしてテーマのカスタマイズ画面を表示します。

カスタマイズ画面の左側のメニューを下にスクロールすると「固定フロントページ」という項目があるのでこちらをクリックします。
「フロントページの表示」のチェックマークを「固定ページ」に変更します。これはShop Isleの機能をフル利用するために必須の設定ですので必ず設定してください。
「フロントページ」では「サンプルページ」を選択しておきます。

設定が完了したらメニュー上部にある「保存して公開」をクリックして完了です。

フロントページ、投稿ページともに本文が空っぽの固定ページを予め作っておくと便利です。

下画像は予め作成しておいたサンプルページです。

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

管理画面より「商品」→「商品を追加」（現在は新規追加）の順にクリックして商品の登録画面を表示します。商品名と商品の説明、右下の商品ギャラリーを登録してみました。入力が完了したら公開をクリックします。

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

ここで補足。管理画面より「外観」をクリックします。Shop Isleテーマのサムネイルにカーソルを合わせると「テーマの詳細」と表示されるのでクリックしてください。

Shop Isleのテーマの概要が表示されます。ここで画面下の赤枠で囲んだ「タグ」に注目してください。

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

上記の引用部分はテーマごとに異なります。ここに表示されているタグはShop Isleを活用してレイアウトや細かな設定項目になります。シンプルな言い方をすると「このテーマを使ってできること」です。こちらのタグを確認することで、テーマがどのように活用できるのかが大まかに確認できます。

外観・カスタマイズ

ここではテーマをカスタマイズしていきます。
管理画面より「外観」→「カスタマイズ」の順に進んで、テーマのカスタマイズ画面を表示します。

カスタマイズ

テーマのカスタマイズ画面が表示されました。
ワードプレスのカスタマイズ画面はPHPやHTMLコードを直接編集しなくても外観を整えられるようになっています。こちらのカスタマイズ画面を使いこなすことによって、より魅力的なサイトに仕上げることができます。
プログラミングの知識のない方はこちらの使い方をマスターしましょう。

ここではカスタマイズ画面に表示されている項目を上から順に見ていきましょう。

プロ版を表示

「Shop Isle」にはより高機能な設定が簡単にできる有料の「プロ版」が用意されています。今回はプロ版の詳細説明は省略します。以下、どのような項目があるかだけ掲載しておきます。

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

プロ版を導入することで得られるメリットはカスタマイズが簡単にできるようになることと、テーマのアップデートができること、サポートが受けられることです。資金に余裕がある方などは試してみると良いでしょう。プロ版の価格は1年間のフリーアップデートがついたプランが$96.12となっています。永久アップデート対応で5つのドメインに対応した最上級のプランで$268.92となっています。

サイト基本情報

サイト基本情報をクリックすると以下の画面が表示されます。

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

サイトのタイトル：ショップのサイト名を入力します。
キャッチフレーズ：サイトのキャッチフレーズを任意で入力します。

キャッチフレーズは空欄がおすすめです。理由は下記のページで詳しく説明しています。
一般設定の使い方

サイトアイコン

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

画像編集ソフトなどでサイトアイコンを作成してアップロードすることで設定することができます。ネットショップでは見た目が大事なので設定しておくと良いでしょう。

色

ヘッダーテキスト色：サイトタイトルの文字色を設定します。
背景色：サイト自体の背景色を設定します。

プロ版はより細かい配色設定ができるようになります。

ヘッダー

ヘッダーエリアのカスタマイズ画面です。

ここで設定する画像はフロントページを固定ページに設定した時の画像ではなく、デフォルトの状態テーマを使用する際に表示されるヘッダー画像です。今回説明する使い方の場合は特に関係のない項目と思っていただいて結構です。

ブログヘッダーのタイトル：ヘッダーエリアに表示するタイトルを任意で入力します。
ブログヘッダーのサブタイトル：ヘッダータイトル下のサブタイトルを任意で入力します。

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

ネットショップの顔となるフロントページのカスタマイズ画面です。デザインや文字の設定が出来ます。

上から順に設定項目を見ていきましょう。

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

大きなタイトルセクションを非表示にします。：チェックを入れると画像ごと非表示になります。
タイトル：メインのタイトルを入力します。
サブタイトル：サブタイトルや補足を入力します。
ボタンラベル：ボタンに表示されるテキストを入力します。
ボタンリンク：ボタンをクリックした際に表示するリンク先のURLを入力します。

例として「大きなタイトルセクションを非表示にします。」にチェックを入れてみました。

トップの大きなタイトルセクションが非表示になりました。トップに大きな画像を設定したくない方や、このセクションが不要な方はチェックを入れれば簡単に非表示にすることができて便利です。

バナーセクション

バナーセクションとはタイトルセクションの真下にある3つ並んだセクションエリアのことで、このエリアのカスタマイズができます。

バナーセクションを非表示にします。：チェックを入れるとセクションを非表示にできます。
セクションタイトル：バナーエリアのタイトルを任意で入力します。
新しいバナーを追加：追加したいバナー情報を設定します。
新規フィールドを追加：新規でフィールドを追加する際にクリックします。

3列に並んだバナーエリアの設定ができます。バナーを追加する際は「新規フィールドを追加」をクリックして、「新しいバナーを追加」をクリックしてバナー情報を入力します。

例として「バナーセクションを非表示にします。」にチェックを入れてみます。

トップの大きな画像の下の3つのバナーセクションが非表示になりました。

「セクションタイトル」は分かりやすいタイトルを設定すると良いでしょう。
「新しいバナーを追加」をクリックすると以下の項目が表示されます。

画像：画像をアップロードするか画像のURLを入力します。
ボタンリンク：画像がクリックされた際に表示するリンク先のURLを入力します。
フォー都度を削除：バナーを削除します。

「新しいバナーを追加」をクリックしながら動かすことで並び順を入れ替えることもできます。

商品セクション

ここでは販売商品のレイアウトのカスタマイズができます。

商品セクションを非表示にする。：このセクションを非表示にします。
セクションタイトル：タイトルを任意で入力します。
WooCommerce ショートコード：専用のショートコードを使用する際に入力します。
商品カテゴリー：特定のカテゴリーの商品を表示したい時に設定します。

デフォルトの状態では直近で登録された商品の順番で表示されるようになっています。ブログ記事の「新着記事一覧」と同じ機能です。

WooCommerce用の用意されたショートコードを使用することで簡単にレイアウトの変更などができますので、是非活用してみてください。

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

参考記事：WooCommerceで登録した商品を何処でも表示するショートコード

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

動画セクション

動画セクションを非表示にする。：このセクションを非表示にします。
タイトル：動画のセンターにタイトルを入力できます。
YouTube リンク：YouTubeのURLを入力します。
動画サムネイル：サムネイルを設定する際に使用します。

ここでYouTubeのURLを設定すると「最新の商品」の下に動画を配置することができます。商品を使用しているイメージビデオなどを設定するとユーザーの興味を惹くことができますね。任意でサムネイルを設定することもできます。

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

フロントページで、商品スライダーセクションを非表示にする。
商品個別ページで、商品スライダーセクションを非表示にする。
セクションタイトル：タイトルを任意で入力します。
セクションのサブタイトル：サブタイトルや補足を入力します。
商品カテゴリー：スライダーに表示したいカテゴリーを指定します。

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

トップページではスライダーを表示し、個別の商品ページでは非表示にしたい場合は「商品個別ページで、商品スライダーセクションを非表示にする。」にチェックを入れることで設定できます。

フッター

ページ最下部のフッターエリアの設定ができます。
試しに新しいソーシャルアイコンを追加をふたつクリックしてみます。

Copyright：著作権情報を入力します。
サイト情報を非表示にする。：著作権情報の下にあるテーマのリンクを非表示にします。
新しいソーシャルアイコンを追加：SNSのアイコンを追加すつ際に使用します。
新規フィールドを追加：SNSアイコンを新規で追加したい時に挿入します。

アイコン：SNSのアイコン情報を入力します。
ボタンリンク：アイコンをクリックされた際のリンク先のURLを入力します。

注: 一部のアイコンが表示されない場合があります。こちらでアイコンリストを確認します。

上記URLからアイコンフォントのリストが確認できます。

サイトが表示されたらしばらく下にスクロールすると下記画像のようにSNSや主要サイトのアイコンが一覧で表示されているので、フッターエリアに表示したいアイコンのコードをコピーしてください。

フッターのカスタマイズ画面で「新規フィールドを追加」をクリックして「新しいソーシャルアイコンを追加」をクリックします。アイコンの空欄をクリックすると「Type to filter」と表示されますので、こちらにコピーしたコードを貼り付けます。すると下にアイコンが表示されますのでアイコンをクリックして設定します。

「ボタンリンク」にアイコンをクリックした際のリンク先のURLを入力すれば設定は完了です。「新しいソーシャルアイコンを追加」をクリックしながら動かすことで並び順も自由に変更できます。

高度なオプション

ここではエラーページが表示された際の設定をします。

プリロードを無効化します。：チェックでプリロードを無効化します。
背景画像：エラーページの背景画像を設定します。
タイトル：エラーのタイトルを入力します。
テキスト：エラーのメッセージを入力します。
ボタンリンク：クリックされた際のリンク先のURLを入力します。
ボタンラベル：ボタンに表示するテキストを入力します。

こちらの設定で必須な項目は「背景画像」と「ボタンリンク」です。サイトのイメージにあった背景画像とサイトのURLを設定して、万が一エラーが表示された時もスムーズにホームに戻れるようにしておきましょう。その他の設定は基本的にデフォルトのままで問題ないです。

背景画像

ここで設定する背景画像はフロントページ以下のページで反映されます。
プレビューを確認しながら画像を設定したい場合は商品ページなどフロントページ以外のリンクをクリックしてから設定しましょう。

「画像を選択」をクリックします。

メディアライブラリから好きな画像を選択するか「ファイルをアップロード」で画像をアップロードして「画像を選択」をクリックします。

「プリセット」をクリックすると画像の表示方法を変更できます。

デフォルト：通常の表示
フルスクリーン：画面一杯に表示します。
画面に合わせる：画面サイズに合わせて表示されます。
繰り返し：小さな画像などは繰り返して表示されます。
カスタム：背景画像をページと一緒にスクロールするかなど細かな設定ができます。

設定が完了したら「保存して公開」をクリックしておきましょう。

お問い合わせページ

ここでは問い合わせページの設定ができます。

ここではテーマの機能を使って予めお問い合わせページを作成しておく必要があります。

まず固定ページを作成します。ここでコンタクトフォームなどプラグインで作成したショートコードを貼り付けても問題ないのですが、今回はテーマの指示通りに設定します。

固定ページのタイトルを入力したら右側にある「テンプレート」をクリックして「お問い合わせページ」を選択します。これで、この固定ペーじがお問い合わせ用のページであることをテーマに認識させることができます。設定が完了したら「更新」をクリックします。
画面上部に「固定ページを更新しました。」と表示されるので「ページを表示」をクリックします。

お問い合わせページが表示されるので、画面上部のカスタマイズをクリックします。

カスタマイズ画面が表示されるので「お問い合わせページ」をクリックします。

お問い合わせページの詳細設定ができるようになりました。こちらに各ショートコードを入力することでお問い合わせフォームや地図を綺麗に表示することができます。

お問い合わせフォームのショートコード：プラグインで作成したショートコードを貼り付けます。
マップショートコード：プラグインで作成したショートコードを貼り付けます。

問い合わせフォームのプラグインはContact Form 7をおすすめします。使い方を簡単に説明した記事がありますので参考にしてみてください。

参考記事：ワードプレスのお問い合わせフォームの使い方とおすすめプラグイン5選

マップ用のプラグインはIntergeo Mapsを推奨していますので、そちらを使用することでスムーズに設定できます。

Google Maps Plugin by Intergeo
https://wordpress.org/plugins/intergeo-maps/

プラグインで作成したショートコードを入力して設定を完了したら「保存して公開」をクリックして完了です。

メニュー

メニューの項目をクリックします。

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

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

メニューの位置

ここではメニュー表示の設定をします。ページ上部にメニューを設定したい方はこちらから設定してください。

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

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

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

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

トップメニュー

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

「メニューを追加」をクリックします。

メニュー名を入力します。自分の分かりやすいタイトルで問題ありません。入力が完了したら「メニューを作成」をクリックします。

画面が切り替わるので「項目を追加」をクリックすると上画像のように表示されますので、予め作成しておいた固定ページやホームに戻るためのメニューをクリックして追加していきましょう。

追加されたメニューは左側に表示されます。各項目はクリックしながら動かすことで並び順も変更できます。
次に「表示位置」の「メインメニュー」にチェックを入れます。これでトップページ上部にメニューが表示されます。
「メニュー設定」の「このメニューに新しいトップレベルページを自動的に追加」は固定ページを作成する度に自動でメニューに追加される機能です。基本的にチェックは外しておいた方が良いでしょう。

設定が完了したら「保存して公開」で完了です。