はじめに
このテーマはWooCommerce専用の日本語テーマです。テーマを利用するための複雑な設定、沢山の余計な付加機能を極力省き、WooCommerceをシンプルに使い、シンプルなオンラインストアを構築できます。レスポンシブ対応によりあらゆるデバイスでの表示にも対応、またレティナディスプレイにも対応しています。
WooCommerceのインストール:
このテーマはWooCommerce専用テーマとして開発されています。WooCommerceがインストールされた状態から初められます。WooCommerceインストール方法はこちらの公式ドキュメントをご覧ください。 http://docs.woothemes.com/document/installing-uninstalling-woocommerce/
WooCommerceのインストールが完了した方、また既にインストール済みであれば、このマニュアルの次のページに進んでください。
テーマのインストール
テーマの最も簡単なインストール方法はWordPressの管理画面からアップロードする方法です。管理画面 > 外観 > テーマ > 新規追加 に進み「テーマのアップロード」ボタンをクリックします。「参照」からパソコン上にダウンロードしたZIPファイルを選択し、「今すぐインストール」ボタンをクリックします。そして「有効化」をすれば完了です。
その他には、サーバに自らアップロードする方法もあります。サーバにFTPで接続し、WordPressファイルの中の「/wp-content/themes/」ディレクトリの中にアップロードします。すると、管理画面 > 外観 > テーマ にテーマが表示されるので「有効化」ボタンをクリックします。
おすすめプラグイン
デモサイトで使用しているプラグイン
Responsive Lightbox:
こちらのプラグインは WordPress5.6 での動作に不具合があり、5.6にアップデートされる場合は利用できません。このプラグインを利用せずとも画像拡大機能が働きますのでこちらのプラグインを利用されている方は「無効化」してください。
Contact Form 7:
WordPressに精通されている方には説明不要のお問い合わせフォーム作成プラグイン。名実ともにNo.1のプラグインです。Google Maps Builder
GoogleMapをページ上に表示するだけのシンプルなプラグインです。ショップの所在地を表示するだけの目的にも、簡単に設定できます。テーマのセットアップ
固定ページの追加
まず、テーマ有効化と同時に「Home」という固定ページが自動的に作成されます。そしてショップブログを設定するために 管理画面 > 固定ページ > 新規追加 から「Blog」というタイトルを入力し「公開」ボタンをクリックします。
その後、管理画面 > 設定 > 表示設定 「フロントページの表示」 という項目にて「固定ページ」を選択し「フロントページ：Home」「投稿ページ：Blog」とし、ページ一番下の「変更を保存」ボタンをクリックして完了です。
これにより、トップページとする固定ページの指定、そしてブログの設定が完了しました。
ポイント:
固定ページではその他必要に応じて、お店紹介 / ショッピングガイド / 利用規約 / お問い合わせ といった一般的な固定ページを作成できます。外観のカスタマイズ
トップページ（フロントページ）
ヘッダー:
トップページにはメインとなる大きな画像を設置できます。管理画面 > 外観 > ヘッダー に進むと外観カスタマイズ画面に入ります。ここで「新規画像を追加」ボタンをクリックし画像をアップロードします。適正な画像サイズは960 × 600となります（テーマによる）が、アップロード後にそのままクロップモードになるのでお好みでクロップし「保存して公開」ボタンをクリックします。ウェルカムテキスト:
画像の下に簡単なウェルカムテキストを表示できます。管理画面 > 固定ページ > Home を開き、本文エリアに文章を入力して「更新」ボタンをクリックします。このHomeに記入したものは全て表示されますし、何もない状態でも問題ありません。特集商品:
WooCommerce内でいう「特集商品」とは、商品一覧ページにて「★」マークを付けた商品のことを指します。★がオンになった商品のうち最新3点がトップページに表示されます。もしこの表示件数を増やしたい場合、テーマ内のファイル「front-page.php」を開き、「eatured_products per_page="3"」と記述された部分を見つけ、3という数字を変更します。3カラムであれば3、6、9という数字にすることで綺麗に並びます。ニュース:
ニュースはブログ記事の最新3件が表示されます。ブログ記事でアイキャッチ画像を設定すると、ここにサムネイル画像が表示されます。メニュー設定
メニューは「ヘッダー」「フッター」「モバイル」の3つに分けて設定することができます。ヘッダーは画面上部サイトタイトルの右側に並ぶメインメニュー、フッターは画面最下部の小さな文字のメニューです。「ログイン/マイアカウント」「カート」については画面右上にアイコンとして自動表示されますので、ヘッダーメニュー内に追加する必要はありません。
「モバイル」メニューとは、スマートフォンでアクセスした場合のメニューです。スマートフォン表示では画面右上に三本線のアイコンが表示され、それをタップすると画面にオーバーレイしてメニュー項目が表示されます。スマートフォンですので縦方向スペースにも限度がありますのであまり多くの項目を並べすぎず、本当に必要なものだけ並べるように工夫してみてください。
ポイント:
メニュー項目というのは、サイト運営者側から見るとどうしても「あれもこれも見て欲しい」という欲が出て沢山の項目を並べがちです。しかし訪問者の目線は画面の中のどこか1箇所しか見ていません。項目が多ければその分ノイズが増えるだけになってしまいます。メニューには多くの項目を並べず、必要最小限の重要項目だけを数個並べるのがおすすめです。ウィジェット
wooseumテーマではウィジェットエリアを1種類しか用意していません。高機能を謳ったテーマでは画面ごとにウィジェット表示を切替えるため複数のウィジェットエリアを用意している場合もありますが、それは一見便利なようで、訪問者からすればページを移動するたびに「さっきあったものが今はない」という状態になり、ノイズとなります。ウィジェット自体を必要最小限に選定し、1種類のパターンだけを表示することで訪問者にも安心感を与え、またウィジェット設定作業もとてもシンプルとなります。
ウィジェットはWordPress純正のものやWooCommerceのもの様々ですが、私たちがオススメしたいのは「WooCommerce商品カテゴリー」「WooCommerce評価の高い商品リスト」「WooCommerce最近閲覧された商品」「最近の投稿」です。「価格フィルター」などは追加したくなりますが、実際にはよほど数百点数千点の商品を扱っていない限り、実際に買い物する立場からはほとんど役に立たないものです。
設定の一覧としてデモサイトをご覧ください。 FUJIYAMAデモサイト.
WooCommerce
ここではシンプルにデザインされたテーマでWooCommerceをシンプルに使用する方法を解説しました。しかしまだWooCommerceにはあらゆるオプションが残されており、様々な細かい設定、カスタマイズを行うこともできます。
wooseumはテーマ側の解説、サポートのみに限っていますので、WooCommerceについてはよりお知りになりたい場合、WooCommerce公式マニュアルがもっとも詳しく正しい解説書となります。
高機能なWooCommerceをバックエンドに、ミニマムなテーマでデザインすることで最高にクールなECサイトが完成するはずです。
あなたの小さなコンピュータから世界に発信する、オリジナル・オンラインストアの開店に向けもう少し挑戦し続けてみてください！
All Rights Reserved wooseum.com, Last Update: 7 Jul 2021