Welcart Basicの子テーマを作成する手順

Welcart Basicの子テーマを作成する手順

WordPressのWelcartプラグインを使ってECサイトを構築する際、Welcart Basicをベースに子テーマを作成する機会が多いので、子テーマ化する手順を備忘録として残しておきたいと思います。

Welcart Basicはシンプルでかつ無料で使えるテーマです。オリジナルデザインで制作するにしても、Welcart Basicを子テーマ化して制作することで、一旦全体が整った状態でスタートできるのでやりやすいです。

Welcart Basicの子テーマを作成する手順

Welcart Basicの購入およびアップロード

こちらからWelcart Basicを購入します。購入といっても無料なので、購入する際に料金はかかりません。購入時にWelcartへの会員登録が必須となっております。

Welcart Basicの購入

Welcart Basicを購入できたらテーマファイル一式をダウンロードして、wp-content/themesフォルダにアップロードしましょう。

子テーマフォルダの作成

wp-content/themes内に、子テーマ用のフォルダを作成します。「welcart_basic_child」等、わかりやすい名前にしておくと良いかと思います。

style.cssの作成

以下の内容でstyle.cssを作成し、子テーマフォルダ内に設置します。

/*
Theme Name: Welcart Basic Child
Description: Welcart Basic Child Theme
Author: Collne Inc
Template: welcart_basic
Version: 1.0.0
*/

functions.phpの作成

以下内容でfunctions.phpを作成し、子テーマフォルダ内に設置します。

<?php
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style('parent-cart', get_template_directory_uri() . '/usces_cart.css', array('parent-style', 'usces_default_css'));
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

usces_cart.cssの作成

usces_cart.cssを作成し、子テーマフォルダ内に設置します。中身は空で大丈夫です。

functions.phpで親テーマのusces_cart.cssを読み込んでいますが、子テーマ側にもusces_cart.cssを作成しておくことで、カスタマイズが必要な時に便利です。親テーマのusces_cart.cssの内容を上書きしたい場合や変更したい場合は、子テーマ側のusces_cart.cssに記述してあげればOKです。

各CSSファイルが読み込まれる順番は、「親テーマのstyle.css→親テーマのusces_cart.css→子テーマのstyle.css→子テーマのusces_cart.css」になります。

wc_templatesのコピー

親テーマ内にあるwc_templatesフォルダを子テーマフォルダにコピーします。フォルダ内のファイルを丸ごとコピーしてください。

wc_templatesには、商品詳細ページやカートなどで使われるテンプレートが入っています。

拡張プラグインを利用する場合

上述した手順で子テーマ化は完了なのですが、拡張プラグインを利用する場合は、それぞれに用意されたCSSファイルを親テーマから子テーマにコピーします。

WCEX Slide Showcase slide_showcase.css
WCEX Order List Widget wcex_olwidget.css
WCEX Widget Cart wcex_widget_cart.css
WCEX Auto Delivery auto_delivery.css
WCEX Sku Select wcex_sku_select.css
WCEX Poplink /css/poplink.css

あとがき

商品一覧や商品詳細ページはオリジナルデザインが用意されていても、カートやマイページまできっちりデザインが用意されているケースって結構少ないんですよね。案件にもよりますが、「カートやマイページはトンマナ合わせるくらいでOKです」と言われることも多いです。

そんな時は、Welcart Basicテーマをベースにテーマを作成すると、カートやマイページが整った状態でテーマ制作をスタートできるので非常に助かります。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です