初心者Arkheで作ったECサイトのサンプルを見たい…
必要なものって何？お金はかかるの？
ライセンスのこと知りたい…
そんな疑問に答えます。
数日前にArkheとWooCommerceでECのサンプルサイトを作ってみました。
ECサイト制作に使ったものと、ライセンスについて解説します。
【サンプルサイト】Arkhe＋WooCommerceで作ったECサイト
ArkheとWooCommerceを組み合わせて制作したサンプルECサイトを紹介します。
サンプルサイト
「商品の一覧を表示させる」「カート機能」「クーポン割引」「商品レビューを付ける」、「商品を価格で並び替えて表示させる」などなど、豊富なEC機能を搭載しています。
WooCommerceプラグインは有効化するだけでECまわりの機能が使えるのが特徴。サンプルサイトでは、ボタンの色などを変更しているだけで、 WooCommerceのECサイト機能を一切編集しないで作成しました。
ECサイト制作に必要なもの
ArkheとWooCommerceでECサイトを作るのに「必須なもの」「あったら良さげなもの」についてです。
かんたそれぞれまとめました。
ECサイト制作に必須なもの
| プロダクト名 | 価格 | ダウンロード先 |
|---|---|---|
| Arkhe | 無料 | テーマディレクトリー |
| WooCommerce | 無料 | プラグインディレクトリー |
| Arkhe Wookit | 3,300円（税込み価格） | Arkhe公式サイト |
以上が必須なものです。
ArkheとWooCommerceは公式サイトから無料でダウンロードできます。ビジネス目的で利用してもお金はかかりません。もちろん、サイト制作代行時にも追加費用は不要です。
「Arkhe Wookit」はArkheでWooCommerceを使えるようにするプラグインです。
料金はセール期間中で3,300円。買い切りタイプのプラグインで一度支払うだけの料金システムです。
かんた必須なもので唯一お金がかかるのは「Arkhe Wookit」だけ。
ちなみにこのプラグインは複数サイトで使いまわし可能なライセンスです。クライアントサイトへの導入時にも追加料金はかかりません。
公式サイトのFAQにも説明があります↓
制作サイトごとにプラグインを購入しないといけないのでしょうか？
販売サイトのQ＆A
いえ、プラグインファイル自体は100%GPLライセンスですので、一度購入したプラグインは何サイトにでもご利用いただけます。
「100%GPL」＝「受注制作にも使える」という意味です。スプリットライセンスと大きな違いですね。
【無料】必須じゃないけどあったら良さげなもの
| プロダクト名 | 価格 | ダウンロード先 |
|---|---|---|
| Arkhe Blocks | 無料 | プラグインディレクトリー |
Arkhe Blocksは名前で想像つきそうですが、Arkhe向けのプラグインです。「アコーディオン「Q＆A」「セクション」などのオリジナルブロックが使えるようになります。
Arkheの開発者さんが提供している純正プラグインなので、Arkheとの相性もバッチリ。
かんたサンプルサイトでも導入しています。
【有料】必須じゃないけどあったら良さげなもの
サンプルサイトでは使っていませんが、よりデザインをオシャレにしたい人向けなものを紹介します。
| プロダクト名 | 価格 | ダウンロード先 |
|---|---|---|
| Arkhe Pro Pack | 6,600円 （個人ライセンス） 9,900円 （制作ライセンス） | Arkhe公式サイト |
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 Wookit | 3,300円（税込み価格） | Arkhe公式サイト |
かんたざっくりまとめると、購入が必要なのはArkhe Wookitプラグインだけ。
ECサイト制作の作り方
ArkheとWooCommerceでECサイトを作る流れをざっくり解説します。
事前準備
| プロダクト名 | 価格 | ダウンロード先 |
|---|---|---|
| Arkhe | 無料 | テーマディレクトリー |
| WooCommerce | 無料 | プラグインディレクトリー |
| Arkhe Wookit | 3,300円（税込み価格） | Arkhe公式サイト |
テーマと必須プラグインをインストールし、有効化するステップです。
独自カスタマイズをガツガツする予定なら子テーマを用意しましょう。Arkhe Wookitを購入済みであれば、Arkheのマイページから子テーマをダウンロードできます。
かんたまずはこれらを有効化しましょう！
パーマリンクの設定
「設定」→「パーマリンク」と進み、適当な設定を指定し保存しましょう。上のキャプチャ画像は「数字ベース」を選択していますが、設定はカスタム構造でも投稿名でも何でも構いません。
WooCommerceプラグインを有効化した後パーマリンクの更新をしないと、商品ページ表示されないことがあります。
設定ウィザードでの基本設定
ダッシュボード上のメニューから「WooCommerce」をクリックし、設定ウィザートを起動します。
かんた設定ウィザートの案内に従い、必要事項を入力していきましょう。
つまずきそうなポイントは、それほど多くありません。
ビジネスの詳細で「クライアント向けにストアの設定をしています」部分ですが、自分のサイトの場合はチェックは不要です。Web仕事でクライアントのサイト制作をしている場合のみチェックを入れましょう↓
販売に関する設定
設定ウィザート後に表示される画面の案内に沿って必要な設定をしましょう。
設定項目
- 支払い
- 税
- 配送
かんた設定は後で変更することもできます。
商品の登録作業
ダッシュボードのメニュー「商品」から販売したい商品を登録しましょう。
販売ページにユーザーがコメントや評価を投稿できるレビュー機能を設定する場合は、この編集ページ内の「高度な設定」にある「レビューを有効化」にチェックを入れます。
レイアウト周りの設定
グロナビやウィジェット機能を使って、サイトのレイアウト周りを整えるステップです。このステップには関してはWooCommerce固有の設定はありません。
ヘッダーまわりのカスタマイズについては記事後半で解説しています。
かんた自由にデザインしましょう！
サンプルサイトの独自カスタマイズ部分について
Arkhet、WooCommerceにArkhe Wookitプラグインを有効化している環境であればコードの編集しなくてもECサイトを作ることができます。
紹介したサンプルサイトではフックやプラグインを使い独自カスタマイズをしています。
独自カスタマイズ
- カートに入っている商品の数を表示する
- 商品の絞り込み検索
- 商品の検索結果ページにサイドバーを表示
- ヘッダーにサブメニューを表示
- ヘッダーに電話番号を表示
【独自カスタマイズ】カートに入っている商品の数を表示する
まずは、カートに入っている商品の数を表示させるコードについてです。カートに入ってる商品数を「〇〇個の商品」と表示するサンプルコードは以下の通りです。
コード
<?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 Wookit | 3,300円（税込み価格） | Arkhe公式サイト |
かんたお金がかかるのは Arkhe Wookitプラグインのみ。
その他有料のArkhe Blocks Pro、Arkhe Toolkit、それらをパッケージしているArkhe Pro Packは必須ではありません。デザインをオシャレにしたい場合のみ購入しましょう。
Arkheを今回初めて使ってみましたが、かなり使いやすいなと感じました。オリジナリティーを出すためにはプログラムの知識が必要になるので、プログラムの知識のある人向けといったテーマ。
HTML＋CSSの基本的知識のほか、PHPでフックを書けるひとなら数時間でECサイトが作れます。ぜひArkheでのECサイト制作にチャレンジしてみてください！
