HOME  /Welcart
 /welcart 商品リストを価格順に並べるカスタマイズ
2020年09月06日

welcart 商品リストを価格順に並べるカスタマイズ

ここではWelcart商品を価格順に並び替える方法を解説します。

1.wp_queryの事前知識

wp_queryで数値をキーにソートしたい場合は、下記形式で指定します。

$args = array(
  	'meta_key'       	=> 'price',
  	'orderby'   		=> 'meta_value_num',
  	'order'     			=> 'asc',
  	);
	$products = new WP_Query( $args );

①「meta_key」にメタデータの「カスタムフィールド名」を指定します。

WordPress には投稿にカスタムフィールドを追加できる機能があります。

このカスタムフィールドデータをメタデータと呼びます。

上記ではこのメタデータの中の「price」を指定しています。

②「orderby」を「meta_value_num」にすると「meta_key」で指定したフィールドのデータ「price」で並び替えをして下さいという指定になります。

③並び順は下記になります。

order=>asc  :安いもの順

order=>desc:高いもの順

上記の様な指定方法をすると価格データでソートできるのですが、Welcartの価格情報はWordPressのDBの中にありません。

そこでWelcartの価格情報をWordPressのメタ情報の中にも持たせれば、上記を使ったソート抽出が可能になります。

 

2.Welcart文書にマニュアルでカスタムフィールドを作成する方法

1.カスタムフィールドを見える様にする。

メニュの「Welcart Shop → 商品マスタ」を開いて下さい。

画面の右上にある「表示オプション」を開いて「カスタムフィールド」に✔を付けます。

そうする画面の下にカスタムフィールドが表示されます。

■カスタムフィールドの「新規追加」でカスタムフィールドを作成し、値を入力します。

 

2.マニュアル入力の問題点

上記の入力方法では大変な作業になる上に、ミスを発生します。

そこでWelcartの「アクションフック関数」を使って、商品を「登録/更新」した時点で上記のカスタムフィールドを自動作成作成させる方法がお勧めです。

 

3.関数の作成

1.functions.phpへの記述

/* メタデータに価格情報を書き込む */
	get_template_part('func/welcart/setting/add_meta_key');

 

2.func¥welcart¥settiong¥add_meta_key.phpへの記述

function add_meta_key() {
    $id = get_the_ID();                             //ポストIDの取得
    $price = usces_the_firstPrice( 'return' );//welcartの売価の読み込み

    get_post_meta( $id );						  //WPメタデータの読み込み
    update_post_meta( $id, 'price', $price );//WPメタデータに売価を追加/更新
    }
add_action( 'save_post', 'add_meta_key' );

上記で使っている関数は下記になります。

関数 解説
get_the_ID() wp関数。現在の投稿のID(数値)を取得します。
usces_the_firstPrice( ‘return’ ) Welcart関数。先頭のSKUの売価を取得・表示する
‘return’を指定すると値を取得します。
get_post_meta( $id ) その投稿に関するすべてのカスタムフィールドの値を配列として返します。
update_post_meta( $id, ‘price’, $price ) 指定した投稿に存在するカスタムフィールドの値を更新します。
get_post_meta( $id )でこのカスタムフィールが無い場合は新規追加
get_post_meta( $id )でこのカスタムフィールがある場合は更新になります

 

3.関数柵瀬後に行う事

関数を作成したら、全商品を呼び出して「更新」ボタンを挿入します。

上記関数が正常に動いていると「カスタムフィード」に「price」データが作成されます。

追加されたか否かを確認して下さい。

 

以上でWp_Queryを使った価格でのソートが可能になりました。

 

3.上記を利用したリストプログラム

上記の仕掛けを使って作成したリスト関数は下記になります。

 「関連商品リストの抽出とslickによるスライド

 「カテゴリーの商品リストの抽出とslickによるスライド

 「キャンペーン商品の設定と商品リスト

 

4.その他の情報

上記の例はwp_queryでメタ情報を利用する方法を解説しましたが、任意のカスタムデータをプログラムで読み出すWP関数は下記になります。

関数名 解説
get_post_meta($post_id, $key, $single) キーを指定して値を取得する
$post_id:投稿ID
$key     :取得したいキー
$single  :trueは値を取得、flaseは配列で取得
get_post_custom($post_id) カスタムデータを配列で取得する
$post_id:投稿ID

 

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「wecart」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

welcartで用意されている業務パックデータの表示関数はwhile(usces_have_skus())ループの中でしか使えません。しかしforeachの方がカウンター処理がしやすいのでこれが使える業務パックデータの表示関数を作成しました。

Welcartでは業務パック割引(購入数量割引)という機能があります。この機能を使うとカートページにGPマークが表示させますがこのマークを任意のアイコンに変更する方法を解説しています。

カートに商品を投入すると、商品名は①商品名②商品コード③SKU名④SKUコードを合わせた文字列が商品名として表示されます。これをカスタマイズする方法を解説しています。

Welcartのカートへの投入ボタンのプログラム解説と、色と文字を変更する新しい関数の作成方法を解説しています。

welcart_basicのオプション表示は、入力必須をチェックしてもユーザから見て判りません。またチェックボックスやラジオボタン表示に一部、おかしい所があります。ここではこれらの修正方法を解説しています。

Welcartにはポイントを付与し、商品購入時にそのポイントを利用する仕組みがあります。又キャンペーン設定でポイントをn倍にしたり価格を値引く仕組みもあります。ここではそれらの概要と問題点及び解決策を解説しています。

Welcartでは業務パック割引(購入数量割引)という機能があります。これは、指定した数量以上を購入した場合に価格を値引く仕組みですが、業務パック割引という言葉はあまりなじみがないのでこのメッセージを変更する方法を解説しています。

Welcart_Basicの購入数量は数値入力です。しかしスマホではこのような入力方法は面倒なので+/-ボタンで購入数量が変更できる様に変更した事例を紹介しています。

Welcartでは個別商品画面に商品オプションやカスタムフィールドを追加する事ができます。ここではその追加方法を解説しています。

Welcartで個別商品表示画面から、商品マスタ編集にジャンプする事ができるとコンテンツ編集効率が飛躍的に向上します。しかしWelcartではこの機能が提供されていないのでこれを可能になる関数を作成します。

ここではWelcartのキャンペーン商品設定の方法と、設定された商品リストを表示する関数を作成する方法を解説しています

ここではWelcartの商品カテゴリを指定して商品リストする関数を作成しています。全商品、おすすめ商品、新製品及び商品カテゴリが対象となります。

ここでは売れている商品をWelcartのDBから読み出して「売れ筋商品」としてリストする関数を作成する方法を解説しています。

Welcartには関連商品という概念はありません。そこで個別商品を表示した時に、その商品と同じカテゴリの商品を「関連商品リスト」として表示する関数を作成する方法を解説します。

Welcart_basicのメニュをカスタマイズする為にはどの様な仕組みで作られているか?を知る必要があります。そこでここではメニュの仕様を解説しています。

ここではWelcart_basicのカートボタンの「色」と「文字」を変更する関数の作成方法を解説しています。

カートボタンをカスタマイズする為には、このカートがどの様に作られているのか?を知る必要があります。そこでここではその仕様について解説しています。

Welcartで会員システムを使うのであれば、ログイン後の画面に現在使えるポイント数が表示されているのが親切です。そこでここではwelcart_bascで保有ポイントが表示されるようにカスタマイズしたサンプルを解説しています。

welcart_basicの会員システムをカスタマイズする為には、この機能がどの様に作られているか?を知る必要があります。
そこでこのでは会員システムの仕組みについて解説しています。

Welcart_basicの検索機能をカスタマイズする為には、これがどの様に作られているのか?を知る必要があります。ここではその仕様を解説しています。

welcart_basicは商品だけしか検索対象としていませんが、ここではページの情報を読み込んで、カテゴリ別に検索できる様にカスタマイズする方法を解説しています。

ここでは「welcart_basic」の「category.php」がブログ用のサイドーバーが使われてない問題点を修正方法を説明しています。また「welcart_basic」がどの様な構造になっているか?も併せて解説しています。

ここではwelcartの.検索機能制限の解除、カテゴリが製品か否かの判断関数、上位カテゴリの取得関数、.商品カテゴリの取得関数の作成方法を解説しています。

ここではWelcartで用意されている関数を解説しています。

Welcartのファンクションはfunctions.phpからincフォルダにあるファンクションをインクルードしています。この辺の構造を商品表示の設定例で解説しています。

Welcartのホームページと事前に作られている固有のページを解説してます。特にカートページやメンバーページ及びお問い合わせフォームの作り方も解説しています。

WelcartはWordPressの「固定ページ」と「投稿ページ」のみで作られております。この「投稿ページ」の中に「商品」が設定されています。そこで検索機能はファンクションの中で、商品のみを検索する様な設定が定義されている為、そのままではブログ等を検索できません。

ここではWelcartの商品画像を「slick」でスライドさせる方法を解説しています。スライド方法は下記の2つを解説しています。①.slickオプションだけでスライドさせる。②slickイベントやメソッドを使ってスライドさせる。

welcart_basicのカスタマイズ→ヘッダ画像で設定したヘッダ画像を「slick」で自動スライドさせる方法を解説しています。

「slick.js」はjqueryでスライド動作を指定するプラグインです。ここでは「slick.js」のインストールから、設定方法及び「slick.js」のオプションを解説しています。またslickのメソッドやイベントの使い方の説明しています。

ここでは「Welcart basic」の子テーマの作成方法を解説しています。

Welcartの商品画像適用ルールと「Media Library Assistant」による画像管理、及び商品画像の登録方法を解説しています。

Welcartで商品登録を行う前に.Welcart Shopの「基本設定」、「配送設定」及び「.商品カテゴリ」の登録が必要で、ここではその登録方法を解説しています。

ここではWelCartの商品の登録の仕方を解説しています。

WelcartはWordPressを使った無償のe-Commerceシステムです。ここでは「Welcart」の「インストール」と無償テンプレート「Welcart_basic」について解説します。

ここでは「Welcart_Basic」の「メニュ」や「ウィジェット」及び「ヘッダ画像」の使い方を解説します。