スポンサーリンク

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

Cocoon
スポンサーリンク

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

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

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

スポンサーリンク

完成イメージ

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

  • STEP01

    タイトル1
    ここにテキストここにテキストここにテキスト
  • STEP02

    タイトル2
    ここにテキストここにテキストここにテキスト
  • STEP03

    タイトル3
    ここにテキストここにテキストここにテキスト

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

具体的には↓↓

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

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

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

  • STEP01

    CSSのコピペ
    style.css にコードをコピペ
  • STEP02

    PHPのコピペ
    functions.phpにコードをコピペ

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

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 にコピペします。

コピペ前に 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]
  • STEP01
    タイトル1
    ここにテキストここにテキストここにテキスト
  • STEP02
    タイトル2
    ここにテキストここにテキストここにテキスト
  • STEP03
    タイトル3
    ここにテキストここにテキストここにテキスト

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

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

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

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

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

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

コメント

  1. […] 【Cocoon】タイムラインで手順説明を表示する最近ワードプレスのテーマ Coc… […]

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