【サンプルあり】Arkhe(アルケー)とWooCommerceでのECサイト構築をした感想レビュー

料理レシピ向けカスタマイズ
初心者

Arkheで作ったECサイトのサンプルを見たい…
必要なものって何?お金はかかるの?
ライセンスのこと知りたい…

そんな疑問に答えます。

数日前にArkheとWooCommerceでECのサンプルサイトを作ってみました。

ECサイト制作に使ったものと、ライセンスについて解説します。

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

【サンプルサイト】Arkhe+WooCommerceで作ったECサイト

【サンプルサイト】Arkhe+WooCommerceで作ったECサイト

ArkheとWooCommerceを組み合わせて制作したサンプルECサイトを紹介します。

サンプルサイト

「商品の一覧を表示させる」「カート機能」「クーポン割引」「商品レビューを付ける」、「商品を価格で並び替えて表示させる」などなど、豊富なEC機能を搭載しています。

WooCommerceプラグインは有効化するだけでECまわりの機能が使えるのが特徴。サンプルサイトでは、ボタンの色などを変更しているだけで、 WooCommerceのECサイト機能を一切編集しないで作成しました。

サンプルサイトには決済システムを導入していません
テスト目的でうっかり決済すると返金処理など手間がかかるため、決済機能を無効化しています。

ECサイト制作に必要なもの

ECサイト制作に必要なもの

ArkheとWooCommerceでECサイトを作るのに「必須なもの」「あったら良さげなもの」についてです。

かんた

それぞれまとめました。

ECサイト制作に必須なもの

プロダクト名価格ダウンロード先
Arkhe無料テーマディレクトリー
WooCommerce無料プラグインディレクトリー
Arkhe Wookit3,300円(税込み価格)Arkhe公式サイト
ECサイト制作に必要なもの

以上が必須なものです。

ArkheとWooCommerceは公式サイトから無料でダウンロードできます。ビジネス目的で利用してもお金はかかりません。もちろん、サイト制作代行時にも追加費用は不要です。

Arkhe Wookit」はArkheでWooCommerceを使えるようにするプラグインです。

料金はセール期間中で3,300円。買い切りタイプのプラグインで一度支払うだけの料金システムです。

かんた

必須なもので唯一お金がかかるのは「Arkhe Wookit」だけ。

ちなみにこのプラグインは複数サイトで使いまわし可能なライセンスです。クライアントサイトへの導入時にも追加料金はかかりません。

公式サイトのFAQにも説明があります↓

制作サイトごとにプラグインを購入しないといけないのでしょうか?

いえ、プラグインファイル自体は100%GPLライセンスですので、一度購入したプラグインは何サイトにでもご利用いただけます。

販売サイトのQ&A

「100%GPL」=「受注制作にも使える」という意味です。スプリットライセンスと大きな違いですね。

【無料】必須じゃないけどあったら良さげなもの

プロダクト名価格ダウンロード先
Arkhe Blocks無料プラグインディレクトリー
【無料】ECサイト制作にあったら良さげなもの

Arkhe Blocksは名前で想像つきそうですが、Arkhe向けのプラグインです。「アコーディオンQ&A」「セクション」などのオリジナルブロックが使えるようになります。

Arkheの開発者さんが提供している純正プラグインなので、Arkheとの相性もバッチリ。

かんた

サンプルサイトでも導入しています。

【有料】必須じゃないけどあったら良さげなもの

サンプルサイトでは使っていませんが、よりデザインをオシャレにしたい人向けなものを紹介します。

プロダクト名価格ダウンロード先
Arkhe Pro Pack6,600円 (個人ライセンス)
9,900円 (制作ライセンス)
Arkhe公式サイト
【有料】ECサイト制作にあったら良さげなもの

Arkhe Pro Packに含まれるもの

  • Arkhe Blocks Pro
  • Arkhe Toolkit
  • Arkhe CSS Editor
  • プランに応じたライセンスキー

Arkhe Pro PackはArkhe用の純正プラグインがパッケージ化されている商品です。料金は1年ごとのサブスク。

Arkhe Blocks Pro、Arkhe Toolkitは単体でも販売してますが、購入時のバージョンのみという制限付きです。つまりアップデートはできないという制限つき。

金額的にArkhe Pro Packを購入した方がだいぶ良さそうな気がしますが、いずれにしてもECサイトには必須ではありません。

以上が「ECサイト制作に必須なもの」と、「あったら良さげなもの」です。

必須

プロダクト名価格ダウンロード先
Arkhe無料テーマディレクトリー
WooCommerce無料プラグインディレクトリー
Arkhe Wookit3,300円(税込み価格)Arkhe公式サイト
ECサイト制作に必要なもの
かんた

ざっくりまとめると、購入が必要なのはArkhe Wookitプラグインだけ。

ECサイト制作の作り方

ECサイト制作のざっくりとした流れ

ArkheとWooCommerceでECサイトを作る流れをざっくり解説します。

事前準備

プロダクト名価格ダウンロード先
Arkhe無料テーマディレクトリー
WooCommerce無料プラグインディレクトリー
Arkhe Wookit3,300円(税込み価格)Arkhe公式サイト
ECサイト制作に必要なもの

テーマと必須プラグインをインストールし、有効化するステップです。

独自カスタマイズをガツガツする予定なら子テーマを用意しましょう。Arkhe Wookitを購入済みであれば、Arkheのマイページから子テーマをダウンロードできます。

Arkheの子テーマをマイページからダウンロード
かんた

まずはこれらを有効化しましょう!

パーマリンクの設定

パーマリンクの設定

「設定」→「パーマリンク」と進み、適当な設定を指定し保存しましょう。上のキャプチャ画像は「数字ベース」を選択していますが、設定はカスタム構造でも投稿名でも何でも構いません。

WooCommerceプラグインを有効化した後パーマリンクの更新をしないと、商品ページ表示されないことがあります。

WooCommerce固有のバグではなく、WordPressでカスタム投稿を登録直後によくある事象です。

設定ウィザードでの基本設定

設定ウィザードで基本設定を完了する

ダッシュボード上のメニューから「WooCommerce」をクリックし、設定ウィザートを起動します。

かんた

設定ウィザートの案内に従い、必要事項を入力していきましょう。

つまずきそうなポイントは、それほど多くありません。

ビジネスの詳細で「クライアント向けにストアの設定をしています」部分ですが、自分のサイトの場合はチェックは不要です。Web仕事でクライアントのサイト制作をしている場合のみチェックを入れましょう↓

クライアント向けに設定しています。

販売に関する設定

店舗設定を完了する

設定ウィザート後に表示される画面の案内に沿って必要な設定をしましょう。

設定項目

  1. 支払い
  2. 配送
かんた

設定は後で変更することもできます。

商品の登録作業

商品の登録作業を完了する

ダッシュボードのメニュー「商品」から販売したい商品を登録しましょう。

販売ページにユーザーがコメントや評価を投稿できるレビュー機能を設定する場合は、この編集ページ内の「高度な設定」にある「レビューを有効化」にチェックを入れます。

レイアウト周りの設定

グロナビやウィジェット機能を使って、サイトのレイアウト周りを整えるステップです。このステップには関してはWooCommerce固有の設定はありません。

ヘッダーまわりのカスタマイズについては記事後半で解説しています。

かんた

自由にデザインしましょう!

サンプルサイトの独自カスタマイズ部分について

サンプルサイトの独自カスタマイズ

Arkhet、WooCommerceにArkhe Wookitプラグインを有効化している環境であればコードの編集しなくてもECサイトを作ることができます。

紹介したサンプルサイトではフックやプラグインを使い独自カスタマイズをしています。

独自カスタマイズ

  1. カートに入っている商品の数を表示する
  2. 商品の絞り込み検索
  3. 商品の検索結果ページにサイドバーを表示
  4. ヘッダーにサブメニューを表示
  5. ヘッダーに電話番号を表示

【独自カスタマイズ】カートに入っている商品の数を表示する

まずは、カートに入っている商品の数を表示させるコードについてです。カートに入ってる商品数を「〇〇個の商品」と表示するサンプルコードは以下の通りです。

コード

<?php echo sprintf ( _n( '%d item', '%d個の商品', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?>

カートに入っている商品数だけ出力する場合のコード。

コード

<?php echo sprintf ( _n( '%d item', '%d', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?>

固定ページで作成したカートページのリンクを出力するコード。

コード

<a href="<?php echo wc_get_cart_url(); ?>カート</a>

カートに入っている商品数だけでなく、合計金額を出力するコード。

コード

<?php echo WC()->cart->get_cart_total(); ?>

数値を装飾するCSSコード。

コード

.セレクタ{
 display:block;
 color:white;
 background:red;
 border-radius:50%;
 width:30px;
 height:30px;
 line-height:30px;
 font-size:15px;
 text-align:center;
}

セレクタは任意のものを指定してください。

ふわふわサイズを変化するアニメーションコード。

コード

.セレクタ{
 animation: kanta-icon 8s ease infinite;
}

@keyframes kanta-icon {
  20% { 
 transform:scale(1,1);	
	}
  50% { 
 transform:scale(1.2,1.2);	
	}
	  70% { 
 transform:scale(1,1);	
	}
}

【独自カスタマイズ】商品の絞り込み検索

【独自カスタマイズ】商品の絞り込み検索

トップページと、サイドバーに商品を複数の条件で検索できる「絞り込み検索機能」を実装しました。

WooCommerceにはカテゴリーとタグはあるんですが、こだれだけだとやりたい分類ができないので、別途タクソノミーを付けて検索キーを増やしました。

追加したタクソノミー

  • 項目
  • こだわり条件
  • ライセンス

追加した独自タクソノミーで絞り込み検索できるよう、サンプルサイトでは有料プラグインのVK Filter Search Proを導入しました。

かんた

絞り込み検索については詳しくは次の記事で紹介しています。

【独自カスタマイズ】商品の検索結果ページにサイドバーを表示

商品の絞り込み検索の結果ページの表示はサイドバーのない1カラムレイアウトです。サンプルサイトでは他のページ同様にサイドバー有りのレイアウトにしました。

コード

add_filter('arkhe_is_show_sidebar', function( $show_sidebar ) {
    if ( is_search() ) {
        return true;
    }
    return $show_sidebar;
});

【独自カスタマイズ】ヘッダーにサブメニューを表示

【独自カスタマイズ】ヘッダーにサブメニューを表示
ヘッダーにサブメニューを表示

ヘッダー部分に以下のページへの導線となるサブメニューをarkhe_header_bar_contentフックを使い表示させました。

サブメニューのリンク

  • プライバシーポリシー
  • キャンセル・返金
  • サイト運営者情報

サブメニューはECやコーポレートだと定番なデザイン。グロナビに入れるほど優先順位が高くないページへの導線として便利ですよね?

Arkheにはヘッダーまわりの独自フックがあるので、テンプレートファイルを編集しなくてもサブメニューを表示させることができます。

かんた

サブメニューカスタマイズの詳細は次の記事で紹介しています。

【独自カスタマイズ】ヘッダーに電話番号を表示

【独自カスタマイズ】ヘッダーに電話番号を表示
ヘッダーに電話番号を表示

コーポレート型デザインの定番、電話番号をヘッダーに表示させました。

このカスタマイズもフックを使っています。テンプレートファイルを直接編集してしまうと、テーマのアップデートで設定が消えてしまいますが、フックなら安心です。

Arkheのヘッダー部分には「arkhe_header_bar_content」、「arkhe_header_left_content」、「arkhe_header_right_content」の3つのフックが通っているのでアレンジしやすいと感じました。

かんた

ヘッダーに電話番号を表示するカスタマイズは次の記事で紹介しています。

まとめ

WordPress無料テーマ「Arkhe」と、ECサイトプラグイン「WooCommerce」を作ったサイト制作事例を紹介しました。

ECサイト制作に必須なものは以下の通りです。

必須なもの

プロダクト名価格ダウンロード先
Arkhe無料テーマディレクトリー
WooCommerce無料プラグインディレクトリー
Arkhe Wookit3,300円(税込み価格)Arkhe公式サイト
ECサイト制作に必要なもの
かんた

お金がかかるのは Arkhe Wookitプラグインのみ。

その他有料のArkhe Blocks Pro、Arkhe Toolkit、それらをパッケージしているArkhe Pro Packは必須ではありません。デザインをオシャレにしたい場合のみ購入しましょう。

Arkheを今回初めて使ってみましたが、かなり使いやすいなと感じました。オリジナリティーを出すためにはプログラムの知識が必要になるので、プログラムの知識のある人向けといったテーマ。

HTML+CSSの基本的知識のほか、PHPでフックを書けるひとなら数時間でECサイトが作れます。ぜひArkheでのECサイト制作にチャレンジしてみてください!

よかったらシェアしてね!
  • URLをコピーしました!
目次