Cocoonカスタマイズ まとめ記事公開中

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

WordPress
スポンサーリンク

こんにちは!
WordPressカスタマイザーのYoshitakaです!

相方のKanaに旅行の日程に使えるタイムラインが欲しいと言われたので、サクッと自作してみました。

ということで今回は、旅行系のブログを書かれている方などに旅行日程タイムラインのカスタマイズ方法をご紹介したいと思います!

では、早速カスタマイズしていきましょう!

スポンサーリンク

完成イメージ

完成イメージは以下です。

1松江駅

ここに説明文を入力します

  • 2km
  • バス 30分

2松江城


このように写真も挿入できます

  • 500m
  • 徒歩 3分

3塩見縄手

交通の種類は全6種類を用意しました!
①飛行機 ②電車 ③車 ④バス ⑤船 ⑥徒歩

  • 2km
  • 船 30分

4カラコロ工房

ここに説明文を入力します

  • 25km
  • 車 1時間

5出雲空港

ここに説明文を入力します

  • 600km
  • 飛行機 1時間

6羽田空港

ここに説明文を入力します

  • ???km
  • 電車 ?時間

7Y&K Studio

製作者:Yoshitaka, 監修:Kana

スポンサーリンク

カスタマイズ方法

手順は以下の通りです。

カスタマイズ手順

  • STEP1
    CSSをコピー & ペースト
    外観 > テーマエディター > style.cssにペーストします
  • STEP2
    PHPをコピー & ペースト
    外観 > テーマエディター > function.phpにペーストします
  • STEP3
    AddQuickTagに登録
    AddQuickTagに登録すると次回から使いやすくなります

STEP1 : CSSをコピー & ペースト

.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";
}

STEP2 : PHPをコピー & ペースト

//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;

STEP3 : AddQuickTagに登録

以下のコードをAddQuickTagに登録してください。

[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]

car, busなどのオプションは必要な要素以外、消して使ってください。
例えば, airplaneとwalkを使いたい場合は

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

であり、carだけ使いたい場合は

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

となります。

スポンサーリンク

導入例

スポンサーリンク

WordPressカスタマイズしています

今回は、相方のKanaに言われて旅行日程用タイムラインを作成しました。

これ以外にも色々とカスタマイズ記事を執筆しておりますので、ご覧ください。

カスタマイズ依頼などありましたら、コメントかお問い合わせからメール頂けると対応いたします。

コメント