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

スポンサーリンク

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

最近の注文リスト・楽天のショップより

こんな感じのやつ。

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などでデータベースを開いてみます。左メニューはこんな感じです。

PHPmyAdmin

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

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

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 テーブル名
ポイント
  • 取得したデータはarray(配列)で返されるため、出力する場合はPHPのforeach構文を使います。
  • $wpdbというグローバル変数を使うので、グローバル宣言も忘れず行いましょう。

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を使い、昇順と降順にASCDESCをそれぞれ使います。

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

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

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

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(注文者情報)の二つのテーブルを参照すれば、欲しい情報は揃えられそうです。

データ テーブル カラム
商品画像 usces_ordercart item_codeを使って出力
商品名 usces_ordercart item_name
商品(投稿)へのリンク usces_ordercart post_idを使って出力
都道府県名 usces_order order_pref
注文日時 usces_order order_date
数量 usces_ordercart quantity
価格 usces_ordercart price

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

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

3. コードの組み立て方

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

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

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

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

  1. $wpdbのグローバル宣言・テーブル名を変数に
  2. usces_ordercartより、注文番号・商品の投稿ID・商品名・商品コード・数量・金額を取得
  3. foreach
    1. 商品コードから、商品画像URLを生成・出力
    2. 商品の投稿IDから、商品ページのリンクを取得・商品名と共に出力
    3. 注文番号から、usces_orderより都道府県・注文日時を取得・出力(ここでもforeach使用)
    4. 数量・金額を出力

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」だったりする場合は、適宜変更下さい。

アップロードフォルダが年月別になっている場合

アップロードフォルダが年月別になっている場合は、この方法ではうまく行きません。

その場合は、postsテーブルのguidカラムに格納されている画像URLを呼び出す方法を使えばいいでしょう。こちらはデータベースを参照する分、直接URLを作る上記の方法に比べて処理速度が多少落ちると思われます。

    //商品コードから商品画像を取得
    $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で調整して下さい。

Welcartで最近の注文状況

4. まとめ

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

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

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

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

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

  1. mamekoさん。はじめまして、高野ともうします。Welcartの勉強をはじめたばかりで、mamekoさんのサイトに出会いテストサイトを作って勉強中です。mamekoさんのサイトの寄木細工のコースターセット http://demo.welcustom.net/?p=31 のページの画像のように、下の小さな画像をクリックして上に大きな画像を表示するスライダーが出来ずにつまずいています。寄木細工のコースターセットの画像をそのままお借りして、3枚ともそのままの名前で、アップロードして、商品コードをES-WD-001 にしていますができません。 どのようにすれば出来るのでしょうか?

    • まめ子(管理人) より:

      Welcartの商品画像の登録方法をもう一度確認してみては如何でしょうか。メイン画像はSUKコードを、サブ画像は枝番号をつける必要があります。

  2. こぶや より:

    はじめまして、まめ子さんのサイトはとてもためになる情報でいつも参考にさせていただいてます。
    質問ですがアップロードフォルダが年月別になっている場合の形で画像URLを呼び出していますが、それをサムネイル(たとえば60×60)のURLで呼び出したいと思っています。
    変数内で書き換えとかで出来るのかと思い調べてみたのですがなにぶん知識がなくその方法がわかりません。他の方法でも含めて画像をサムネイルのURLで呼び出す方法を教えていただけないでしょうか?

    • まめ子(管理人) より:

      画像の呼び出しのところをサムネイルにするなら、get_the_post_thumbnailを使えばかなりシンプルにいけると思います。最後のコードの14~16行目を以下のようにしてみてはいかがでしょうか。

      $post_id = $order_item->post_id;
      echo '<td>'.get_the_post_thumbnail($post_id, 'thumbnail').'</td>';

      もちろんその直後19行目の$post_id = $order_item->post_id;は、上で同じコードを書いているので不要となります。
      ご参考:テンプレートタグ/get_the_post_thumbnail

      • こぶや より:

        ありがとうございます!スムーズに修正が出来ました。本当に感謝しています。ありがとうございました!!

  3. はなぶさ より:

    いつも参考に拝読しています、前回は大変お世話になった者です。
    以前をきっかけに上記の表示も試しましたところ、うまくいき大変重宝しております。

    ただ、SKUコード当方環境下では色・サイズ(時には他の項目もあります)の追加SKUがあり、上記の項目として表示させようとしましたが、力量不足で実現できませんでした。

    具体的には以下を表示させたいのですが…

    商品、日付、数量、価格、SKUコード、付随するSKU値

    度々お手数をおかけしますが、よろしくお願いいたします。

    • まめ子(管理人) より:

      ご希望のデータがどこに格納されているか等までは確認する余裕がございませんので、アイディアとして回答させて頂きます。データを見るには、当記事のように、データベースを開く必要があります。データの場所がわかれば、当記事の1や2をご参考に、必要なデータを取り出してみて下さい。いずれにせよ、データベースのデータを理解出来るスキルや、SQLの基礎(大抵のPHPの基礎本に書かれています)が必要になるかと存じます(もし学習なさるのであれば、こちらこちらの参考書がお薦めです)。

  4. はなぶさ より:

    ご回答ありがとうございます、今後も参考にさせていただきます。

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.