【WordPressカスタマイズ】旅行日程タイムラインを作ってみた

.travel_course .move:last-of-type {
　　display: none !important;
}
i.num {
    font-style: normal;
    background-color: #FFC679;
    color: #fff;
    width: 26px;
    height: 26px;
    line-height: 26px;
    -webkit-border-radius: 9999px;
    border-radius: 9999px;
    text-align: center;
    margin-right: 10px;
    display: inline-block;
}
.course{
    border: 1.5px solid #FFC679;
    border-radius: 6px;
    padding: 15px;
}
p.spot {
    margin: 0.6em 0 1.2em 0;
    font-size: 1.3em;
    line-height: 1.3;
    font-weight: bold;
	color: #FFC679;
}
.move {
    display: flex;
    justify-content: center;
    align-items: center;
}
.move ul {
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0px;
}
.move ul li {
    list-style: none;
}
.distance {
    vertical-align: middle;
    font-size: 1.2rem;
}
.time {
    font-size: 1.2rem;
}
.move:before {
    font-family: "Font Awesome 5 Free";
    content: "\f309";
    font-size: 4em;
    color: #FFC679;
    font-weight: bold;
    padding: 0 0.1em 0 0;
}
.time:before {
    font-family: "Font Awesome 5 Free";
    color: #FFC679;
    font-weight: bold;
    padding: 0 0.4em;
}
.bus:before{
    content: "\f55e";
}
.airplane:before{
    content: "\f072";
}
.walk:before{
    content: "\f54b";
}
.train:before{
    content: "\f239";
}
.car:before{
    content: "\f1b9";
}
.ship:before{
    content: "\f21a";
}

//timelineショートコードコンテンツ内に余計な改行や文字列が入らないように除外
if ( !function_exists( 'remove_wrap_shortcode_wpautop' ) ):
function remove_wrap_shortcode_wpautop($shortcode, $content){
  //tiショートコードのみを抽出
  $pattern = '/\['.$shortcode.'.*?\].*?\[\/'.$shortcode.'\]/is';
  if (preg_match_all($pattern, $content, $m)) {
    $all = null;
    foreach ($m[0] as $code) {
      $all .= $code;
    }
    return $all;
  }
}
endif;
// 旅プラン用タイムラインショートコード
add_shortcode('travel_timeline', 'travel_tl_shortcode');
if ( !function_exists( 'travel_tl_shortcode' ) ):
	function travel_tl_shortcode( $atts, $content = null ){
		$content = remove_wrap_shortcode_wpautop('travel_ti', $content);
		$content = do_shortcode( shortcode_unautop( $content ) );
		$tag .= '<div class="travel_course">'.
					$content.
				'</div>';
		
		return apply_filters('travel_timeline_tag', $tag);
	}
endif;
// 旅プラン用タイムラインショートコード中身
add_shortcode('travel_ti', 'travel_tl_item_shortcode');
if ( !function_exists( 'travel_tl_item_shortcode' ) ):
function travel_tl_item_shortcode( $atts, $content = null ){
	extract( shortcode_atts( array(
		'place' => null,
		'distance' => null,
		'walk' => null,
		'bus' => null,
		'train' => null,
		'airplane' => null,
		'car' => null,
		'ship' => null,
		'time' => null,
		'label' => null,
	), $atts ) );
	$content = do_shortcode( shortcode_unautop( $content ) );
	global $my_global_number;
	$my_global_number = $my_global_number + 1;
	if ($walk) {
		$time =  $walk;		
		$label = 'walk';
	}
	if ($bus) {
		$time =  $bus;
		$label = 'bus';
	}
	if ($train) {
		$time =  $train;
		$label = 'train';
	}
	if ($airplane) {
		$time =  $airplane;
		$label = 'airplane';
	}
	if ($car) {
		$time =  $car;
		$label = 'car';
	}
	if ($ship) {
		$time =  $ship;
		$label = 'ship';
	} 
	$tag .= '<div class="course">'.
				'<p class="spot">'. 
					'<i class="num">'. $my_global_number. '</i>'.
					$place .
				'</p>'.
				'<div class="content">'.
					'<p>'. $content . '</p>'.
				'</div>'.
			'</div>'.
			'<div class="move">'.
				'<ul>'. 
					'<li class="distance">'. $distance . '</li>'.
					'<li class="time '. $label . '">'. $time . '</li>'.
				'</ul>'.
			'</div>';
		
	return apply_filters('travel_timeline_item_tag', $tag);
}
endif;

[travel_timeline]
[travel_ti place="目的地" distance="10km" car="1分" bus="2分" airplane="3分" train="4分" walk="5分" ship="6分"]ここにテキストを書きます[/travel_ti]
[travel_ti place="目的地" distance="10km" car="1分" bus="2分" airplane="3分" train="4分" walk="5分" ship="6分"]ここにテキストを書きます[/travel_ti]
[travel_ti place="目的地" distance="10km" car="1分" bus="2分" airplane="3分" train="4分" walk="5分" ship="6分"]ここにテキストを書きます[/travel_ti]
[/travel_timeline]

[travel_timeline]
[travel_ti place="目的地" distance="10km" airplane="3分" walk="5分"]ここにテキストを書きます[/travel_ti]
[/travel_timeline]

[travel_timeline]
[travel_ti place="目的地" distance="10km" car="1分"]ここにテキストを書きます[/travel_ti]
[/travel_timeline]