【WordPress】 WelcartでECサイト作成とカスタマイズ

SHARE

目次

はじめに

こんにちは
株式会社TOKOSのエンジニアのタクヤです。
今回はWordpressのプラグインのWelcartを利用したECサイト作成とカスタマイズ方法を解説します。
方法としてはWelcartが提供している無料テーマ「Welcart Basic」の子テーマを作成し、その子テーマをコードベースでカスタマイズしていくといった流れになります。
WordPressでECサイトを構築したい方にオススメの記事になっています。

対象読者

  • WordPressでECサイト制作したい人
  • Welcartで独自のデザインにカスタマイズしたい人

プラグイン・テーマ導入

プラグインの導入

まずWelcartのプラグインを導入します。 WordPressの管理画面から「Welcart e-Commerce」と検索しプラグインをインストールしてください。
※インストール後に商品をテキトーに追加してみてください。

無料テーマのインストール

次にWelcartでECサイトを作成する際に、専用のテーマがあるのでそれを導入していきます。

専用テーマは無料のものと有料のものがあるのですが、今回は無料のWelcart Basicというものを利用します。
公式サイトよりダウンロードするのですが、新規会員登録をする必要がありますのでご注意ください。

参考Welcart BasicWordPress Theme

無料テーマのダウンロードが完了したら、Wordpressの管理画面からテーマをアップロードします。

子テーマの作成

アップロードしたテーマ(Welcart Basic)をそのまま編集しても良いのですが、カスタマイズしていきたいので子テーマを作成して開発を進めていきます。

子テーマのディレクトリの作成


テーマディレクトリ内wp-content/themesに子テーマのディレクトリを作成します。 分かりやすいようにディレクトリ名はwelcart_basic_childにします。

style.css ファイルの作成

WordPressにテーマを認識させるためにstyle.cssを作成します。
style.cssにはテーマの情報を記載します。基本コピペでOKです。
Templateの部分だけ親テーマを指定する必要があるので注意してください。

/*
Theme Name: Welcart Basic Child
Theme URI: https://example.com/welcart_basic-child/
Template: welcart_basic
Version: 1.0
*/

functions.php ファイルの作成

functions.phpにはテーマの機能を記載します。 親テーマのスタイルシートの読み込みとカスタマイズ用のスタイルシート(この後作成)の読み込みを行います。

<?php
function welcart_basic_child_enqueue_styles() {
  $parent_dir = get_template_directory_uri();
  $child_dir = get_stylesheet_directory_uri();
  wp_enqueue_style( 'parent-style', $parent_dir . '/style.css', array(), '1.0.0' ); // 親テーマ全体のスタイルシート
  wp_enqueue_style( 'parent-cart-style', $parent_dir . '/usces_cart.css', array('parent-style', 'usces_default_css') ); // 商品詳細ページ・メンバーページ・カートページ・商品複合検索結果一覧ページのスタイルシート
  wp_enqueue_style( 'customize-style', $child_dir . '/customize.css', array(),'1.0.0' , 'all'); // カスタマイズのスタイルシート
}
add_action( 'wp_enqueue_scripts', 'welcart_basic_child_enqueue_styles', 9 );

カスタマイズ用のcustomize.cssの作成

テーマディレクトリ内wp-content/themesにcustomize.cssを作成します。
ここにカスタマイズ用のcssを記載していきます。

子テーマの有効化

最低限の準備が整ったので最後に子テーマを有効化します。

カスタマイズ

続いてカスタマイズをしていきます。 今回は商品詳細ページのレイアウトを変更し、CSSでデザインをカスタマイズしてみます。

商品詳細ページのテーマファイルのコピー

親テーマのWelcart Basic のテーマ内の wc_item_single.php を子テーマのディレクトリ内にコピーします。 ディレクトリ構造もそのままコピーする必要があるので、テーマ直下にwc_templatesというディレクトリを作成し、その中にwc_item_single.php を作成します。

wc_item_single.php の編集

商品詳細ページのテンプレートであるwc_item_single.php をカスタマイズをしていきます。

<?php get_header(); ?>
<main>
    <div class="l-container">
		<div class="c-product-detail">
			<div id="img-box" class="c-product-detail__img-group">
				<div class="c-product-detail__main-img-wrapper">
					<a href="<?php usces_the_itemImageURL( 0 ); ?>" <?php echo apply_filters( 'usces_itemimg_anchor_rel', null ); ?>>
						<?php usces_the_itemImage( 0, 335, 335, $post ); ?>
					</a>
				</div>
				<?php
					$image_ids = usces_get_itemSubImageNums();
					if ( ! empty( $image_ids ) ) :
				?>
					<div class="c-product-detail__sub-img-group">
						<?php foreach ( $image_ids as $image_id ) : ?>
							<a href="<?php usces_the_itemImageURL( $image_id ); ?>" <?php echo apply_filters( 'usces_itemimg_anchor_rel', null ); ?>>
								<?php usces_the_itemImage( $image_id, 135, 135, $post ); ?>
							</a>
						<?php endforeach; ?>
					</div>
				<?php endif; ?>
			</div>
			<div class="c-product-detail__content">
				<div class="c-product-detail__title-group">
					<h1 class="c-product-detail__title"><?php usces_the_itemName(); ?></h1>
				</div>
				<div class="c-product-detail__price-group">
					<div class="c-product-detail__price">
						<span class="c-product-detail__price-number">
							<?php usces_the_itemPrice_taxincluded(); ?>
						</span>
						<div class="c-product-detail__price-unit">
							<span class="c-product-detail__price-tax"><?php usces_guid_tax(); ?></span>
							<span class="c-product-detail__price-yen">円</span>
						</div>
					</div>
				</div>
				<div class="c-product-detail__form">
					<form action="<?php echo esc_url( USCES_CART_URL ); ?>" method="post" class="c-product-form">
						<?php do { ?>
							<div class="skuform c-product-form__inner">
								<?php do_action( 'usces_theme_item_single_before_options' ); ?>
								<!-- オプション -->
								<?php if ( usces_is_options() ) : ?>
									<div class="c-product-form__option-group">
										<?php while ( usces_have_options() ) : ?>
											<div class="c-product-form__option-inner">
												<div class="c-product-form__option-head"><?php usces_the_itemOptName(); ?></div>
												<div class="c-product-form__option-data"><?php usces_the_itemOption( usces_getItemOptName(), '' ); ?></div>
											</div>
										<?php endwhile; ?>
									</div>
								<?php endif; ?>
								<!-- 業務パック -->
								<?php if (usces_the_itemGpExp()): ?>
									<div class="c-product-form__gp-group">
										<?php usces_the_itemGpExp(); ?>
									</div>
								<?php endif; ?>
								<!-- 数量セレクターとカート追加ボタン -->
								<div class="c-product-detail__button-group">
									<div class="quantity c-product-detail__quantity">
										<span class="c-product-detail__quantity-prev-text">
											<?php esc_html_e( 'Quantity', 'usces' ); ?> <!-- 数量 -->
										</span>
										<span class="c-product-detail__quantity-input">
											<?php usces_the_itemQuant(); ?> <!-- input -->
										</span>
										<span class="unit c-product-detail__quantity-prev-next-text">
											<?php usces_the_itemSkuUnit(); ?><!-- 個 -->
										</span>
									</div>
									<div class="c-product-detail__button-wrapper">
										<?php if ( ! usces_have_zaiko() ) : ?>
											<span class="cart-button c-product-detail__button c-product-form-button --status-disabled">
												<?php usces_the_itemSkuButton( '在庫がありません' , 0 ); ?>
											</span>
										<?php else: ?>
											<span class="cart-button c-product-detail__button c-product-form-button">
												<?php usces_the_itemSkuButton( 'カートに入れる' , 0 ); ?>
											</span>
										<?php endif; ?>
									</div>
								</div>
								<!-- エラー文 -->
								<div class="error_message c-product-detail__error-message"><?php usces_singleitem_error_message( $post->ID, usces_the_itemSku( 'return' ) ); ?></div>
							</div><!-- .skuform -->
						<?php } while ( usces_have_skus() ); ?>
						<?php do_action( 'usces_action_single_item_inform' ); ?>
					</form>
					<?php do_action( 'usces_action_single_item_outform' ); ?>
				</div>
				<!-- 説明文 -->
				<div class="c-product-detail__description">
					<?php the_content(); ?>
				</div>
			</div>
		</div>
  </div>
</main>
<?php
get_footer();

CSSはテーマディレクトリに作成した customize.css に記載していきます。

/* コンテナ幅 */
.l-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1080px;
  padding: 0 40px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .l-container {
    padding: 0 24px;
  }
}

/* レイアウトと細部のスタイリング */
.c-product-detail {
  align-items: flex-start;
  display: flex;
  gap: 40px;
}
@media screen and (max-width: 767px) {
  .c-product-detail {
    flex-direction: column;
  }
}
.c-product-detail .c-product-detail__img-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 320px;
  position: sticky;
  top: 80px;
  flex: 1 0 40%;
}
@media screen and (max-width: 767px) {
  .c-product-detail .c-product-detail__img-group {
    position: relative;
    top: 0;
  }
}
.c-product-detail
  .c-product-detail__img-group
  .c-product-detail__main-img-wrapper {
  border: 1px solid #ecebeb;
  height: auto;
  object-fit: contain;
  width: 100%;
}
.c-product-detail
  .c-product-detail__img-group
  .c-product-detail__sub-img-group {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}
.c-product-detail
  .c-product-detail__img-group
  .c-product-detail__sub-img-group
  a {
  border: 1px solid #ecebeb;
  display: block;
  width: 100%;
}
.c-product-detail
  .c-product-detail__img-group
  .c-product-detail__sub-img-group
  a
  img {
  height: auto;
  object-fit: contain;
  width: 100%;
}
.c-product-detail .c-product-detail__content {
  align-items: flex-start;
  display: flex;
  flex: 1 0 50%;
  flex-direction: column;
  gap: 32px;
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  .c-product-detail .c-product-detail__content {
    gap: 24px;
  }
}
.c-product-detail .c-product-detail__content .c-product-detail__title-group {
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__title-group
  .c-product-detail__title {
  color: #262626;
  font-size: 32px;
}
@media screen and (max-width: 767px) {
  .c-product-detail
    .c-product-detail__content
    .c-product-detail__title-group
    .c-product-detail__title {
    font-size: 20px;
  }
}
.c-product-detail .c-product-detail__content .c-product-detail__price-group {
  align-items: center;
  display: flex;
  gap: 8px;
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__price-group
  .c-product-detail__price {
  display: flex;
  align-items: flex-end;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__price-group
  .c-product-detail__price
  .c-product-detail__price-number {
  color: #404040;
  font-size: 48px;
  line-height: 0.8;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__price-group
  .c-product-detail__price
  .c-product-detail__price-unit {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__price-group
  .c-product-detail__price
  .c-product-detail__price-unit
  .c-product-detail__price-tax {
  font-size: 10px;
  line-height: 1;
  text-align: center;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__price-group
  .c-product-detail__price
  .c-product-detail__price-unit
  .c-product-detail__price-tax
  em {
  font-style: normal;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__price-group
  .c-product-detail__price
  .c-product-detail__price-unit
  .c-product-detail__price-yen {
  font-size: 24px;
  line-height: 1;
  text-align: center;
}
.c-product-detail .c-product-detail__content .c-product-detail__form {
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__option-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__option-group
  .c-product-form__option-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__option-group
  .c-product-form__option-inner
  .c-product-form__option-head {
  color: #404040;
  flex: 1 0 25%;
  min-width: 100px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__option-group
  .c-product-form__option-inner
  .c-product-form__option-data {
  flex: 1 0 70%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__option-group
  .c-product-form__option-inner
  .c-product-form__option-data
  select {
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__gp-group {
  background-color: #fafafa;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  padding: 10px 20px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__gp-group
  dt,
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__gp-group
  dd {
  color: #404040;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-form__gp-group
  dd {
  margin-top: 10px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-detail__button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .c-product-detail
    .c-product-detail__content
    .c-product-detail__form
    .c-product-form__inner
    .c-product-detail__button-group {
    gap: 20px;
  }
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-detail__button-group
  .c-product-detail__quantity {
  align-items: center;
  color: #404040;
  display: flex;
  gap: 16px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-detail__button-group
  .c-product-detail__quantity
  .c-product-detail__quantity-prev-text {
  font-size: 16px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-detail__button-group
  .c-product-detail__quantity
  .c-product-detail__quantity-input {
  display: block;
  width: fit-content;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-detail__button-group
  .c-product-detail__quantity
  .c-product-detail__quantity-input
  input {
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  height: 60px;
  text-align: center;
  width: 120px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-detail__button-group
  .c-product-detail__button-wrapper {
  align-items: center;
  display: flex;
  flex-grow: 1;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-detail__button-group
  .c-product-detail__button-wrapper
  .c-product-detail__button {
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__form
  .c-product-form__inner
  .c-product-detail__button-group
  .c-product-detail__button-wrapper
  .c-product-detail__button
  input {
  width: 100%;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__description
  div {
  padding: 20px 0;
}
.c-product-detail .c-product-detail__content .c-product-detail__description h2 {
  color: #404040;
  font-size: 16px;
  font-weight: 400;
}
.c-product-detail .c-product-detail__content .c-product-detail__description p {
  color: #646464;
  font-size: 16px;
  font-weight: 400;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__description
  table {
  margin-top: 10px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__description
  table
  tr
  th,
.c-product-detail
  .c-product-detail__content
  .c-product-detail__description
  table
  tr
  td {
  border: 1px solid #d4d4d4;
  color: #646464;
  font-size: 16px;
  font-weight: 400;
  padding: 16px;
}
.c-product-detail
  .c-product-detail__content
  .c-product-detail__description
  table
  tr
  th {
  min-width: 120px;
}

/* ボタン */
.c-product-form-button input[type="submit"] {
  background-color: #48b24b;
  border-radius: 100vh;
  color: #ffffff;
  display: block;
  font-size: 16px;
  padding: 16px 64px;
  text-align: center;
}
.c-product-form-button.--status-disabled {
  cursor: not-allowed;
}
.c-product-form-button.--status-disabled input[type="submit"] {
  background-color: #646464;
  font-size: 16px;
  pointer-events: none;
}

Welcart独自の関数について

Welcartでは商品の価格や商品名を表示するための関数が用意されています。
数が多いので全ては紹介できないのですが、今回使ったものを一部ご紹介します。

usces_the_itemImageURL() // 商品のメイン画像のパスを表示
usces_get_itemSubImageNum() // 商品のサブ画像のidを配列で取得
usces_the_itemName() // 商品名を取得
usces_the_itemPrice_taxincluded() // 税込価格を表示
usces_guid_tax() // 税込か税抜かを表示
usces_the_itemOptName() // オプション名を表示
usces_the_itemOption() // オプションの値を表示
usces_the_itemGpExp() // 業務パックを表示
usces_the_itemQuant() // 数量セレクターを表示
usces_the_itemSkuUnit() // 商品の単位を表示
usces_the_itemSkuButton() // カートに追加するボタンを表示

終わりに

今回はWordpressのプラグインのWelcartを利用したECサイト作成とカスタマイズ方法を解説しました。
Welcartの無料テーマであるwelcart_basicの子テーマをカスタマイズすることで、独自のデザインのECサイトを構築することができます。
是非この記事を参考に、WordpressでECサイトを簡単に構築をしてみてください！

前の記事

【React】そのUseEffect, 本当にcleanup(…

次の記事

Prismaのユニーク制約に対するエラーハンドリング方法