【Cocoon】タイムラインで手順説明を表示する

最近ワードプレスのテーマ Cocoon のカスタマイズにハマっているタロです。

今回は Cocoon のカスタマイズを紹介してくれているぽんひろさんの記事を参考に、タイムライン表示をこのブログ仕様にカスタマイズしてみました♩

今回はCSSだけでなくPHPのコードのコピペも行うので少し難易度が高いですがコピペで実現できる内容なのでCocoonユーザーであれば実装しておきたいコードの一つだと思います。

完成イメージ

この記事ではコピペだけで以下のタイムライン表示を実装します！

利用方法はとっても簡単でショートコードを貼り付けるだけ！！

具体的には↓↓

[ptimeline marker="icon" icon="f00c"]
[ti label="STEP01" title="タイトル1"]ここにテキストここにテキストここにテキスト[/ti]
[ti label="STEP02" title="タイトル2"]ここにテキストここにテキストここにテキスト[/ti]
[ti label="STEP03" title="タイトル3"]ここにテキストここにテキストここにテキスト[/ti]
[/ptimeline]

タイムラインカスタマイズの手順

カスタマイズ手順は以下の通り。

コピペでさくっとできます♩

style.css にコードをコピペ

下記のコードを style.css にコピペします。

/* タイムライン
-------------------------------------------------- */
.ptimeline-wrap{
    margin:0 auto 2rem;
}
.ptimeline-wrap .ptimeline{
    padding:0 !important;
    list-style:none !important;
}
.ptimeline-wrap .ptimeline-label {
    padding: 3px 0 0 2px;
    color: #aaa;
    font-size: 12px;
    font-weight: 500;
}
.ptimeline-wrap .ptimeline-title {
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.5;
    color:$main-color;
}
.ptimeline-wrap .ptimeline-main {
    margin-top: 0.5em;
    padding: 0 0 1.5em;
    font-size: 0.9em;
    line-height: 1.8;
    border-bottom: dashed 1px #ddd;
    color:#555;
}
.ptimeline-wrap .ptimeline-main img{
  display:block;
  margin:1em auto;
}
.ptimeline-wrap .ptimeline-item {
    position: relative;
    padding: 0 0 1em 1.5em !important;
    margin-bottom:0 !important;
    border:none;
}
.ptimeline-wrap .ptimeline .ptimeline-item:before {
    content: "";
    width: 3px;
    background: #eee !important;
    display: block;
    position: absolute;
    top: 25px;
    bottom: -3px;
    left: 5px;
}
.ptimeline-wrap .ptimeline-item:last-child:before{
    content:none;
}
/*********************************
* タイムライン マーカー
*********************************/
.ptimeline-wrap .ptimeline-marker{
    display: block;
    position: absolute;
    content: "";
    top: 6px;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: solid 3px $main-color;
}
.ptimeline-wrap .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .ptimeline-item:last-child .ptimeline-marker{
    background:$main-color;
}
/*四角 */
.ptimeline-wrap .square .ptimeline-marker{
    border-radius: 0;
}
/* アイコン*/
.ptimeline-wrap .icon .ptimeline-item .ptimeline-marker{
    content:unset;
    border:none !important;
    background:none !important;
}
.ptimeline-wrap .icon .ptimeline-item .ptimeline-marker:before{
    font-family: "Font Awesome 5 Free";
    top: -1px;
    left: 0;
    position:absolute;
    font-weight:bold;
    font-size:16px;
    line-height:1;
    color:$main-color;
}
.ptimeline-wrap .icon .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .icon .ptimeline-item:last-child .ptimeline-marker{
    background:none !important;
}

functions.php にコードをコピペ

次に下記のコードを functions.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('ptimeline', 'tl_shortcode');
  if ( !function_exists( 'tl_shortcode' ) ):
  function tl_shortcode( $atts, $content = null ){
  extract( shortcode_atts( array(
      'marker' => null,
      'icon' => null,
    ), $atts ) );
    $content = remove_wrap_shortcode_wpautop('ti', $content);
    $content = do_shortcode( shortcode_unautop( $content ) );
    if ( $icon ):
     $tag .= '<style type="text/css">.ptimeline-wrap .'.$icon.' .ptimeline-item .ptimeline-marker:before{ content:"\\'.$icon.'";}</style>';
    endif;
    $tag .= '<div class="ptimeline-wrap">'.
              '<ul class="ptimeline '.$marker.' '.$icon.'">'.
                $content.
              '</ul>'.
            '</div>';
    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(
      'title' => null,
      'label' => null,
      'icon_item' => null,
    ), $atts ) );
    $content = do_shortcode( shortcode_unautop( $content ) );
    if ($icon_item):
     $tag .= '<style type="text/css">.ptimeline-wrap .ptimeline-item .'.$icon_item.':before{ content:"\\'.$icon_item.'" !important;}</style>';
    endif;
    $tag .= '<li class="ptimeline-item">'.
              '<div class="ptimeline-label">'.$label.'</div>'.
               '<div class="ptimeline-title">'.$title.'</div>'.
               '<div class="ptimeline-main">'.$content.'</div>'.
              '<div class="ptimeline-marker '.$icon_item.'"></div>'.
            '</li>';
    return apply_filters('timeline_item_tag', $tag);
  }
  endif;

あとは記事内にショートコードを貼り付けて実際にタイムラインが表示がされるか確認してみてください。

具体的な使用例

ショートコードに引数のオプションを渡さない場合丸い点のアイコンが表示されます。

[ptimeline]
[ti label="STEP01" title="タイトル1"]ここにテキストここにテキストここにテキスト[/ti]
[ti label="STEP02" title="タイトル2"]ここにテキストここにテキストここにテキスト[/ti]
[ti label="STEP03" title="タイトル3"]ここにテキストここにテキストここにテキスト[/ti]
[/ptimeline]

より詳しいカスタマイズは本家の記事を参考に！！

よいCocoonカスタマイズライフを♩

読むな危険！Cocoon カスタマイズを一挙公開中

このブログでも実装しているCocoonカスタマイズを大公開！！

デザインには正解がないためやればやるほど沼にハマってしまいます。

ですので、Cocoon ユーザーは絶対に読まないでください。