【WordPress】タイムラインデザインの作成方法

WordPress
2022.04.19

タイムラインのデザインについて今回は紹介していきたいと思います。
今回紹介する内容は、HTMLとCSSを使った実装方法です。

この記事を読んでわかること

下記のようなタイムラインの作成方法
[ptimeline color=”green”]
  • STEP1
    タイトル1
    ここにテキスト
  • STEP2
    タイトル2
    ここにテキスト
  • STEP3
    タイトル3
    ここにテキスト
    • [/ptimeline]

    タイムラインの作成方法

    STEP1：CSSの実装

    下記のCSSのコードを「Styele.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:#00bfff;
}
.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 #00bfff;
}
.ptimeline-wrap .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .ptimeline-item:last-child .ptimeline-marker{
background:#00bfff;
}
/*四角 */
.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:#00bfff;
}
.ptimeline-wrap .icon .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .icon .ptimeline-item:last-child .ptimeline-marker{
background:none !important;
}
/* 画像*/
.ptimeline-wrap .tl-img .ptimeline-item .ptimeline-marker{
content:unset;
border:none !important;
background:none !important;
}
.ptimeline-wrap .tl-img .ptimeline-item .ptimeline-marker:before {
content:"";
display:inline-block;
background-image:url(ここに画像URL); /* 画像1番目*/
background-size:contain;
background-repeat:no-repeat;
width:40px;
height:40px;
position: relative;
top: -4px;
left: -2px;
}
.ptimeline-wrap .tl-img li:nth-of-type(2) > .ptimeline-marker:before{
background-image:url(ここに画像URL) !important; /* 画像2番目*/
}
.ptimeline-wrap .tl-img li:nth-of-type(3) > .ptimeline-marker:before{
background-image:url(ここに画像URL) !important; /* 画像3番目*/
}
.ptimeline-wrap .tl-img li:nth-of-type(4) > .ptimeline-marker:before{
background-image:url(ここに画像URL) !important; /* 画像4番目*/
}
.ptimeline-wrap .tl-img li:nth-of-type(5) > .ptimeline-marker:before{
background-image:url(ここに画像URL) !important; /* 画像5番目*/
}
.ptimeline-wrap .tl-img .ptimeline-item {
padding: 0 0 1em 3em !important;
}
.ptimeline-wrap .tl-img .ptimeline-item:before {
top: 30px;
left: 15px;
}
/*********************************
* タイムライン カラー
*********************************/
/* ピンク */
.ptimeline-wrap .pink .ptimeline-title{
color:#f7bcbc !important; /* タイトル色 */
}
.ptimeline-wrap .pink .ptimeline-main{
color:#555 !important; /* コンテンツ色 */
}
.ptimeline-wrap .pink .ptimeline-marker{
border: solid 3px #f7bcbc !important; /* マーカー色 */
color:#f7bcbc; /* アイコン色 */
}
.ptimeline-wrap .pink .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .pink .ptimeline-item:last-child .ptimeline-marker{
background:#f7bcbc; /* マーカー色(最初と最後)*/
}
.ptimeline-wrap .pink .ptimeline-item .ptimeline-marker:before{
color:#f7bcbc !important; /* アイコン色 */
}
/*イエロー*/
.ptimeline-wrap .yellow .ptimeline-title{
color:#fdc44f !important; /* タイトル色 */
}
.ptimeline-wrap .yellow .ptimeline-main{
color:#555 !important; /* コンテンツ色 */
}
.ptimeline-wrap .yellow .ptimeline-marker{
border: solid 3px #fdc44f !important; /* マーカー色 */
color:#fdc44f; /* アイコン色 */
}
.ptimeline-wrap .yellow .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .yellow .ptimeline-item:last-child .ptimeline-marker{
background:#fdc44f; /* マーカー色(最初と最後)*/
}
.ptimeline-wrap .yellow .ptimeline-item .ptimeline-marker:before{
color:#fdc44f !important; /* アイコン色 */
}
/*グリーン*/
.ptimeline-wrap .green .ptimeline-title{
color:#2fcdb4 !important; /* タイトル色 */
}
.ptimeline-wrap .green .ptimeline-main{
color:#555 !important; /* コンテンツ色 */
}
.ptimeline-wrap .green .ptimeline-marker{
border: solid 3px #2fcdb4 !important; /* マーカー色 */
color:#2fcdb4; /* アイコン色 */
}
.ptimeline-wrap .green .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .green .ptimeline-item:last-child .ptimeline-marker{
background:#2fcdb4; /* マーカー色(最初と最後)*/
}
.ptimeline-wrap .green .ptimeline-item .ptimeline-marker:before{
color:#2fcdb4 !important; /* アイコン色 */
}.ptimeline-wrap{
margin:0 auto 2rem;
}

     

    STEP2：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('ptimeline', 'tl_shortcode');
if ( !function_exists( 'tl_shortcode' ) ):
function tl_shortcode( $atts, $content = null ){
extract( shortcode_atts( array(
'color' => null,
'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 '.$color.' '.$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 color="色を記載"　marker="マークを記載"] 
 
  • STEP1
    タイトル1
    ここにテキスト
    • 
 
  • STEP2
    タイトル2
    ここにテキスト
    •  
 
  • STEP3
    タイトル3
    ここにテキスト
    •  
[/ptimeline]]

    例えば、色をグリーン、マークを四角にしたい場合は、以下のようなショートコードを書きます。
    [ptimeline color=”green” marker=”square”]

  • STEP1
    タイトル1
    ここにテキスト
  • STEP2
    タイトル2
    ここにテキスト
  • STEP3
    タイトル3
    ここにテキスト
    • [/ptimeline]
    [[ptimeline color="green" marker="square"]
 
  • STEP1
    タイトル1
    ここにテキスト
    • 
 
  • STEP2
    タイトル2
    ここにテキスト
    •  
 
  • STEP3
    タイトル3
    ここにテキスト
    •  
[/ptimeline]]

    上記のように組み合わせ等は自在なので好きなフォーマットを作成いただければと思います！
    アイコンを入れたりなどもできるので、ググればすぐにでてきますよ。

    まとめ

    今回はタイムラインの作成に関する記事でした。
    私自身、タイムラインをよく手順書作成で使っています！
    このおかげで以前より、視覚的にわかりやすい手順書になったのでおすすめです。

    コメント

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