カスタム投稿必要なし！WordPressで出勤管理表を作る方法

2015年3月14日 18:23

現在、知るところではwordpressのプラグインに出勤管理表を直接作る機能を持ったものはありません。

ならば、自作してしまおうと考えたのが今回の記事です。
出勤表を公開して使うところなんてそうそうないですが、もし使うようであれば、便利であると公言しておきます。

この記事は最終更新日から1年以上が経過しています。

サイトの構想

どういった場合に出勤表が必要になるのか。
それをわかりやすく説明するため、作成するサイトとして、ダンス教室を例として進めていきます。

ページ構成

必要なのは以下のページ数です。

TOP (index.php)

我がダンス教室について (page.php)

ダンス講師紹介 (single.php)

講師出勤表/教室時間割 (single.php)

アクセス (page.php)

利用する投稿としては、カッコ内のものを利用します。
というわけなので、必要なカテゴリーとしては、『講師紹介』、『出勤』の二つが必要になりますね。

上記のカテゴリー分けした投稿についてですが、本来使うべきであろう、カスタム投稿は利用しませんでした。
何故かというと、カスタム投稿を利用するとそれぞれ表示するのにPHPファイルを増やしたり、記述が多くなったりしてしまうからです。
とはいえ、ファイル構成を整理するためにはどうしても手間は出てきますが、特に面倒なのがTOPページの記事一覧の情報を呼び出したりする煩雑さが増えるというのも利用の一つです。

出勤表の構想

出勤表といってもピンキリです。
今回作成するものとして、以下のようなものを考えています。

出勤を一か月ごとにまとめる

投稿作成時に、その出勤表の該当月をタイトルとします。
その中に出勤日を用意し、その中に講師をあてはめるというわけですが、詳しくは後ほど紹介します。

出勤者の情報を引用する

例えば、この出勤表がダンススクールのものだったとした場合、それぞれそのダンスの先生の情報やサムネイル、リンク先を引用する必要があります。
そうした場合、事前に投稿してある先生の紹介という投稿とつなげる項目を作ります。

出勤情報の詳細

出勤日、出勤時刻、退勤時刻を入力できるようにします。

以上が、出勤表を含めたサイトの構成となります。
ひとまず、手を動かして覚えましょう。
以下より、準備を薦めます。

プラグインのインストール

無料で簡単！に作成できると思っていた方、申し訳ないですが、簡単ではありません。
必須のものがあります。

プラグイン『Advanced Custom Fields』

というのが、以下のプラグイン。
Advanced Custom Fields

便利なアドオン『The Repeater Field』

さらに、有料アドオンである以下。
The Repeater Field

この『The Repeater Field』は、25$で購入ができます。
このアドオンは使い勝手がとてもよく、機能を追加する場合のほとんどにおいて利用しています。
25$程度であれば、購入してもよいのでは、とおススメしておきます。

これでプラグインのインストールは以上です。

カスタムフィールドの設定

こちらの設定は、少々複雑です。
以下の図をまずご覧ください。

図のような出勤表を想定した場合、設定するカスタムフィールドは以下のようになります。

第一階層
用途：日毎に入力枠を作成するリピートフィールド
フィールド順序：1
フィールドラベル：repeat1
フィールド名：repeat1
フィールドタイプ：Repeater

第二階層（第一階層のリピーター内に入る）
用途：スケジュール該当日
フィールド順序：1
フィールドラベル：day
フィールド名：day
フィールドタイプ：デイトピッカー（date_picker）
※フォーマットを保存する：yymmdd
※表示フォーマット：yy/mm/dd

フィールド順序：2
用途：スケジュール該当日に入る講師と時間情報のためのリピートフィールド
フィールドラベル：repeat2
フィールド名：repeat2
フィールドタイプ：Repeater

第三階層（第二階層のリピーター内に入る）
用途：出勤予定のある講師の情報を引用
フィールド順序：1
フィールドラベル：teacher
フィールド名：teacher
フィールドタイプ：投稿オブジェクト（post_object）
※タクソノミーでフィルタする：講師紹介（該当カテゴリ）

フィールド順序：2
用途：出勤時刻
フィールドラベル：start
フィールド名：start
フィールドタイプ：テキスト

フィールド順序：3
用途：退勤時刻
フィールドラベル：end
フィールド名：end
フィールドタイプ：テキスト

以上の入力内容を画像にすると、以下のようになります。
※ライトボックスが開いてしまい、詳細が見づらくなるので、その後、新しいタブで画像を開いてください。
全体画像

表示用コード

上記を設定後、コードを記述します。

	<table>
	<tr>
		<th>日付<th>
		<th>講師 : 出勤 ～ 退勤<th>
	</tr>
	<?php $i=0; while(has_sub_field('repeat1')):?>
	<tr>
		<td><?php echo date("m月d日", strtotime(get_sub_field('day'))) ?></td>

		<td>
		<?php while(has_sub_field('repeat2')): $_post = get_sub_field('teacher');?>
			<?php echo get_the_post_thumbnail($_post->ID, 'thumbnail'); ?><a target="_blank" href="<?php echo get_permalink($_post->ID)?>"><?php echo get_the_title($_post->ID); ?></a> ： 
			<?php the_sub_field('start'); ?> ～ <?php the_sub_field('end'); ?>
			<br>
		<?php endwhile; ?>
		<td>
	</tr>	
	<?php endwhile; ?>
	<table>

最低限の表示用としての出力です。
デザインは工夫して、見やすくしてみてください。

そのほか、ダンス講師情報の引用は、投稿オブジェクトの利用によって引っ張ることができます。