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

【Cocoon】レスポンシブ対応のタイムラインをカスタマイズ!

WordPress

レスポンシブ対応したタイムラインをWordPressで使いたいなと思ったので、HTMLとCSSだけで作ってみました。

この記事は、CodepenのCSS3 Timelineを元にデザインしております。

スポンサーリンク

完成イメージ

今回、作成したタイムラインは以下の通りです。

  • 2019/10/14

    Y&K Studio – 二人三脚ブログ- を御覧くださり、ありがとうございます。
    このブログでは主に写真系をメインとした記事を執筆しております。

    Cocoonのカスタマイズ記事はアイデア不足で不定期なので、もし良いアイデアがありましたらコメント頂けると嬉しいです。

  • 10/14/2019

    Y&K Studio – 二人三脚ブログ- を御覧くださり、ありがとうございます。
    このブログでは主に写真系をメインとした記事を執筆しております。

    Cocoonのカスタマイズ記事はアイデア不足で不定期なので、もし良いアイデアがありましたらコメント頂けると嬉しいです。

  • Oct 14 2019

    Y&K Studio – 二人三脚ブログ- を御覧くださり、ありがとうございます。
    このブログでは主に写真系をメインとした記事を執筆しております。

    Cocoonのカスタマイズ記事はアイデア不足で不定期なので、もし良いアイデアがありましたらコメント頂けると嬉しいです。

スポンサーリンク

カスタマイズ方法

手順は以下の通りです。

カスタマイズ手順
  • STEP1
    CSSをコピー
    外観 > テーマエディター > style.cssにペーストします
  • STEP2
    PHPをコピー
    外観 > テーマエディター > function.phpにペーストします
  • STEP3
    ショートコードを使用
    使いたい場所にショートコードをコピー&ペースト
function.phpにコピーする際は必ずバックアップを取ってから行うようにしましょう。

STEP1 : CSSをコピー

下記のコードをコピーしてください。

ペーストする場所は、「外観 > テーマエディター > style.css(子テーマ)」。もしくは、「外観 > カスタマイズ > 追加CSS」のどちらでもOKです。
#timeline {
    list-style: none;
    margin: 50px 0 30px 120px;
    padding-left: 30px;
    border-left: 8px solid #FFC679;
}
#timeline li {
    margin: 40px 0;
    position: relative !important;
}
#timeline p {
    margin: 0 0 15px;
}
#timeline .date {
    margin-top: -10px;
    top: 50%;
    left: -158px;
    font-size: 0.95em;
    line-height: 20px;
    position: absolute;
}
#timeline .circle {
    margin-top: -10px;
    top: 50%;
    left: -44px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: 5px solid #FFC679;
    border-radius: 50%;
    display: block;
    position: absolute;
}
#timeline .content {
    max-height: 20px;
    padding: 50px 20px 0;
    border-color: transparent;
}
#timeline .content:before {
    content: "";
    width: 0;
    height: 0;
    border: solid transparent;
    position: absolute;
    pointer-events: none;
    right: 100%;

    border-right-color: inherit;
    border-width: 20px;
    top: 50%;
    margin-top: -20px;
}
#timeline .content:after {
    content: "";
    width: 0;
    height: 0;
    border: solid transparent;
    position: absolute;
    pointer-events: none;
    right: 100%;

    border-right-color: #ffffff;
    border-width: 17px;
    top: 50%;
    margin-top: -17px;
}
#timeline .content p, #timeline .content p a{
    max-height: 0;
    color: transparent;
    text-align: justify;
    word-break: normal;
    hyphens: auto;
    overflow: hidden;
}
#timeline .content img{
    opacity:0;
    max-width: 0;
}
#timeline label {
    font-size: 1.3em;
    position: absolute;
    z-index: 0;
    cursor: pointer;
    top: 8px;
    transition: transform 0.2s linear;
    max-width:600px;
}
#timeline .radio {
    display: none;
}
#timeline .radio:checked + .relative label {
    cursor: auto;
    transform: translateX(42px);
    padding-top: 10px;
}
#timeline .radio:checked + .relative .circle {
    background: #f98262;
}
#timeline .radio:checked ~ .content {
    max-height: 1000px;
    border: solid #FFC679;
    border-radius: 10px;
    margin-right: 20px;
    transform: translateX(20px);
    transition: max-height 1.5s linear, border-color 0.5s linear, transform 0.3s linear;
}
#timeline .radio:checked ~ .content p {
    max-height: 1000px;
    color: #000000;
    transition: color 0.3s linear 0.3s;
    padding-top:10px;
}
#timeline .radio:checked ~ .content a {
    color: #FFC679;
    transition: color 0.3s linear 0.3s;
}
#timeline .radio:checked ~ .content img {
    opacity:1;
    width: 100%;
    -webkit-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-in 0.5s;
}

@media screen and (max-width: 480px){
	#timeline {
		margin: 50px 0 30px 90px;
		padding-left: 10px;
	}
	#timeline li {
		margin: 40px 0 40px 25px;
	}
	#timeline .date {
		left: -126px;
		font-size: 0.65em;
	}
	#timeline .circle {
		left: -49px;
	}
	#timeline label {
		font-size: 0.9em;
		font-weight:700;
	}
	#timeline .radio:checked + .relative label {
		transform: translateX(22px);
	}
	#timeline .radio:checked ~ .content {
		font-size: 0.7em;
		transform: translateX(0px);
		transition: max-height 0.8s linear, border-color 1.0s linear, transform 0.4s linear;
		margin-right: 5px;
	}
	#timeline .radio:checked ~ .content p, #timeline .radio:checked ~ .content p * {
		transition: color 0.4s linear 0.4s;
	}
}
@media screen and (max-width: 380px){
	#timeline label {
		font-size: 0.7em;
	}
}
.wp-caption {
    border: 1px solid #ffffff;
    background-color: #ffffff;
}

STEP2 : PHPをコピー

WordPress利用者に向けてショートコードを作成する為のPHPです。

下記コードをfunction.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;
  }
}

//レスポンシブ対応タイムラインショートコード
add_shortcode('r_timeline', 'tl_shortcode');
if ( !function_exists( 'tl_shortcode' ) ):
  function tl_shortcode( $atts, $content = null ){
  $content = remove_wrap_shortcode_wpautop('ti', $content);
  $content = do_shortcode( shortcode_unautop( $content ) );
  $tag .= '<ul id="timeline">'.
            $content.
          '</ul>';
  return apply_filters('timeline_tag', $tag);
}
endif;
 
//レスポンシブ対応タイムラインショートコード中身
add_shortcode('ti', 'tl_item_shortcode');
if ( !function_exists( 'tl_item_shortcode' ) ):
function tl_item_shortcode( $atts, $content = null ){
  extract( shortcode_atts( array(
    'date' => null,
    'label' => null,
	'null' => null,
  ), $atts ) );
  $content = do_shortcode( shortcode_unautop( $content ) );
  $tag .= '<li>'.
            '<input class="radio" id="work1" name="works" type="radio">'.
            '<div class="relative">' .
              '<label for="work1">' . $label . '</label>' .
              '<span class="date">' . $date . '</span>' .
              '<span class="circle">' . $null . '</span>' .
            '</div>' .
            '<div class="content">' . '<p>' . $content . '</p>' . '</div>'.
          '</li>';
  return apply_filters('timeline_item_tag', $tag);
}
endif;

STEP3 : ショートコードを使用

以下のショートコードを貼ることで、タイムラインを使うことができます。

ショートコード

[r_timeline] 
[r_ti date="d/m/y" label="TimeLine Title" n="0" ]ここにテキストを書きます[/r_ti] 
[r_ti date="d/m/y" label="TimeLine Title" n="1" ]ここにテキストを書きます[/r_ti] 
[r_ti date="d/m/y" label="TimeLine Title" n="2" ]ここにテキストを書きます[/r_ti]
[r_ti date="d/m/y" label="TimeLine Title" n="3" ]ここにテキストを書きます[/r_ti] 
[r_ti date="d/m/y" label="TimeLine Title" n="4" ]ここにテキストを書きます[/r_ti]
[/r_timeline]
新しく要素を追加する時は、「n」の値を変更してください。
「n」の値が同じ場合は、正しく動作いたしません。

DEMO

  • d/m/y

    ここにテキストを書きます

  • d/m/y

    ここにテキストを書きます

  • d/m/y

    ここにテキストを書きます

  • d/m/y

    ここにテキストを書きます

  • d/m/y

    ここにテキストを書きます

AddQuickTagに登録しておく

WordPressでお使いの方は、QuickTagに保存しておくと何度も使う際に便利です!

AddQuickTagの使い方に関しては以下のリンクを見ることをオススメします!

もし、デザインのカスタマイズなどのご要望が御座いましたら、コメント頂けると幸いです。

スポンサーリンク

導入済みのブログをサイト紹介させて頂きたいと思います!

「この記事を見て導入したよ!」という方でSNSやブログでこの記事を紹介していただいた場合、こちらでブログを紹介させていただきます!

ご連絡お待ちしております!

コメント