0

我正忙于为自己创建一个博客，需要制作一个水平时间线，但我不确定如何实现这一点。

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

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

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

4

2 回答 2

0

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

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

时间轴演示

于 2018-03-27T15:06:01.763 回答
0

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

一起使用 WordPress、高级自定义字段(ACF) 和TIMELINE JS (TL)。

我真的很喜欢时间轴 js，尤其是它们对移动友好的外观非常完美！一探究竟。

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

我想说，并不是每个人都对 excel 感到满意，而且使用这种数据并不是最好的工作。

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

您可以在此处阅读有关 json 结构的更多信息

1. 步骤

使用 ACF 创建两个日期字段 - 一个用于开始日期，一个用于结束日期 - 并将返回格式设置为 Ymd 在此处输入图像描述

将它们设置为在帖子中显示。

2. - 导出数据

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

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>

瞧！

现在，您可以与可能不是 Excel 中最好的朋友或同事共享用户登录名，或者只是想要 WordPress 的功能。或者就我而言，如果你想开发一个包含很多不同人知识的时间线，你可以在一个用户友好的流程中共同完成一个项目——而不是在 Excel 中。

希望这会对某人有所帮助

这个对我有用。

于 2020-04-04T16:58:18.620 回答