WordPressを使ってカレンダー型の出勤表を作成 : WordPress

顧客で定休日を管理できる出勤表のメモ。エラー処理・セキュリティ等の細部は詰めてない[1]

  • カレンダーはカスタムポストとして投稿する。
  • 入力フォームはカスタムフィールドを利用する。
  • カスタムタクソノミーを使い(店舗ごとに)分類する。
  • 月初めの曜日・末日・日曜日はプログラムで自動的に判別する。
  • 店の定休日・祝祭日・個人の定休日は手で入力する。
  • 個人の定休日は該当する曜日のテキストフィールドに名前を入力する。

管理画面


表示画面

CSS

@charset "UTF-8";
/* セレクタ
---------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
}
body {
    text-align: center; /* for IE6 */
}
p {
    margin: 15px 0;
}
div#calender {
        width: 640px;
        margin: 40px auto 0;
        text-align: left;
        font-size: 10px;
}
#calender h1 {
    width: 640px;
    height: 40px;   
    margin: 0 0 20px;;
    padding: 0 0 0 26px;
    color: #BC857D;
    background: url(./images/calender/calender.gif) no-repeat;
    font-size: 1.5em;
    line-height: 40px;
}
#calender h3 {
   margin: 15px 0;
   font-size: 1.2em;
}
#calender h3 a {
   color: #BC857D;
   font-size: 1.2em;
}
#calender p {
    font-size: 1.2em;
}
#calender table {
    width: 630px;
   margin: 0 0 0 5px;
   border-collapse: collapse;
   border: 1px solid #DDDDDD;
   font-size: 1.2em;
   line-height: 18px;
}
#calender th {
    border: 1px solid #DDDDDD;
    background: #F9F9F9;
}
#calender td {
    width: 76px;
    height: 78px;
    padding: 6px;
    border: 1px solid #DDDDDD;
    vertical-align: top;
}

function.php

/**
 * Custom Post Type Calenderコンテンツ
 * cpt_calender
 * cpt : Custom Post Type
 */
add_action('init', 'create_cpt_calender_sequence');


function create_cpt_calender_sequence(){
    /**
     * カスタム投稿タイプ
     */
    // http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_post_type
    $labels = array(
        'name' => '出勤表',
        'singular_name' => '出勤表一覧',
        'add_new' => '出勤表を追加',
        'add_new_item' => '新しい出勤表を追加',
        'edit_item' => '出勤表を編集',
        'new_item' => '新しい出勤表',
        'view_item' => '出勤表を編集',
        'search_items' => '出勤表を探す',
        'not_found' => '出勤表はありません',
        'not_found_in_trash' => 'ゴミ箱に出勤表はありません',
        'parent_item_colon' => ''
    );    
    $args = array(
        'labels' => $labels,
        'public' => true,
        'capability_type' => 'post',
        'hierarchical' => false,
        'rewrite' => true,
        'supports' => array(
            'title', 
        ),
        'register_meta_box_cb' => 'cpt_calender_meta_box'
    );
    register_post_type('cpt_calender', $args);


    /**
     * カスタムタクソノミー
     */
    // 店舗
    register_taxonomy(
        'ct_calender_shop',
        'cpt_calender',
        array(
            'hierarchical' => true, // カテゴリー形式
            'update_count_callback' => '_update_post_term_count',
            'label' => '店舗による分類',
            'singular_label' => '店舗による分類',
            'public' => true,
        )
    );
    

    /**
     * カスタムフィールド
     */
    function cpt_calender_meta_box($post){
        add_meta_box('cpt_calender_meta', 'Calender', 'cpt_calender_meta_func', 'cpt_calender', 'normal', 'high');
    }
    // カスタムフィールドを作成・表示
    function cpt_calender_meta_func($post, $box){
        // nonceはセキュリティの処理
        echo wp_nonce_field('cpt_calender_meta', 'my_meta_nonce');
        // カスタムフィールドの値を取得・フォーム要素を表示
        $year  =  get_post_meta($post->ID, 'year', true);
        echo '<p>年 : <select name="year">';
        for ($y=2011; $y<2020; $y++){
            if ($y == $year) {
                echo "<option value='$y' selected>" . $y. "</option>";
            } else {
                echo "<option value='$y'>" . $y . "</option>";
            }
        }
        echo '</select></p>';
        $month =  get_post_meta($post->ID, 'month', true);
        echo '<p>月 : <select name="month">';
        for ($m=1; $m<13; $m++){
            if ($m == $month) {
                echo "<option value='$m' selected>" . $m. "</option>";
            } else {
                echo "<option value='$m'>" . $m . "</option>";
            }
        }
        echo '</select></p>';
        $close = get_post_meta($post->ID, 'close', true);
        echo '<p>定休日 : <input type="text" name="close" value="' . esc_html($close) . '" size="40" /></p>';
        $holiday = get_post_meta($post->ID, 'holiday', true);
        echo '<p>祝日 : <input type="text" name="holiday" value="' . esc_html($holiday) . '" size="40" /></p>';
        // 各日付のカスタムフィールドの値を取得・フォーム要素を表示
        for ($i=1; $i<=31; $i++) {
        $key = 'day' . $i;
            $day&#91;$i&#93; = get_post_meta($post->ID, $key, true);
            echo '<p>' . $i . '日' . ' : <input type="text" name="' . $key . '" value="' . $day&#91;$i&#93; . '" size="40" /></p>';
        }
    }
    // カスタムフィールドを保存
    add_action('save_post', 'cpt_calender_meta_update');
    function cpt_calender_meta_update($post_id){
        // セキュリティの処理
//        if (!wp_verify_nonce( $_POST['my_meta_nonce'], 'cpt_calender_meta')) {
//            return $post_id;
//        }
//        PHP Notice:  Undefined index:が出るので下記に変更 2011.08.24
        $my_meta_nonce = isset($_POST['my_meta_nonce']) ? $_POST['my_meta_nonce'] : null;
        if (!wp_verify_nonce( $my_meta_nonce, 'cpt_calender_meta')) {
            return $post_id;
        }
        if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
            return $post_id;
        }
        // 投稿タイプの確認
        if ($_POST['post_type'] == 'cpt_calender') {
            if(!current_user_can('edit_post', $post_id)) {
                return $post_id;
            }
        } else {
            return $post_id;
        }
        // カスタムフィールドの取得・更新
        $year = $_POST['year'];
        if($year == '') {
            delete_post_meta($post_id, 'year');
        }
        else {
            update_post_meta($post_id, 'year', $year);
        }
        $month = $_POST['month'];
        if($month == '') {
            delete_post_meta($post_id, 'month');
        }
        else {
            update_post_meta($post_id, 'month', $month);
        }
        $close = $_POST['close'];
        if($close == '') {
            delete_post_meta($post_id, 'close');
        }
        else {
            update_post_meta($post_id, 'close', $close);
        }
        $holiday = $_POST['holiday'];
        if($holiday == '') {
            delete_post_meta($post_id, 'holiday');
        }
        else {
            update_post_meta($post_id, 'holiday', $holiday);
        }
        $day = array();
        for ($i=1; $i<32; $i++) {
            $key = 'day' . $i;
            $day&#91;$i&#93; = $_POST&#91;$key&#93;;
            if($day&#91;$i&#93; == '') {
                delete_post_meta($post_id, $key);
            } else {
                update_post_meta($post_id, $key, $day&#91;$i&#93;);
            }
        }
    }

}


/*
 * カレンダー出力関数
 */
function drawCalender () {
    $id = get_the_ID();
    $post = get_post($id);
    $year = get_post_meta($post->ID, 'year', true); // カスタムフィールド 年
    $month= get_post_meta($post->ID, 'month', true); // カスタムフィールド 月
    $close = get_post_meta($post->ID, 'close', true); // カスタムフィールド 定休日(カンマ区切)
    $closes = explode(",",$close); // 定休日を配列へ展開
    $holiday = get_post_meta($post->ID, 'holiday', true); // カスタムフィールド 祝日(カンマ区切)
    $holidays = explode(",",$holiday); // 祝日を配列へ展開
    // $y 年 $m 月
    $t = mktime(0, 0, 0, $month, 1, $year); //$y年$m月1日のUNIXTIME
    $w = date('w', $t); //$y年$m月の1日目の曜日(0:日~6:土)
    $n = date('t', $t); //$y年$m月の日数

    print "<h1>{$year}年{$month}月</h1>n";
    print '<table>'."n";
    print <<<DAY_TITLE
    <tr>
        <th class="textRed">日</th>
        <th>月</th>
        <th>火</th>
        <th>水</th>
        <th>木</th>
        <th>金</th>
        <th class="textBlue">土</th>
    </tr>
DAY_TITLE;

    // ループ処理開始
    for ($i=1-$w; $i<=$n + 7; $i++) {
        // 週をごとの処理
        if ((($i + $w ) % 7) == 1) {
            print "<tr>n";
        }
        // 日付が有効な場合の処理
        if ((0 < $i) && ($i <= $n)) {
            $key = "day" . $i;
            // 表示値の取得(カンマ区切)
            $value = get_post_meta($id, $key, true);
            $values = explode(",",$value);
            $html = "<td";
            // 曜日の取得
            $hizuke = mktime(0, 0, 0, $month, $i, $year); //$year年$month月1日のUNIXTIME
            $youbi = date('w', $hizuke); //1日の曜日(0:日~6:土)
            // 定休日
            if (in_array($i, $closes, FALSE))
            {
                $html .= ' class="close"';
            }
            // 祝日
            else if ( in_array($i, $holidays, FALSE))
            {
                $html .= ' class="holiday"';
            }
            // 日曜
            else if ($youbi == 0) {
                $html .= ' class="sun"';
            }
            $html .= ">{$i}";
            for ($j=0; $j<count($values); $j++) {
                if ($values&#91;$j&#93;) {
                    $html .= "<br />";
                    $html .= $values[$j];
                } else {
                    $html .= "&nbsp;";
                }
            }
            $html .= "</td>n"; 
            print($html);
        } else {
            print "<td>&nbsp;</td>n";
        }
        if ( ( ( $i + $w ) % 7 ) == 0 ) {
            print "</tr>n";
            if ( $i >= $n ) {
                break;
            }
        }
    }
    print "</table>n";
}

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。