Welcart カスタマイズ ブログ

「現在の注文状況」をプラグインを使わずに表示してみる

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook

楽天なんかでよく見かける「現在の注文情報」ウィジェット。

こんな感じのやつ。

Welcartでも有料プラグインのOrder List Widget（\3,000）がありますが、データベースからデータを取得する方法を勉強しがてら、ちょっと自分で作ってみました。

※PHPが多少わかる人向けです（でも、私もPHPは初級本しかやってません）。Welcartバージョン1.4以降のみ対応。

もくじ

1. データベースからデータを取得するしくみ（SQLの基礎）
   1. データの取得の基本： SELECTとFROM
   2. データの絞込み： WHERE
   3. 並び替え： ORDER BY
   4. 取得件数を制限： LIMIT
2. 直近の注文状況を表示するのに、データベースから取得したい情報
   • データの取り出し場所
3. コードの組み立て方
   1. $wpdbのグローバル宣言・テーブル名を変数に
   2. usces_ordercartより、注文番号・商品の投稿ID・商品名・商品コード・数量・金額を取得
   3. foreach内
   4. コードまとめ
4. まとめ

1. データベースからデータを取得するしくみ(SQLの基礎）

まずは、データベースではどのようにデータが格納されているか、少し把握しておく必要があります。

phpMyAdminなどでデータベースを開いてみます。左メニューはこんな感じです。

データベースの中にはいくつかのテーブルが入っています。Welcart関連のテーブルは、usces_という名前が含まれていますね。

試しに、投稿に関するテーブルpostsを開いてみます。

タイトルはpost_titleに、記事の内容はpost_contentに、それぞれ入れられています。

他のテーブルでも、様々なデータが項目毎に分けられていますが、それぞれのテーブルはpost_idなどの共通のカラムを持つことによって紐付けされるようになっています。

まさに、「ちょっと複雑なExcel」といったところです（Accessっぽいですね）。

1-1. データの取得の基本： SELECTとFROM

これらのデータは、以下のようにして取得して表示させることが出来ます。

例）投稿タイトルを全て取得して表示

$post_titles = $wpdb->get_results("SELECT post_title FROM $wpdb->posts");
foreach ($post_titles as $post_title) {
	echo $post_title->post_title;
}

1行目のSELECT～は、SQLというデータベースを操作するための言語です。PHPの入門書などにも、必ず後ろのほうに書かれています。

SELECTでカラムを選択、FROMでテーブル名を指定します。

SELECT 表示カラム FROM テーブル名

1-2. データの絞込み： WHERE

WHEREを使うと、取得したいデータの絞り込みが出来ます。

例）投稿IDが10の投稿タイトルを取得して表示

$post_titles = $wpdb->get_results("SELECT post_title FROM $wpdb->posts WHERE ID=10");
foreach ($post_titles as $post_title) {
	echo $post_title->post_title;
}

ここではWHEREに続いて、ID=10と入れました。条件は、IDでなくても、カラム名であればOK。例えば作成者IDが1のものだけを取り出すのであれば、post_author=1となります。

SELECT 表示カラム FROM テーブル名 WHERE 条件

1-3. 並び替え： ORDER BY

また、データベースから取得したデータは並び替えも出来ます。並び替えにはORDER BYを使い、昇順と降順にASCとDESCをそれぞれ使います。

例）投稿タイトルを取得して、投稿日時の新しい順（降順）で並べる

$post_titles = $wpdb->get_results("SELECT post_title FROM $wpdb->posts ORDER BY post_date DESC");

投稿日時はpost_dateというカラムに入っているので、それをORDER BYとDESCではさみます。

SELECT 表示カラム FROM テーブル名 ORDER BY 並べ替えの基準カラム DESC

1-4. 取得件数を制限： LIMIT

今回は「最新の注文状況」を表示させたいのですが、全てのデータを取得・表示していては、ページの表示速度が重くなってしまいます。

そこで使えるのが件数を制限するLIMITです。

例）投稿タイトルを10件だけ取得する

$post_titles = $wpdb->get_results("SELECT post_title FROM $wpdb->posts LIMIT 10");

LIMITの後に、取得したい件数を半角数字で記述します。

SELECT 表示カラム FROM テーブル名 LIMIT 10

とりあえず、これだけわかっていれば今日のところは十分。全てPHPの基礎本の範囲内です。

WordPressのデータベースの操作に関する説明は、以下が詳しいので一通り目を通しておくとナイスだと思います。

関数リファレンス wpdb Class – WordPress Codex 日本語版

2. 直近の注文状況を表示するのに、データベースから取得したい情報

データベースからどのようにデータを取得すればいいかわかったところで、「現在の注文状況」の表示にどんなデータを表示したいかを考えてみます。

• 商品画像
• 商品名
• 商品へのリンク
• 都道府県
• 注文日時
• 数量
• 価格

こんなところでしょうか。

これらのデータは、それぞれデータベース内での格納テーブルが異なります。

データの取り出し場所

データベースを見てみるとわかりますが、usces_ordercart（注文商品情報）とusces_order（注文者情報）の二つのテーブルを参照すれば、欲しい情報は揃えられそうです。

商品画像のURLと商品ページへのurlは、postsテーブルのguidに格納されていますが、usces_ordercartのテーブルで商品コードと投稿IDが取得出来るため、そちらを使います。

※商品画像や商品名を出力するWelcartのテンプレートタグは、ループ内で使うタグのため、今回は使えません。

3. コードの組み立て方

usces_ordercart（注文商品情報）とusces_order（注文者情報）は、共通のorder_id（注文番号）があり、紐付けされています。

今回の「現在の注文状況」では商品毎にリストを作りたいので、ここでは以下のようにしてみます。

1. usces_ordercart（注文商品情報）から商品の情報を一つずつ取り出す。
2. その商品と紐付けされている注文番号から、usces_order（注文者情報）の都道府県と注文時間を取り出す。

更に具体的にしてみると、こんな感じになります。

3-1. $wpdbのグローバル宣言・テーブル名を変数に

データベースを使うので、必ず$wpdbのグローバル宣言行います。

更に、今回使う2つのテーブル名を変数にしておきます。

global $wpdb;
$usces_order = $wpdb->prefix . "usces_order";
$usces_ordercart = $wpdb->prefix . "usces_ordercart";

$wpdb->prefixで、WordPressをインストールするときに設定したデータベースの接頭辞を取得しています。

3-2. usces_ordercartより、注文番号・商品の投稿ID・商品名・商品コード・数量・金額を取得

次に、usces_ordercartのテーブルから、一気に6つのデータを取得。

//注文番号・商品の投稿ID・商品名・商品コード・数量・金額を取得
$order_items = $wpdb->get_results("SELECT order_id, post_id, item_name, item_code, quantity, price FROM $usces_ordercart ORDER BY order_id DESC LIMIT 10");

ここでは、ORDER BYを使って、order_id（注文番号）の降順（＝新しい順）に並び替えをし、更にLIMITを使って最新の10件のみを取得しています。

3-3. foreach内

foreachの中は、このように組み立てます。

foreach ($order_items as $order_item) {
    //a. 商品コードから、商品画像を取得・出力
    //b. 商品の投稿IDから、商品ページのリンクを取得・商品名と共に出力
    //c. 注文番号から、usces_orderより都道府県・注文日時を取得・出力
    //d. 数量・金額を出力
}

a. 商品コードから、商品画像URLを生成・出力

商品のメイン画像は、Welcartであれば「商品コード.jpg」という画像名になっているはずです。

例）商品コードがabc123の時　→　メイン画像：abc123.jpg

（参考）商品画像登録 – Welcartマニュアル

これを利用して、商品コードの画像URLを作ります。

    //商品コードから商品画像を表示
    $item_code = $order_item->item_code;
    $wp_upload_dir = wp_upload_dir();
    echo '<img src="'.$wp_upload_dir['url'].'/'.$item_code.'.jpg" width="60" height="60" alt="*">';

8行目で商品コードを取得。9行目でWordPressのアップロードフォルダを取得しています。

WordPressの場合は、アップロードフォルダに画像が保存されているので、まずはwp_upload_dir();でアップロードフォルダへのパスを取得。

それに商品コードをくっつけ、更に最後に.jpgをくっつけて、画像のURLを作るという、ちょっとした荒業です。

10行目での出力結果は、

<img src="http://example.com/wp/wp-content/uploads/abc123.jpg" width="60" height="60" alt="*">

という風になります。

画像サイズや、画像のフォーマットが「.jpeg」だったりする場合は、適宜変更下さい。

    //商品コードから商品画像を取得
    $wp_posts = $wpdb->prefix . "posts";
    $item_code = $order_item->item_code;
    $item_pics = $wpdb->get_results("SELECT guid FROM $wp_posts WHERE post_title = '$item_code'");
    foreach ($item_pics as $item_pic){
        $img_url = $item_pic->guid;
        echo '<img src="'.$img_url.'" width="60" height="60" alt="*">';
    }

b. 商品の投稿IDから、商品ページのリンクを取得・商品名と共に出力

次に、商品名と、それにくっつける商品ページへのリンクを取得します。

ここでは単純に、3-1でデータベースから取り出した商品名と、商品ページ（投稿ページ）のidを使ったパーマリンクの取得タグを使います。

    //商品の投稿IDから、商品ページのタイトルとリンクを取得
    $post_id = $order_item->post_id;
    $item_name = $order_item->item_name;
    echo '<a href="'. get_permalink($post_id).'">'.$item_name.'</a>';

c. 注文番号から、usces_orderテーブルより都道府県・注文日時を取得・出力（ここでもforeach使用）

次は、注文された商品に紐づいている注文番号と一致する、注文者情報の都道府県と注文日時を取得して表示させます。

最初に注文番号を変数$order_idに代入した後、WHERE ID = $order_idを使って、usces_orderテーブルの中から同じ注文番号を持っている注文者情報を取得します。

その後はforeachを使って都道府県名と注文日時を出力するだけです。

    //注文番号から、都道府県・注文日時を取得
    $order_id = $order_item->order_id;
    $order_datas = $wpdb->get_results("SELECT order_pref, order_date FROM $usces_order WHERE ID = $order_id");
    foreach ($order_datas as $order_data){
        $order_pref = $order_data->order_pref;
        $order_date = $order_data->order_date;
        echo $order_pref　.$order_date;
    }

d. 数量・金額を出力

これで最後です。

ここは単純に、3-1でデータベースから取り出した数量と金額を出力します。

    //数量・金額を取得
    $order_qty = $order_item->quantity;
    $order_price = $order_item->price;
    echo $order_qty　.number_format($order_price).'円';

金額部分は、PHPのnumber_formatを使って、3桁毎にカンマが入るようにしています。

3-4. コードまとめ

全てのコードをまとめて、更にtableタグを使って整理してみると、こんな感じになりました。

global $wpdb;
$usces_order = $wpdb->prefix . "usces_order";
$usces_ordercart = $wpdb->prefix . "usces_ordercart";

//注文番号・商品の投稿ID・商品名・商品コード・数量・金額を取得
$order_items = $wpdb->get_results("SELECT order_id, post_id, item_name, item_code, quantity, price FROM $usces_ordercart ORDER BY order_id DESC LIMIT 10");
echo '<table>';
echo '<tr><th>写真</th><th>商品名</th><th>住所</th><th>日時</th><th>数量</th><th>金額</th></tr>';

foreach ($order_items as $order_item) {
    echo '<tr>';

    //ディレクトリから表示
    $item_code = $order_item->item_code;
    $wp_upload_dir = wp_upload_dir();
    echo '<td><img src="'.$wp_upload_dir['url'].'/'.$item_code.'.jpg" width="60" height="60" alt="*"></td>';

    //商品の投稿IDから、商品ページのタイトルとリンクを取得
    $post_id = $order_item->post_id;
    $item_name = $order_item->item_name;
    echo '<td><a href="'. get_permalink($post_id).'">'.$item_name.'</a></td>';

    //注文番号から、都道府県・注文日時を取得
    $order_id = $order_item->order_id;
    $order_datas = $wpdb->get_results("SELECT order_pref, order_date FROM $usces_order WHERE ID = $order_id");
    foreach ($order_datas as $order_data){
        $order_pref = $order_data->order_pref;
        $order_date = $order_data->order_date;
        echo '<td>'.$order_pref.'</td><td>'.$order_date.'</td>';
    }

    //数量・金額を取得
    $order_qty = $order_item->quantity;
    $order_price = $order_item->price;
    echo '<td>'.$order_qty.'</td><td>'.number_format($order_price).'円</td>';

    echo '</tr>';
}
 echo '</table>';

これに独自関数名をつけてfunctions.php内に定義して呼び出してもいいですし、テーマ内のテンプレートとして作ってget_template_part();で呼び出してもいいと思います。

また、ここでは画像にはリンクをつけていないので、追加してもいいですね（その場合はリンクを生成するコードの順番に注意）。

完成イメージはこんな感じです（5件の表示に割愛してます）。見た目はCSSで調整して下さい。

4. まとめ

プラグインを使ってしまえばなんでも楽ですが、自分で勉強しながらだとよりPHPやデータベースの学習になります、という趣旨の記事でした。

現在の注文状況を表示させると「賑わい演出」なんていう風にも言われますが、閑古鳥が鳴いているようなショップですと「寂しさ演出」にもなりかねないため、本当に賑わっているお店向けのカスタマイズですかね。

（閑古鳥が鳴いていても、例えば注文日時を表示しなければいいかも）

レビューにWordPressのコメント機能を使っているのであれば、同様の方法でコメント数をデータベースから取り出して、コメントリンクをつけてレビュー数を表示させるというのもいいと思います。

• ウィジェット関連

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook