Webサイトの一部にオンラインショップのページを作る【Welcart】| cumak

2024年4月9日

Webサイトの一部にオンラインショップのページを作る【Welcart】

WordPressを用いたWebサイトの一部に販売ページを作ることになり、ウェルカートを使いました。
よく使われているプラグインなだけあって、使い方が簡単ですぐできたので、メモ的に残しておきます。

前提として、WelcartはECサイトを作成することができるサービス(プラグイン・テーマ)ですが、今回は販売ページ以外は普通のコーポレートサイトを作成します。
そのため、デザインの出来上がったテーマではなく、ショップ機能と最低限必要なものを提供しているテーマ（Welcart Basic）を使用し、その子テーマを作成していきます。

任意のオリジナルテーマにショップ機能を追加するという視点で書いていますので、
カスタマイザーを使ったカスタマイズ方法やウェルカートの管理画面設定などについては記載していません。

WordPressでサイトを作った経験のある人が、一部にオンラインショップのページを作る際に参考になれば幸いです。

プラグインの追加

プラグイン「Welcart e-Commerce」を追加します。
EC機能を提供するプラグインで、カートシステムや受注管理システムをWordPressに追加することができます。インストールすると、WordPressの管理画面でお店の設定や商品登録などができるようになります。

テーマを使う理由

基本的なことかもしれませんが、「WordPressでテーマを作った経験があるなら、プラグインを入れるだけで任意のデザインのものが作れる」と思っていると困ることが出てくると思います。
ウェルカートから配布されているテーマを使わず、「オリジナルのテーマに(ウェルカートの)ショップの機能だけを追加」することは困難です。

既存テーマを利用する理由は、オンラインショップで求められる機能が多いからです。ただ単に商品の一覧を表示したり、商品詳細のタイトルや価格を表示する…といったことだけでなく、プライスダウンの時・在庫がなくなった時・SKUが複数ある時はどうするか、カートの画面で新規登録をする時は、…など、複数の条件を判定して表示を変える必要があります。

もしデザインデータをもらっていたとしても、ECショップに必要な要素を全てデザインデータに含めてもらうのは難しいし、デザインデータにあったとしても、それをテーマに組み込むのは大変です。

基本的には、カートやログインやマイページなどショップ機能の部分はウェルカートのテーマをベースにし、デザインはCSSのみで調整できる範囲に留めるのが良いです。

今回は、オンラインショップのページ以外は自由に作成し、カートやマイページなどのショップ関連のページだけウェルカートのテーマのコードを利用する方法を書いています。

親テーマの設置

まずWelcartの親テーマを設置します。
ウェルカート公式から様々なテーマが配布されています。
有料テーマを使えばそのままでも完成されたデザインのECサイトを作ることができます。

今回は、オンラインショップの機能のみが欲しいので、無料でダウンロードできる一番シンプルなテーマ「Welcart Basic」をダウンロードします。
※アカウント登録が必要です

基本的に、親テーマは編集しません。子テーマを作成して、そちらでカスタマイズを行います。

子テーマの作成

「welcart_basic」専用子テーマ「welcart_basic-child」

「welcart_basic-child」をダウンロードします。親テーマの配布ページにリンクがあります。
これは「Welcart Basic」用の子テーマで、ほぼ親テーマを継承しているだけの子テーマです。
ですので、この子テーマをつかわず、任意のテーマのstyle.cssに「Template:welcart_basic」と書いて、welcart basicの子テーマにしてしまえば、同じことが出来ます。…が、一応今回はこの子テーマをベースとして使います。

この子テーマを使うことによって、シンプルにオンラインショップの機能だけを利用することができます。

「welcart_basic-child」のfunctions.phpに下記のようにスタイルを読み込んでいる箇所があります。

wp_enqueue_style( 'parent-style', $parent_dir . '/style.css', array(), '1.0.0' );
wp_enqueue_style( 'theme_cart_css', $parent_dir . '/usces_cart.css', array(), '1.0.0' );

style.cssは親テーマのcssです。「Welcart Basic」のトップページなど、親テーマのデザインを使いたい場合はこのままで問題ありませんが、今回のように「サイトの一部にオンラインショップのページを作る」場合は不要なので、コメントアウトしておきます。

usces_cart.cssは商品詳細ページ・メンバーページ・カートページ・商品複合検索結果一覧ページのスタイルシートです。これがないと、大まかにどういうデザインをもとにHTMLが組まれているかもわからず、さすがに不便です。たとえカートやマイページのデザインを変更したい場合でも、ベースとして使います。

商品詳細ページだけは、凝ったデザインが求められることもあるかもしれません。
その場合は、親テーマ（Welcart Basic）直下の usces_cart.css を子テーマにコピーしてきて、商品詳細のCSSのみカスタマイズすると良いと思います。
（wp_enqueue_styleで親テーマのusces_cart.cssを読み込んでいる部分をコメントアウトする必要があります）

子テーマのカスタマイズの流れ

子テーマ「welcart_basic-child」に、普段通り任意のheader.phpやfront-page.phpなどを追加していきます。
親テーマに存在するファイルと同じファイルを子テーマに作るとそちらが優先されるので、必要なファイルを作っていきます。

オンラインショップを「/onlineshop/」に作りたい場合は、固定ページに「オンラインショップ」というタイトルでページを作り、page-onlineshop.phpを作成して、そこにHTMLを書いていきます。

商品詳細ページのテンプレートは、wc_templates/wc_item_single.phpです。
ちなみにテンプレートの一覧説明は公式にあります。

wc_templatesフォルダのファイル及び usces_cart.cssは、子テーマにない場合は親テーマのファイルが読み込まれるようになっています。
wc_templatesフォルダはWelcart専用テンプレートが格納されており、子テーマに同じディレクトリ・ファイル名で作成することでカスタマイズ可能となっています。

HTMLをちょっと変えたいなどの場合、公式の一覧を見てどのテンプレかを把握し、対象のテンプレファイルを親テーマからコピーしてきて子テーマに配置→カスタマイズといった流れで進めていきます。

また、テーマ内の画像パスなど、子テーマに配置しているアセットへのパスはget_template_directory_uriではなくget_stylesheet_directory_uriを使うようにします。

WP_Queryで商品一覧を取得する方法

そもそも、商品情報がどのように登録されているのかというと、wp_postに登録されています。post_typeはpost（投稿）です。

さらに、categoryの「item」タームにすべての商品が登録されるようになっています。
つまり、商品一覧を取得するためには、postの中から「item」カテゴリの投稿を取得すれば良いです。

余談ですが、今回は普通のWebサイトで下層にオンラインショップのページを作るため、フロントページに固定ページを設定しているパターンを想定しています。

postに商品が登録されているということは、例えば「投稿」にお知らせを登録し、home.phpでその一覧をメインクエリで取得しようとすると、当然ながら商品も取得してきます。

そのため、「投稿」の一覧のみを表示させたいのであれば、category_nameのitemを含めないよう、pre_get_postsで条件を指定する必要があります。
もしくはややこしくなることを防ぐために、メイン投稿は商品用と決めてしまう方が楽かもしれません。

ちなみに、フロントページに固定ページを設定していない場合は、投稿のメインクエリでは商品のみが取得されるように親テーマでpre_get_postsが設定されているようです。
（/welcart_basic/inc/theme-customizer.phpのwelcart_basic_posts_per_page関数）

以下は、WP_Queryで商品一覧を取得するコード例です。

<?php
	$args = array(
		'post_type' => 'post',
		'category_name' => 'item'
	);
	$query = new WP_Query($args);
	if ($query->have_posts()):
?>
<div class="items">
	<?php
	while ($query->have_posts()):
		$query->the_post();
		usces_the_item();
	?>
		<div class="item">
			<div class="item-name"><?php usces_the_itemName(); ?></div>
			<div class="item-btn">
				<a href="<?php the_permalink(); ?>">商品詳細を見る</a>
			</div>
		</div>
	<?php endwhile; ?>
</div>
<?php endif; ?>

データ表示・取得などの関数は親テーマを参考にするか、公式にリファレンスがあるのでそちらを参照します。

ウェルカートを導入した時の注意点

検索について

WordPressの検索機能は、通常はページや投稿を検索することができますが、ウェルカートを導入すると、検索結果に商品しか表示されなくなります。

Welcart Basicでは、検索対象を「商品（スラッグ名：item）」に絞り込んでいるためです。解決方法は公式の「よくあるお問い合わせ」に記載されています。

「買い物を続ける」ボタンのリンク先を変更する

カートページにて、「買い物を続ける」ボタンがありますが、デフォルトではサイトトップに遷移します。
今回のように、サイトトップがショップのトップではない場合、リンク先はショップのトップに変更する必要があります。
その方法が公式に記載されていました。
フィルターフックを使ってurlを変更することができます。

まとめ

今回は簡単な物販のページを作成したのみなので細かい設定やカスタマイズはしていませんが、ECサイトを作る際に必要な機能が簡単に追加できました。
使っている人が多いので、ネットに情報が多いことや、日本製でドキュメントが日本語なのもありがたいです。

参考

Welcart Basic 公式ドキュメント

Blog