[welcart] 有料 子テーマのカスタマイズ

welcart

Welcartは、WordPressの無料で使えるショッピングカートプラグインです。基本、WordPressなのでEC-Cubeに比べアップデートもしやすいですし、テンプレートのカスタマイズもやりやすいです。また、EC-Cubeに比べ有料オプションが安い事も魅力です。

良い事ばかりではありません。2020年10月現在、php7.4は非対応です。不具合が出ます。コルネは「年内に対応します」との事。困ったものです。そうなんです。コルネは不具合の対応が非常に遅いのです。プラグインの不具合に対応して頂くまで3か月もかかった事もあります。催促もしました。待てない不具合もありますよね?その辺も視野に入れて制作しなければなりません。

有料テーマとは

無料のWelcart Basicの子テーマを販売しています。2019年1月15日から6,000円が12,000円に値上がりましたが、Welcart Basicをカスタマイズするよりも手軽なのでお勧めです。しかし有料テーマなのに、EC-cubeの無料版よりもかなり痒い所に手が届かないので、カスタマイズが必須です。Welcartタグページにも掲載しています。

支払、ダウンロードし、「外観」 → 「テーマ」から、zipファイルのまま追加し、有効にします。この子テーマは、wordpress内でのバージョンアップのお知らせがありません。またに確認が必要です。

使用環境について

  • 子テーマ:Welcart Beldad
  • プラグイン:WCEX SKU Select
  • プラグイン:価格変動拡張プラグイン Multi Price

※ カスタマイズするなら、Welcart BeldadよりもWelcart VOLLの方が楽かもしれません。

WCEX SKU Selectとは、Amazonで見た事があると思いますが、例えば、サイズや色の組み合わせよって価格が異なる商品に用いるプラグインです。省スペースで済むので見栄えが良いです。慣れるまでちょっと設定が大変です。

他の有料子テーマもテンプレートはホボ同じ構成の様です。

追加したいファイルをリンクする

カスタマイズ用のCSSとFontawesomeをheader内にリンクします。function.phpに追記します。

add_action( 'wp_head', 'add_meta_to_head' );
function add_meta_to_head() {
echo '
<link rel="stylesheet" href="', $uri = get_stylesheet_directory_uri() ,'/css/original.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
';
}

この場合は、[CSS]フォルダを作成し、中にoriginal.cssを作った場合です。私はoriginal.scssを作る事にしました。

商品ページのカスタマイズ

ココ落とし穴(?)WCEX SKU Selectを使用する場合は、通常 (/wc_templates/wc_item_single.php)とは異なるテンプレートのカスタマイズが必要です。

WCEX SKU Selectのマニュアルにも書いてあるのですが、/wc_templates/wc_sku_select.php が正解。

商品によっては、WCEX SKU Selectを使わない場合もありますよね。なので、通常のファイル(wc_item_single.php)も同時にカスタマイズが必要です。

サイドバー無しの固定ページ

[welcart]サイドバー無しの固定ページを作る で、紹介していますが。子テーマ:Welcart Beldadの場合は、ちょっと違う様です。異なる箇所は下記の通りです。他は同じ手順で進んでください。

固定ページのテンプレートを作る

page.phpが無いので、親テーマからコピーする必要があります。削除する部分は同じです。no-sidebar.phpとか名前を付けます。

<?php get_sidebar('other'); ?>

固定ページを作成します。例として、デフォルトのプライバシーポリシーを使う事にします。ページIDは、privacy-policyです。覚えておいて下さい。ページテンプレートで「no-sidebar」を選択して保存。このままでは、サイドバーが表示されないだけで配置が変な状態です。

headerの書き換え

<?php
if (  is_front_page() || is_single() && usces_is_item() || welcart_basic_is_cart_page() || welcart_basic_is_member_page() ) {

ページIDの部分を書き足します。先ほどのページID privacy-policyを書き足した例です。ページIDの部分もIDを書けば、2ページが1カラムになります。

<?php
if (  is_front_page() || is_single() && usces_is_item() || welcart_basic_is_cart_page() || welcart_basic_is_member_page() || is_page(array('ページID','privacy-policy')) ) {

サイドバーの編集

Topページのサイドバーの有無は「カスタマイズ」設定画面から選択できますが、カテゴリーページなどは、サイドバーが付いています。カレンダーが標準装備されていて、どこから編集するのか分かりませんでしたが、「外観」 → 「ウィジェット」の「サイドバー1」に何かを登録する事で、カレンダーは消えてくれます。

Welcart

フッターのカスタマイズ

ウィジェットエリア

デフォルト状態が使いにくくて、私は嫌だったので作り変えました。

子テーマ:Welcart Beldadの場合、上記の記事とはテンプレートの状態が多少異なりますので、<div>の位置を確認しながらカスタマイズして下さい。

addressの部分

footer.phpをカスタマイズします。デフォルトでは社名のみで、以下のようになっています。

<p class="copyright"><?php usces_copyright(); ?></p>

以下の様にする事で、©2020 cocotiie.com と自動で年号が入る様になります。

<p class="copyright">© <?php echo date('Y'); ?><?php echo '<a href="'.home_url().'">'.get_bloginfo('name').'</a>'; ?></p>

カテゴリー登録とURL

Welcartの仕様の話です。URLが長くなってしまいがちなので、子カテゴリーを作る場合は工夫が必要です。 本来は、「商品ジャンル」の下にカテゴリーを作る様なので、長くてゴチャゴチャになります /category/item/itemgenre/大分類/小分類/商品 場合によっては、こんなに長く!

フォーラムの投稿をみて、やってみた所、商品ジャンル(itemgenre)を省いても良い様なので、 /category/item/大分類/小分類/商品になる様にします。

  • 大分類の親カテゴリーは「商品」
  • 小分類の親カテゴリーは「大分類」
  • 商品の親カテゴリーは「小分類」とします。

更にスッキリさせたいので、/category/を省きます。プラグインを使う事にしました。詳細は、[wordpress]SEOに有利 !?/category / を非表示に でご紹介しています。

パンクズリスト

簡易的ですけど、Home>商品>と続きます。例では、fontawesomeのアイコンを使用しています。

<?php $postcate = get_the_category(); ?>
<ul>
<li><a href="<?php echo home_url(); ?>">Home</a> <i class="fas fa-angle-double-right"></i> </li>
<li><?php echo get_category_parents($postcate[0]->term_id,TRUE,' <i class="fas fa-angle-right"></i> '); ?></li>
</ul>

CSSの追記

色はカスタマイザーで大雑把に一括変更できますが、イマイチの場合は個々にCSSで変更します。

リンクの点線を消す

[CSS]リンクの周りの点線を消す 参照。

ナビゲーションのcurrentの設定

現在地をメニュー上で知らせる(色が変わる)ようになっていません。幸い.current-menu-itemが振られているので、何とか出来ます。子カテゴリを設定した場合はちょっと分かりにくかったです。

ロゴとナビの距離感

子テーマ:Welcart Beldadのロゴの上、ロゴとナビゲーションの間隔って狭くないですか?PC向けのレイアウトだけ広げました。スクロールした際は、幅が狭まる様にしています。


@media screen and (min-width: 62.5em) {
.h-column{margin-top: 20px;}
.h-column .menus.list {
    padding-top: 40px;   
}
.fixed .h-column{margin-top: 0;}
}

その他、いろいろ施しました。

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください