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;
  }
}
endif;

//レスポンシブ対応タイムラインショートコード
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やブログでこの記事を紹介していただいた場合、こちらでブログを紹介させていただきます!

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

★193万円受給しながら転職可能★
「MamaEdu」プロジェクトは、Web・ITの専門スキルを持ち、活き活きと働く女性を増やしていくことを目的とした活動!

自立支援教育訓練給付金や高等職業訓練促進給付金のフォローを受けることができるため、最大193万円の給付金を貰いながら転職活動が可能です!
この記事を書いた人

Y&K Studioの管理人・執筆担当。
現役エンジニアで趣味は写真撮影や動画制作
Weebill LabとSony α7iiiが相棒。

詳しいプロフィールはこちらから。

\Y&K Studio のフォローはこちら/
WordPress
スポンサーリンク
\ SHARE BUTTONS /

コメント

  1. とてもいい記事で参考にさせていただきました!!ありがとうございます(^人^)感謝

    1点失礼します。

    STEP2 : PHPをコピー の
    14行目 “endif;” が抜けているので、下記のエラーが出ています!
    syntax error, unexpected end of file, expecting elseif (T_ELSEIF) or else (T_ELSE) or endif (T_ENDIF)

    お手隙の際、”endif;” の追加検討お願いいたします!

    • けんたろう様

      コメントありがとうございます!
      ご指摘の通り、endifが抜けておりました。

      ありがとうございます。

タイトルとURLをコピーしました