Question

我正忙着为自己创建一个博客，需要制作一个横向时间表，但我不确定如何实现这一目标。

我花了大部分时间用谷歌搜索并找到了这个时间表http://tutorialzine.com/2012/04/timeline-portfolio/，但它比我需要的要广泛得多。

基本上我想做一些非常类似的东西，但是没有内容滑块或JSON内容，只是一个时间线显示带有标题的帖子可能是一个缩略图，当然正确地放在对应的时间线上它们的创建日期。

我有什么想法可以做到这一点？

Answer 1

这是一个老帖子，但答案可能对其他人有帮助，Post Timeline提供水平和垂直时间轴，你可以下载它为WordPress。

https://wordpress.org/plugins/post-timeline/

Demos of the Timeline

Answer 2

这是一个古老的问题，但是我真的想分享我找到的解决方案。

同时使用WordPress，Advanced Custom Fields（ACF）和TIMELINE JS（TL）。

我真的很喜欢timeline js，尤其是他们的移动友好外观非常完美！签出来。

我希望能够为我的学校创建一个用户，以便基本上每个人都可以使用WordPress用户友好设计并为TL前端视图创建新事件。

我会说，并不是每个人都对excel感到满意，并且使用这种数据并不是最好的选择。

为了做到这一点，我编写了一些代码，将WordPress安装的所有帖子都提取出来，并将它们导出到json格式的文件中，每次您更新或创建新帖子时，TL都可以将它们读取为事件。

您可以了解有关json结构here

的更多信息

1。步骤

使用ACF创建两个日期字段-一个用于开始日期，一个用于结束日期-并将返回格式设置为Ymd

设置它们以显示帖子。

2。 -导出数据

此后，此代码会将帖子数据导出到您文件结构中的文件： startdato和slutdato是两个ACF字段的开始和结束日期

function export_posts_in_json (){

    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => -1,
    );


    $query = new WP_Query( $args );
    $text = new stdClass();
    $text->headline = "Det Kongelige Danske Kunstakademi";
    $text->text = "Som har været en del igennem";
    $timelineObj = new stdClass();
    $timelineObj->title = "media";
    $timelineObj->title = $text;

    $eventArray = array();

    while( $query->have_posts() ) : $query->the_post();

      $obj = new stdClass();

      if( has_post_thumbnail() ) {
        $media = new stdClass();
        $media->url = get_the_post_thumbnail_url(); 
        $media->thumbnail = get_the_post_thumbnail_url(get_the_ID(), 'thumbnail');
        $media->caption = get_post( get_post_thumbnail_id())->post_excerpt;
        $obj->media = $media;
      }

      $text = new stdClass();
      $text->headline = get_the_title();
      $text->text = get_the_content();

      $obj->text = $text;

      $startDate = new stdClass();
      $dateObject = new DateTime( get_field('startdato', get_the_ID() ) ); 
      $startDate->year = $dateObject->format('Y');
      $startDate->month = $dateObject->format('m');
      $startDate->day = $dateObject->format('d');

      $obj->start_date = $startDate;

      if( get_field('slutdato', get_the_ID() ) ) {  // Hvis der er en slutdato
        $endDate = new stdClass();
        $dateObject = new DateTime( get_field('slutdato', get_the_ID() ) ); 
        $endDate->year = $dateObject->format('Y');
        $endDate->month = $dateObject->format('m');
        $endDate->day = $dateObject->format('d');

        $obj->end_date = $endDate;
      }
      if( get_the_category() ) { // Can only take one!
        $category = new stdClass();
        $obj->group = get_the_category()[0]->name;
      }

      $eventArray[] = $obj; 

    endwhile;

    wp_reset_query();

    $timelineObj->events = $eventArray;

    $data = json_encode($timelineObj);
    $folder = get_stylesheet_directory() . '/it-timeline/';
    $file_name = 'timeline-data.json';
    $succes = file_put_contents( $folder.$file_name , $data );

}

这将保存数据并对TL可读（如我所说）。

3。实施库

然后添加TL javascript和CSS并从您的.php文件之一中调用文件：

<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>

<div id='timeline-embed' style="width: 100%; height: 600px"></div>

<script type="text/javascript">
  var options = {
      hash_bookmark: true 
  }

  var json_url = "wp-content/themes/twentyseventeen-child/it-timeline/timeline-data.json"

  $.getJSON( json_url, function( data ) {
      timeline = new TL.Timeline('timeline-embed', data, options);
      console.log(data);
  } );
</script>

Voila！

现在，您可以与可能不是Excel中最好的朋友或同事共享用户登录名，或者只需要WordPress的功能。或者像我这样，如果您想开发一个具有很多不同知识的时间表，则您可以以用户友好的流程而不是在excel中集体地从事一个项目。

希望这会对某人有所帮助

对我有用。

Wordpress帖子的水平时间表

2 个答案:

1。步骤

2。 -导出数据

3。实施库

Voila！