サポート » 使い方全般 » カスタム投稿タイプを使ったリスト型カレンダーの表示方法

  • 解決済 hitachi

    (@hitachi)


    カスタム投稿タイプを使って試合の一覧ページを作成しています。

    http://memo.ark-under.net/memo/718

    上記サイトがかなり理想に近く実装させ表示はされましたが、変更したい点があり調べながらしていますがどうもうまくいきません。

    (上記サイトのコードをそのまま貼り付け、名前などを変更してできました)

    1.「game」というカスタム投稿タイプを使って日付・内容・対戦チーム・勝敗・スコア・場所・備考 という項目をtableを使って表示させたい。
    http://www.rku-bbc.com/schedule/
    上記サイトのスケジュールのような感じです。

    2.上記項目はAdvanced Custom Fieldsで入力したもの

    3.各項目のリンクは今のところ必要なし(詳細ページはいらない)ですが、
    スコアをクリックしたら詳細ページがいずれ出るようにしたいです。

    どなたかご教授いただけると大変助かります。
    よろしくお願いいたします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • 「どうもうまくいきません」の内容がわからないと、みなさんアドバイスできないです。
    まず、みなさんに状況がわかるようにしましょう。

    カレンダーシステムの構築・表示には以下のようなステップが必要だと思います。

    1.カスタム投稿タイプ「game」の作成はできているか?
    2.「Advanced Custom Fields」で「game」に必要な情報を入力することはできているか?
    3.登録した内容を表示させるために必要なページ・テンプレートを作成することができているか?

    うまくいかない内容は、上記のどれかでしょうか?
    または、全く異なる内容でしょうか?

    私もつい最近、参照先のカレンダー作成の流れを参考にして、同じようなカレンダーシステムを作成したところです。
    いくつものステップが必要ですので「どこまでできたのか」を見通しながらすすめるといいとおもいますよ。

    説明不足ですみません。
    おっしゃる通りですね。

    1.カスタム投稿タイプ「game」の作成はできているか?
    ⇒「Custom Post Type UI」を使って作成できております。

    2.「Advanced Custom Fields」で「game」に必要な情報を入力することはできているか?
    ⇒できています。
    対戦チームをタイトルに入力する形で、それ以外は「Advanced Custom Fields」に各項目を作りました。

    3.登録した内容を表示させるために必要なページ・テンプレートを作成することができているか?

    ⇒以下、コードを記載します。

    functions.php

    <?php
       function my_event_calendar($year, $month, $eventArray){
        if(empty($year) && empty($month)) {
            $year = date("Y");
            $month = date("n");
        }
        //月末の取得
        $l_day = date("j", mktime(0, 0, 0, $month + 1, 0, $year));
        $aday = array("日", "月", "火", "水", "木", "金", "土");
        //祝日の取得
        $holidays = getHolidays($year);
        //初期出力
        $tmp = <<<EOM
    <table class="calendar_list">
        <caption>{$year}年{$month}月</caption>
      <tr>
        <th class="date" scope="col">日</th>
        <th class="date" scope="col">内容</th>
        <th class="date" scope="col">対戦チーム</th>
        <th class="date" scope="col">勝敗</th>
        <th class="date" scope="col">スコア</th>
        <th class="date" scope="col">場所</th>
        <th class="date" scope="col">備考</th>
      </tr>\n
    EOM;
        //月末分繰り返す
        for ($i = 1; $i < $l_day + 1;$i++) {
            //曜日の取得
            $week = $aday[date("w", mktime(0, 0, 0, $month, $i, $year))];
            if($i<10){
                $holinum = $year.'-'.$month.'-0'.$i;
            }else{
                $holinum = $year.'-'.$month.'-'.$i;
            }
            $holiday = agv($holidays, $holinum);
    
            if ($i == date("j") && $year == date("Y") && $month == date("n")) {
                //現在の日付の場合
                $tmp .= "\t".'<tr class="today">';
                if($holiday){$tmp .= '<td class="holiday">'.$i.'('.$week.')</td>';
                }elseif($week == '日'){$tmp .= '<td class="sun">'.$i.'('.$week.')</td>';
                }elseif($week == '土'){$tmp .= '<td class="sat">'.$i.'('.$week.')</td>';
                }else{$tmp .= '<td>'.$i.'('.$week.')</td>';
                }
                $tmp .= '<td class="event">';
                if($holiday){$tmp .= '<span class="holiday">'.$holidays[$holinum].'</span>';}
            } else {
                //現在の日付ではない場合
                $tmp .= "\t";
                if($holiday){
                    $tmp .= '<tr class="holiday"><td class="holiday">'.$i.'('.$week.')</td><td class="event">';
                }elseif($week == '日'){
                    $tmp .= '<tr class="sun"><td class="sun">'.$i.'('.$week.')</td><td class="event">';
                }elseif($week == '土'){
                    $tmp .= '<tr class="sat"><td class="sat">'.$i.'('.$week.')</td><td class="event">';
                }else{
                    $tmp .= '<tr><td>'.$i.'('.$week.')</td><td class="event">';
                }
            }
            if($i<10){$day = "0".$i."日";}else{$day = $i."日";}
            foreach($eventArray as $eventArrayData) {
                $eln = explode("\t", $eventArrayData);
                if($eln[0] == $day){$tmp .= '<a href="'.$eln[2].'">'.$eln[1].'</a>';}
            }
            $tmp .= "</td></tr>\n";
        }
        $tmp .= "</table>\n";
    
        return $tmp;
    }
    
    /* 祝日の取得 */
    //Googleカレンダーから祝日を取得
    function getHolidays($year) {
        //Googleカレンダーから、指定年の祝日情報をJSON形式で取得するためのURL
        $url = sprintf(
            'http://www.google.com/calendar/feeds/%s/public/full-noattendees?alt=json&%s&%s',
            'japanese__ja@holiday.calendar.google.com',
            'start-min='.$year.'-01-01',
            'start-max='.$year.'-12-31'
        );
        if ( $results = file_get_contents($url) ) {
                $results = json_decode($results, true);
                $holidays = array();
                foreach ($results['feed']['entry'] as $val ) {
                        $date  = $val['gd$when'][0]['startTime'];
                        $week = date('w',strtotime($date));
                        $title = $val['title']['$t'];
                        $holidays[$date] = $title;
    
                        if( $week == 0) {
                            $nextday = date('Y-m-d',strtotime('+1 day', strtotime($date)));
                            $holidays[$nextday] = '振替休日';
                        }
    
                        $before_yesterday = date('Y-m-d',strtotime('-2 day', strtotime($date)));
    
                        if(isset($holidays[$before_yesterday])){
                            $yesterday = date('Y-m-d',strtotime('-1 day', strtotime($date)));
                            $holidays[$yesterday] = '国民の休日';
                        }
    
                }
                ksort($holidays);
        }
        return $holidays;
    }
    
    function agv($array, $key, $default = NULL) {
      return isset($array[$key]) ? $array[$key]: $default;
    }
    
    ?>

    page-game.php

    <?php //'game'というカスタム投稿タイプ呼び出し
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $getY = agv($_GET, 'ey');
    $getM = agv($_GET, 'em');
    if($getY && $getM){
        $min = $_GET['ey']."年".$_GET['em']."月01日";
        $max = $_GET['ey']."年".$_GET['em']."月31日";
    }else{
        $min = date('Y年m月01日');
        $max = date('Y年m月31日');
    }
    $wp_query = new WP_Query( array(
        'post_type' => 'game',
        'posts_per_page' => -1,
        'paged' => $paged,
        'meta_key'=>'game-date',
        'meta_value'=> array( $min, $max ),
        'meta_compare'=>'BETWEEN',
        'orderby'=>'meta_value',
        'order'=>'ASC'
    ) );
    $eventArray = array();
    ?>
    <?php if (have_posts()) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
    <?php the_field("game-date", $post->ID); ?>
    <?php //イベントスケジュールを配列に格納
        $eventID = get_permalink();
        $eventTitle = get_the_title();
        $eventDate = get_post_meta($post->ID,'game-date',TRUE);
        $eventPref = get_post_meta($post->ID,'victory',TRUE);
        preg_match('/\d{2}日/' , $eventDate , $matchDate);
        $eventData = $matchDate[0]."\t".$eventTitle."\t".$eventID."\t".$eventPref."\t";
        array_unshift($eventArray, $eventData);
    ?>
    <?php endwhile; ?>
    
    <?php endif; ?>
    
    <?php
    $getY = agv($_GET, 'ey');
    $getM = agv($_GET, 'em');
    if($getY && $getM){
        $nowYear = $_GET['ey'];
        $nowMon = $_GET['em'];
    }else{
        $nowYear = date('Y');
        $nowMon = date('m');
    }
    $next = strtotime(date("Ymd",strtotime($nowYear.$nowMon."01"))."+1 month");
    $next = date("Ymd",$next);
    $prev = strtotime(date("Ymd",strtotime($nowYear.$nowMon."01"))."-1 month");
    $prev = date("Ymd",$prev);
    
        echo '<h4>試合日程・結果</h4>';
        echo '<p class="link_prev"><a href="?ey='.substr($prev,0,4).'&em='.substr($prev,-4,2).'"><< '.substr($prev,0,4).'年'.substr($prev,-4,2).'月</a></p>';
        echo '<p class="link_next"><a href="?ey='.substr($next,0,4).'&em='.substr($next,-4,2).'">'.substr($next,0,4).'年'.substr($next,-4,2).'月 >></a></p>';
        //カレンダー表示
        echo my_event_calendar($nowYear,$nowMon,$eventArray);
        echo '<p class="nextback">';
        echo '<a href="?ey='.substr($prev,0,4).'&em='.substr($prev,-4,2).'"><< '.substr($prev,0,4).'年'.substr($prev,-4,2).'月</a>';
        echo '|';
        echo '<a href="?ey='.substr($next,0,4).'&em='.substr($next,-4,2).'">'.substr($next,0,4).'年'.substr($next,-4,2).'月 >></a>';
        echo '</p>';
    ?>

    上記のコードで、日付の表示は土日祝日を含めてちゃんと表示されています。
    「Advanced Custom Fields」の試合日(game-date)に入力したものが反映されています。
    「内容」にタイトルで入力した対戦チームがリンク付きで表示されます。
    そのほかの項目は項目名だけで、空白状態です。

    ・「Advanced Custom Fields」で入力した各項目を表示させたい。
     (「対戦チーム」のみカスタム投稿gameの新規入力のタイトルで入力したもの)
    ・スコアをクリックしたら詳細ページが見れるようにしたい。
     (勝敗とスコアは試合後に入力するので、その時に初めてリンクできたら理想的です。)

    ここから前に進まない状態なので助けてください。
    ご教授のほど、どうかよろしくお願いいたします。

    「「Advanced Custom Fields」で入力した各項目を表示させたい。」
    ということだけであれば、以下のようになります。

    「Advanced Custom Fields」で設定した項目を取得・表示する書き方は、

    取得する

    get_field( '【設定したフィールド名】', $post_id );

    表示する

    the_field( '【設定したフィールド名】', $post_id );

    ※ループの中であれば、 , 以降の部分は必要ありません。

    ですが、この場合に修正する箇所としては、
    page.phpの以下の部分で表示したい内容を追加して取得する。

    <?php //イベントスケジュールを配列に格納
        $eventID = get_permalink();
        $eventTitle = get_the_title();
        $eventDate = get_post_meta($post->ID,'game-date',TRUE);
        $eventPref = get_post_meta($post->ID,'victory',TRUE);
        preg_match('/\d{2}日/' , $eventDate , $matchDate);
        $eventData = $matchDate[0]."\t".$eventTitle."\t".$eventID."\t".$eventPref."\t";
        array_unshift($eventArray, $eventData);
    ?>

    functions.phpの以下の部分を変更して表示したい内容が表示できるようにする。

    foreach($eventArray as $eventArrayData) {
                $eln = explode("\t", $eventArrayData);
                if($eln[0] == $day){$tmp .= '<a href="'.$eln[2].'">'.$eln[1].'</a>';}
            }

    という作業が必要でしょう。
    私自身は、参照元サイトのコード自体はほとんど参照していないので、
    ちゃんと読んでいなかったのですが、内容部分の取得・表示については
    かなり省略されていますね。あれこれコードを追加する必要があるようです。

    すこしづつ、やってみましょう。
    また、シングルページ(試合後に内容を入力したら表示させたいページ)を
    先に作成してみると、感覚がつかめるのではないかと思います。

    Pineapplen さん、ありがとうございました。
    PHPを勉強しながら組み込んでいきたいと思います。

    また、お分かりの方がおられましたら、ご教授いただけると助かります。
    引き続きよろしくお願いいたします。

    参考元の方に教えていただくことができ、
    なんとか実装できそうですので解決済みとさせていただきます。
    ありがとうございました。」

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「カスタム投稿タイプを使ったリスト型カレンダーの表示方法」には新たに返信することはできません。