『WordPress』と聞くと、ブログや企業などのウェブサイト、ポータルサイトなど、いわゆる日本で「ホームページ」と呼ばれるモノを連想される方が多いと思いますが、WordPressは非常に柔軟に設計されていますので、カスタマイズによって様々な事が出来ます。

今回、実案件でちょっとした管理システムを制作させていただいたのですが、これが自分としては、なかなかの出来で、クライアントさんにとってかなり業務効率の改善に繋がったと思うので、

“どやぁ！( ﾟдﾟ)”

“WordPressってこんな事も出来るんですよ”

って感じでご紹介したいと思います。

ちなみに今回の記事はWordPress Advent Calendar 2012に参加しています。
「クリスマスまでの間、みんなで順番にWordPressの記事を書こう」っていうイベントです。
WordPress Advent Calendar 2012経由でこの記事をご覧になった方に簡単に自己紹介しますと、企業サイト向け無料WordPressテーマ「BizVektor」を配布している中の人です(￣ー￣)

クライアントさんと、クライアントさんが抱える問題点及び要望

今回のクライアント　：　輸出業者

国内外の多くの企業から輸出の依頼を受け、製品をコンテナに詰めて海外に輸出する事業を展開

クライアントが抱える問題点

依頼を受けた企業から、積荷の出港日や到着日他、様々な問い合わせが多く対応に時間がかかる。

「この前依頼した積荷っていつ届くんでしたっけ？」

何故対応に時間がかかるのか？

• 積荷の情報を紙の伝票で管理しているので、探すのに時間がかかる
• 東京・大阪・名古屋など、複数の事業所があるが、全ての事業所に全ての伝票が揃っているわけではないので、問い合わせがあっても該当の伝票が事業所内に無い事もある。

クライアントの要望

• どこの事業所からでも全てのデータが閲覧・管理出来る
• 伝票番号や顧客名などで検索すると該当する伝票情報がすぐに調べられる
• そもそも顧客が自分で伝票番号などを入力したら閲覧出来るようにしたい
  （問い合わせがなくなるので、それに対応する工数が削減出来る）
• 顧客にとっても自社のスタッフにとっても出先などでも確認出来るようにスマートフォンでも見れるようにしたい

やりましょう！
WordPressの出番です。

「投稿」を「伝票」として扱う

普通ならWordPressの「投稿」はブログの記事などを書くのに使いますが、この「投稿」を「伝票」として扱います。一つの「投稿」が一枚の「伝票」の代わりになるわけです。

※一般の方向けに補足すると、通常WordPressなどのブログツールでは、「タイトル入力欄」「本文入力欄」「抜粋入力欄」など、限られた入力欄しかありませんが、WordPressはカスタマイズして任意の入力欄を追加する事が出来ます。

ちなみにこのカスタムフィールドの設定には、プラグイン「Advanced Custom Fields」を使っています。カスタムフィールドをごにょごにょする場合は超便利なプラグインなので是非使ってみて下さい。

こうして、伝票を一つの投稿とすると下記のような感じになります。

伝票検索機能

検索機能が欲しいという要望がありました。
WordPressには標準で記事を検索する機能がありますので、それを利用します。
下記のソースをheader.phpやらindex.phpに書けば伝票検索機能が出来ますね。

<form action="<?php bloginfo('url'); ?>/" method="get">
<input id="text" type="text" name="s" value="<?php echo $_GET['s']; ?>" />
<input class="btn btn-primary" id="search" type="submit" value="SEARCH" /></form>

ただ、この状態だとカスタムフィールドに入力した値（出荷港や備考など）は検索対象にならないので、プラグイン「Search Everything」を使って、カスタムフィールドも検索対象になるようにすると、より使い勝手がよくなります。

しかし、この状態だと大きな問題があります。

顧客がこのサイトを使って自分で検索する時、伝票番号の入力ミスや、意図的に他社名を入力して検索すると、他社の取引状況が閲覧出来てしまいます。

その問題を解消する為に、WordPressのユーザー管理機能を使います。

ユーザー管理機能で「顧客情報の管理」と「伝票情報の表示制限」をする

顧客情報の管理

WordPressで記事を投稿するにはユーザーIDを発行して、管理画面にログインして投稿するわけですが、このユーザー管理機能を使います。

一つのユーザー情報に一つの顧客情報を登録するといった具合にします。

WordPressの標準のユーザー権限には「管理者」「編集者」「投稿者」「寄稿者」「購読者」がありますが、本件では顧客に投稿（伝票）内容を編集させたりはしないので、ここでは「寄稿者」として登録します。

そして、顧客情報管理として使うので、電話番号やFAX番号などが登録できると便利ですね。

functions.php に下記のような感じで書くと、ユーザー情報画面にいろいろなフィールドが追加出来ます。

/*-------------------------------------------*/
/* ユーザー項目を追加
/*-------------------------------------------*/
function update_profile_fields( $contactmethods ) {
//項目の追加
$contactmethods['address'] = '住所';
$contactmethods['tel1'] = '電話番号 1';
$contactmethods['tel2'] = '電話番号 2';
$contactmethods['fax'] = 'FAX番号';
return $contactmethods;
}
add_filter('user_contactmethods','update_profile_fields',10,11);

投稿（伝票）とユーザー情報（顧客情報）を紐付ける

そして、WordPressの「投稿」には、どのユーザーがその記事を作成したのかを選択する「作成者」という項目のプルダウンがあります。

今回の件では「投稿」＝「伝票」ですので、WordPressのユーザーとして登録した顧客企業を、投稿（伝票）の「作成者」として扱う事により「伝票」と「顧客情報」が紐付いた状態でWordPressのデータベースに登録されます。

表示をログインユーザーに限定

そもそも外部の人間が勝手に取引情報を見れてはまずいので、まずはログインしていないユーザーがアクセスして来たら全てログイン画面にリダイレクトさせます。

functions.phpに以下のように書きます。

/*-------------------------------------------*/
/* 表示をログインユーザーに限定する
/*-------------------------------------------*/
function require_login() {
if ( ! is_user_logged_in() && ! preg_match( '/^(wp-login\.php|async-upload\.php)/', basename( $_SERVER['REQUEST_URI'] ) ) && ! ( defined( 'DOING_AJAX' ) && DOING_AJAX ) && ! ( defined( 'DOING_CRON' ) && DOING_CRON ) ) {
auth_redirect();
}
}
add_action( 'init', 'require_login' );

引用元：WordPressの表示をログインユーザーに限定する

ユーザーの権限によって表示情報を制限する

伝票を管理するクライアント企業（サイト運営者）がログインしている場合は伝票情報は全件表示で良いのですが、
顧客がログインしている場合は、その顧客が「作成者」として登録されている投稿（伝票）だけを表示させなくてはなりません。

トップページ（index.php）などの伝票一覧ページに下記のように記述すると、

• 運営者がログインしている場合は全件表示
• 顧客がログインしている場合はその顧客の伝票だけが表示

となります。

<?php
// ログインしているユーザーのレベルとIDを取得
global $user_level;
global $user_ID;
get_currentuserinfo();
// 編集者権限以上の時
if (7 <= $user_level) {
query_posts($query_string);
// 編集者権限より下の時（顧客がログインしている場合）は、ログインしているユーザーIDの投稿を絞込み表示
} else {
query_posts($query_string.'&author='.$user_ID);
} ?>
<?php if ( have_posts() ) { ?>
<?php while ( have_posts() ) : the_post(); ?>
// 投稿タイトル（伝票番号など）、詳細ページへのリンクなど
<?php endwhile; ?>
<?php } else { ?>
<p>該当する情報が登録されていません。</p>
<?php } ?>
<?php if (function_exists("pagination")) {
pagination($additional_loop->max_num_pages);
} ?>
<?php wp_reset_query(); ?>

ちなみに、寄稿者権限の顧客が自分で新規登録など出来ないように、プラグイン「User Role Editor」などで、出来る事を制限します。

問い合わせフォームを応用したメール通知システム

さて、そんな伝票ですが、今までは伝票が発行されると、その伝票をFAXで送信していました。

今回のシステムでは投稿の詳細ページが伝票なので、それを印刷してFAXで流せば良いのですが・・・

システムからメールで通知したいですよね！

「投稿をメールで通知」と言うと、投稿されたら自動的にユーザーにメールが送信されるメルマガ系のプラグインを連想されますが、以下の欠点があります。

• 伝票の「作成者」として紐付いている顧客にだけ通知したいのに全員に送信されてしまう。
• 投稿された時だけにメール通知するのではなく。一度情報公開して通知した後にも、請求書や正規の積荷証明書が発行された段階で、そのファイルを追加でアップロードするので、任意のタイミングで複数回の通知を送信したい。

となると、メルマガプラグインでは対応が難しい。

そこで活躍するのが問い合わせフォームプログラムの決定版

「Contact Form 7」!!!!

通常問い合わせフォームと言えば、閲覧者がサイト管理者に向けてメールを送信するために使うものですが、ここでは逆に、

サイト管理者がユーザーに向けてメールを送信するために使います。

各投稿（伝票）には作成者ユーザー情報（顧客情報）が紐付いています。

ユーザー情報にはメールアドレスが登録されているので、single.phpに

<?php the_author_meta( 'user_email', $userID ); ?>

と書けば取得出来ますので、この顧客のメールアドレスや、今表示している伝票詳細ページのURLを問い合わせフォームに投げます。

【　投稿（伝票）詳細ページ　】
↓↓↓↓　（伝票の顧客のメールアドレス情報などをフォーム設置ページに渡す）
【　フォームページ　】　（顧客のメールアドレスを、受け取ってメールの送信先欄に反映）
↓↓↓↓
フォームの送信ボタンを押せば顧客にメールが送信される

フォームに伝票情報を渡す方法

受け渡し項目の設定

まずは伝票詳細ページとフォーム（Contact form 7）ページでパラメーターの受け渡しが出来るように、functions.php に以下のように記述して、受け渡し項目を設定します。

function my_form_tag_filter($tag){
if ( ! is_array( $tag ) )
return $tag;
// ユーザー（顧客）のメールアドレス
if(isset($_GET['userMailAddress'])){
$name = $tag['name'];
if($name == 'userMailAddress') $tag['values'] = (array) $_GET['userMailAddress'];
}
// ユーザー（顧客）名
if(isset($_GET['userNickname'])){
$name = $tag['name'];
if($name == 'userNickname') $tag['values'] = (array) $_GET['userNickname'];
}
// 投稿（伝票詳細）ページのURL
if(isset($_GET['sendURL'])){
$name = $tag['name'];
if($name == 'sendURL') $tag['values'] = (array) $_GET['sendURL'];
}
return $tag;
}
add_filter('wpcf7_form_tag', 'my_form_tag_filter', 11);

伝票詳細ページからフォームページにパラメーターを投げる

伝票詳細ページからフォームが設置してあるページへのリンクボタンのリンク先URLに、受け渡し用のパラメーターをくっつけます。

http://問い合わせフォームのURL?メールアドレス&顧客名&送信するURL

<a href="問い合わせフォームのURL?&userMailAddress=<?php the_author_meta( 'user_email', $userID ); ?>&userNickname=<?php the_author_meta( 'nickname', $userID ); ?>&sendURL=<?php echo get_permalink($post->ID); ?>">この伝票情報を顧客に送信するページへ</a>

問い合わせフォーム（ Contact form 7 ）で受け取る

Contact form 7 のフォーム項目作成欄のショートコードで、function.phpで設定したパラメーター名（＝URLにくっついているパラメーラ名）をつけておけば、フォームが受け取れます。

これで投稿（伝票）ページから顧客のメールアドレスを受け取って、フォームの送信先メールアドレスに設定すれば、メール通知システムの出来上がり！！

FAX代も浮くしとっても便利！

実際の画面

クライアントの 株式会社3WM様 及び 本件代理店の 株式会社天空広告様 より画面の掲載許可をいただきましたので、実際の画面を公開いたします。

自分にとっても勉強になる案件でした。
３WM様及び天空広告様、ありがとうございます！

まとめ

こんな感じで、WordPressも使い方によってはウェブサイトというより、管理システムっぽい使い方も出来るのが面白い所かなと思います。

ちなみに、伝票の項目には入金済みか未入金かの選択項目があって、未入金で入金期日を過ぎると自動的に伝票の文字色が変わる機能など、他にもいろいろ小技を入れてます。

いやぁ、WordPressって本当にいいもんですね！

それではまたどこかでお会いしましょう。

明日は@twit_natashaさんです。

サヨナラ！サヨナラ！サヨナラ！

投稿者プロフィール

kurudrive

名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本（共著）
・現場でかならず使われているWordPressデザインのメソッド（共著）
[ 最近のWordPressコミュニティでの活動 ]
2018 WordCampOsaka セッションスピーカー
2017 WordCampKyoto セッションスピーカー
2016 WordCampTokyo LT
2016 WordCampKansai ハンズオン世話役
2015 WordCampTokyo セッションスピーカー
2015 WordCampKansai セッションスピーカー
2014 WordFesNagoya 実行委員 & セッションスピーカー
2013 WordCampTokyo セッションスピーカー（パネラー）
2013 WordFesNagoya 実行委員 & セッションスピーカー
2013 WordCrabFukui セッションスピーカー
他

最新の投稿

• ウェブ制作2024年10月8日必須プラグインの指定方法
• WordPress2024年6月11日GitHub Actions 上で Warning: Failed to create directory '/.wp-cli/cache/': mkdir(): Permission denied. くらった場合
• WordPress2023年3月29日アクションフックの無名関数に引数を渡す方法
• ウェブ制作2023年1月22日wp-env が destroy で失敗する場合

Follow me!

@kurudrive

シンプルでカスタマイズしやすいWordPressテーマ

Lightningは twitter Bootstrap ベースのシンプルでカスタマイズしやすいWordPressテーマです。
プラグイン VK All in One Expansion Unit とセットで使う事でビジネスサイトにもブログにも活用できます。

詳しくはこちら