Storefront テーマ: インストールおよび構成方法

公開: 2018-01-12

WordPress を使用して WooCommerce ストアを立ち上げる場合、Storefront は最も柔軟で拡張可能なテーマの 1 つです。

そのクリーンなコード アーキテクチャにより、ユーザーの間で非常に人気があり、現在 100,000 以上のオンライン ストアが WordPress テーマとして Storefront を使用しています。

WooCommerce Storefront テーマのインストール

Storefront テーマをインストールするには、WP ダッシュボードからテーマを検索する方法と、テーマを手動でアップロードする方法の 2 つがあります。

WordPress ダッシュボードを使用したインストール

Storefront をインストールする最速の方法は、WordPress ダッシュボードを使用することです。 次の手順に従って、WordPress ダッシュボードから Storefront をインストールします。

  1. [外観] > [テーマ] > [新規追加] に移動します
  2. 検索ボックスに「 storefront 」と入力して、Enter キーを押します。
  3. Storefront のスクリーンショットにカーソルを合わせます。
  4. [インストール] ボタンを選択します。
  5. アクティブ化をクリックします

Storefront の手動インストール

  1. wordpress.org から Storefront の最新バージョンをダウンロードします。
  2. [外観] > [テーマ] > [新規追加] に移動します
  3. [テーマのアップロード] をクリックし、以前にダウンロードした zip ファイルを選択します。
  4. 今すぐインストールをクリック
  5. アクティブ化をクリックします

ホームページの設定

Storefront には、よく考え抜かれた組み込みのホームページ テンプレートがあります。 そのすっきりとした構造により、オーディエンスはあなたが販売している商品を簡単に見つけることができます。

デフォルトのストアフロント ホームページ テンプレートには 6 つのセクションがあります。 ただし、必要に応じてセクションを追加または削除できます。

デフォルトのホームページ セクション:

  • ページの内容
  • 製品カテゴリ
  • 最近の製品
  • おすすめ商品
  • 人気商品
  • 発売商品
  • ベストセラー製品

ホームページ テンプレートの割り当て

ホームページ テンプレートを設定するには、次の手順に従います。

  1. [ダッシュボード] -> [ページ] に移動し、「 Home 」または好きなタイトルのページを作成します。
  2. 製品の上に表示されるウェルカム コンテンツを追加します。
  3. 右側に、「ページ属性」というタイトルのボックスがあります。
  4. 「テンプレート」ドロップダウンから「ホームページ」を選択します。
  5. [発行]または [更新] をクリックして、変更を保存します。

ホームページ テンプレートの表示

ページを公開したら、このホームページを Web サイトのフロント ページとして表示する必要があります。 したがって、誰もがあなたのウェブサイトに最初にアクセスすると、このページが表示されます。 これを設定するには、次の手順に従います。

  1. ダッシュボード > 設定 > 閲覧に移動します
  2. [ホームページの表示] で、[静的なページ] を選択します (下で選択)
  3. ホームページドロップダウンで、以前のホームページ テンプレートの割り当てページを選択します。
  4. [変更を保存]をクリックします

ストアフロント ホームページ セクションの並べ替え

フックを使用するか、ホームページ コントロールと呼ばれるプラグインを使用して、Storefront ホームページ セクションの順序を変更できます。 以下の手順に従って、ホームページ セクションを並べ替えます。

  1. ホームページ コントロールのダウンロードとインストール
  2. 外観に移動 -> カスタマイズ -> ホームページ コントロール
  3. 必要に応じて、セクションをドラッグして並べ替えます。
  4. [保存して公開]をクリックして、変更を保存します。

ナビゲーション メニューの構成

Storefront テーマでは、メニューを 3 か所に表示できます。

  1. プライマリ メニュー – サイトのロゴのすぐ下に表示されます。
  2. セカンダリ メニュー – 検索ボックスの近くのロゴの横。
  3. ハンドヘルド メニュー – モバイル デバイス用のメニュー。

メニューの設定

デフォルトでは、特定のプライマリ メニューが設定されていない場合、WordPress はすべてのページをプライマリ メニューとして表示します。 ユーザーを混乱させ、これらのページがどのようにメニューに表示されたのか理解するのに苦労することがあります。

新しいメニューを作成してページを追加する

  1. 管理パネルに移動し、[外観] > [メニュー]
  2. 上部にメニュー名フィールドがあります。 ここにメニュー名を書きます。
  3. 左側から [ページ] をクリックします (メニューにページを追加する場合)
  4. [すべて表示] をクリックして、公開されているすべてのページのリストを取得します。
  5. メニューに表示するページにチェックを入れます。
  6. ページを選択したら、[メニューに追加] ボタンをクリックします。
  7. メニュー項目をドラッグ アンド ドロップして、好みに合わせて並べ替えます。
  8. [メニューを保存] をクリックします

メニューの割り当て

メニューを作成したら、メニューを表示する場所に割り当てます。 [外観] > [メニュー] > [メニュー設定]に移動し、[表示場所] チェックボックスから場所を確認します。

メニューに製品カテゴリを追加する

  1. 管理パネルに移動し、 [外観] > [メニュー]
  2. 左上から [画面オプション]をクリックし、[製品カテゴリ]を確認します。
  3. 左ペインに [製品カテゴリ] タブが表示されます。
  4. [製品カテゴリ] タブをクリックして展開し、カテゴリを選択します
  5. 選択後、「メニューに追加」ボタンをクリックします。
  6. メニュー項目をドラッグ アンド ドロップして、好みに合わせて並べ替えます。
  7. 保存メニューをクリック

ウィジェット設定

Storefront では、3 つの異なる領域に 6 つのウィジェット領域を表示できます。

  1. サイドバー – メイン サイト コンテンツの左または右、
  2. ヘッダーの下 – サイト ヘッダーのすぐ下、コンテンツの上。
  3. フッター列 1 – フッター領域
  4. フッター列 2 – フッター領域
  5. フッター列 3 – フッター領域
  6. フッター列 4 – フッター領域

WooCommerce のセットアップ

WooCommerce のインストール

  1. ダッシュボード > プラグイン > 新規追加 > プラグインの検索に移動します
  2. 「ウーコマース」で検索してください。
  3. [今すぐインストール] をクリックします。
  4. [アクティブ化]をクリックします。

WooCommerce の設定

WooCommerce を有効にすると、ウィザードで WooCommerce をインストールするように求められます。 すべての初期設定を処理します。 6つに分かれています。

  • ページ設定– 重要なページ (ショップ、カート、チェックアウト、マイ アカウント) を自動的に設定します。
  • 店舗の場所– 店舗の場所、通貨、消費税を設定します
  • 配送– 重量単位と寸法単位を構成する
  • 支払い– 支払いゲートウェイをセットアップします。
  • テーマ– WooCommerce 互換のテーマをインストールします。
  • 準備完了 – (オプション) WooCommerce が使用情報を収集できるようにします。

WooCommerce ダッシュボードからいつでもこれらすべての設定を行うことができます。

製品を WooCommerce に追加する

  1. WordPress ダッシュボードに移動
  2. [製品] > [新規追加] をクリックします
  3. 商品名欄に商品名またはタイトルをご記入ください。
  4. エディタの下に製品の説明を書きます。
  5. ここで、製品の注目の画像を 1 つと追加の画像を製品ギャラリーにアップロードする必要があります。
  6. 右の 1 つに、「製品画像と製品ギャラリー」というタイトルのボックスがあります。
  7. 主な画像を製品画像にアップロードし、追加画像を製品ギャラリーにアップロードします
  8. [公開]をクリックします。

商品価格と属性の設定

製品価格を設定するには [ダッシュボード] > [製品] に移動し、任意の製品を選択します。 次に、製品データ セクションまでスクロールします。 すべての製品データ セクションの設定の簡単な説明は次のとおりです。

製品タイプ

  • 単純な製品: 単純な単一の製品。
  • グループ化された商品: コレクションの一部である商品。
  • 外部/アフィリエイト商品: あなたのストアに掲載されている商品ですが、実際の商品は別の場所で販売されています。
  • バリアブル商品：バリエーション（サイズ、色）のある商品
  • 仮想商品: 配送が不要な商品。
  • ダウンロード可能な製品: ダウンロード可能なファイルを提供する必要がある製品。

全般的

  • 通常価格: 通常の商品価格です。
  • 販売価格: 割引された製品価格。

在庫

  • SKU : Stock Keep Unit (SKU) は製品を追跡します
  • 在庫管理: 在庫管理を有効にする
  • 在庫状況：商品の在庫の有無。
  • バラ売り: 1回の注文で販売できます。

運送

  • 重量: 製品の重量。
  • 寸法: 製品の長さ、幅、高さ。
  • 配送クラス: 特定の配送方法に類似したタイプの商品をグループ化します。

リンク商品

  • アップセル: 商品詳細ページの下に関連商品を表示します。
  • クロスセル: 関連商品をカートページに表示します。
  • 属性: 商品のグローバル属性を選択します。

高度

  • 購入メモ: 購入完了後にお客様に送信するメモ。
  • メニューオーダー: この商品のカスタムオーダーポジションです。
  • レビューを有効にする : 商品レビューを有効または無効にします。

ストアフロントのカスタマイズ

ロゴを追加する方法

Web サイトにロゴを追加して表示するには、次の手順に従います。
1. WordPress 管理画面に移動し、外観 > カスタマイズ
2. 次に、[サイト ID] > [ロゴ] に移動します
3. [ロゴの選択] をクリックして、ロゴ画像をアップロードします。 (推奨画像サイズ: 470px X 110px)
4. [公開] をクリックします。

サイトのファビコンをアップロードする場所

ウェブサイトにファビコンを追加して表示するには、次の手順に従います。
1. WordPress 管理画面に移動し、外観 > カスタマイズ
2. 次に、[サイト ID] > [サイト アイコン] に移動します。
3. [画像を選択] をクリックして、ロゴ画像をアップロードします。 (推奨画像サイズ: 512px X 512px)
4. [公開] をクリックします。

投稿アーカイブまたはブログのレイアウトを変更する方法

  1. [外観] > [カスタマイズ] > [ブログ カスタマイザー] > [アーカイブの投稿]に移動します
  2. Post Archive Layoutからレイアウトを選択
  3. [公開]をクリックします

投稿アーカイブまたはブログ列を変更する方法

  1. [外観] > [カスタマイズ] > [ブログ カスタマイザー] > [アーカイブの投稿]に移動します
  2. アーカイブ後の列から列番号 (全幅、2 列、3 列、4 列) を選択します
  3. [公開]をクリックします

単一の投稿または記事のレイアウトを変更する方法

  1. [外観] > [カスタマイズ] > [ブログ カスタマイザー] > [単一の投稿]に移動します
  2. シングルポストレイアウトからレイアウトを選択
  3. [公開]をクリックします

フォントの変更方法

  1. [外観] > [カスタマイズ] > [一般的なスタイル] > [タイポグラフィ]に移動します
  2. フォントペアリングからフォントを選択
  3. [公開]をクリックします

WooCommerce のカスタマイズ

ショップページのレイアウト変更方法

  1. 外観 > カスタマイズ > WooCommerce > ショップページ – 製品リストに移動します
  2. 製品アーカイブ レイアウトからレイアウトを選択
  3. [公開]をクリックします

商品詳細ページのレイアウト変更方法

  1. 外観 > カスタマイズ > WooCommerce > ショップページ – 製品リストに移動します
  2. 製品アーカイブ レイアウトからレイアウトを選択
  3. [公開]をクリックします