TimelineJS in WordPress

下载: https://github.com/VeriteCo/TimelineJS
演示：http://timeline.verite.co/
首先要建立一个 custom post type 叫 timeline

添加一些测试数据之后，进行下一步。

取出数据生成JSON

            $timeline_args = array(
                'posts_per_page' => -1,
                'post_type' => 'timeline'
            );
            $timeline_array = array();
            $timeline_list = new WP_Query($timeline_args);
            $index = 0;

            while ($timeline_list->have_posts()) : $timeline_list->the_post();
                $timeline_array[$index]["startDate"] = get_the_date("Y,m,d");
                $timeline_array[$index]["headline"] = get_the_title();
                $timeline_array[$index]["text"] = get_the_excerpt();
                $large_image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'medium');
                if (has_post_thumbnail()) {
                    $post_thumbnail = get_post(get_post_thumbnail_id());
                    $large_image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'medium');
                    $timeline_array[$index]["asset"]["media"] = $large_image_url[0];
                    $timeline_array[$index]["asset"]["credit"] = $post_thumbnail->post_title;
                    $timeline_array[$index]["asset"]["caption"] = $post_thumbnail->post_excerpt;
                }

                $index++;
            endwhile;
            $timeline["timeline"]["date"] = $timeline_array;
            $timeline["timeline"]["totle"] = $index;
            $timeline_json = json_encode($timeline);

            $json_timeline_file_addr = dirname(__FILE__) . "/json-timeline.php";
            if (!is_file($json_timeline_file_addr)) {
                $json_timeline_file = fopen($json_timeline_file_addr, "w+");
                fwrite($json_timeline_file, $timeline_json);
                fclose($json_timeline_file);
            } else {
                $json_timeline_file = file_get_contents($json_timeline_file_addr);
                $json_timeline_array = json_decode($json_timeline_file);
                //print_r($json_timeline_array);
                if ($json_timeline_array->timeline->totle != $index) {
                    $json_timeline_file = fopen($json_timeline_file_addr, "w+");
                    fwrite($json_timeline_file, $timeline_json);
                    fclose($json_timeline_file);
                }
            }

            wp_reset_postdata();

吧相关文件上传到js文件夹里，下面是如何实例化 timelineJS.