下载: 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.