年表(タイムライン)ブロックを自作する方法｜主要プラグイン比較とLazy Blocksでの実装

この記事は、当サイトの運営者が実際にLazy Blocks（Pro版含む）を導入・検証した上で執筆しています。他のプラグインについては公式ドキュメント・WordPress.org掲載情報を精査しています。掲載しているPHPコードは実機で動作確認済みです。

会社の沿革ページやプロフィールの経歴欄に、年表（タイムライン）形式のコンテンツを入れたいと思ったことはないでしょうか。専用プラグインを入れる方法もありますが、実はLazy Blocksを使えば、自分のサイト専用の年表ブロックを無料版の範囲だけで自作できます。

Repeaterの基本操作やPHP出力コードの書き方を先に確認したい場合は、WordPressで料金表ブロックを自作する方法もあわせてご覧ください。同じ考え方で年表ブロックも作れます。

主要な年表プラグインとの比較

専用プラグインを使う場合、代表的な選択肢は次の2つです。あわせてLazy Blocksでの自作という選択肢も比較しました。

Cool Timelineは継続的に更新されており、多機能な年表を素早く作りたい場合の有力な選択肢です。一方Timeline Expressは、本記事執筆時点で数年間更新が止まっており、WordPress管理画面でも「最新のメジャーリリースでテストされていません」という警告が表示されます。新規に導入するプラグインとしてはおすすめしません。

Lazy Blocksで年表ブロックを自作する

プラグインを追加せず、既存のLazy Blocksだけで年表を作りたい場合は、Repeaterコントロールで年・出来事のペアを繰り返し入力できるようにします。

コントロール名（slug）	種類	配置	役割
timeline_list	Repeater	Inspector	年表の項目を1件ずつ格納する親コントロール
timeline_year	Text	Content（timeline_listの子）	年（例：2020年）
timeline_event	Textarea	Content（timeline_listの子）	出来事の説明文

「Code」タブのPHP出力欄には、以下のようなコードを書きます。Repeaterのデータをforeachでループし、年が新しい・古いに関わらず入力した順番のまま出力する、シンプルな構成です。

<div class="my-timeline">
<?php foreach ( $attributes['timeline_list'] as $item ) : ?>
    <div class="my-timeline-item">
        <div class="my-timeline-year"><?php echo esc_html( $item['timeline_year'] ); ?></div>
        <div class="my-timeline-event"><?php echo nl2br( esc_html( $item['timeline_event'] ) ); ?></div>
    </div>
<?php endforeach; ?>
</div>

.my-timeline {
    border-left: 3px solid #38E0E0;
    margin-left: 12px;
    padding-left: 24px;
}
.my-timeline-item {
    position: relative;
    margin-bottom: 24px;
}
.my-timeline-item::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #38E0E0;
}
.my-timeline-year {
    font-weight: bold;
    font-size: 15px;
    color: #1a1a2e;
}
.my-timeline-event {
    margin-top: 4px;
    line-height: 1.7;
}

PHP出力コードの書き方（esc_html()でのエスケープ、名前付き関数を書けないeval()の制約など）の詳しい解説は、料金表ブロックを自作する方法の記事で説明しているルールがそのまま当てはまります。

実は完成品も無料配布しています

ここまで自作の手順を紹介しましたが、実は当サイトでは同種の年表ブロック（沿革・年表）を含む装飾ブロック一式を、JSONファイルとして無料配布しています。インポートするだけで使えるため、ゼロから作る手間を省きたい場合はこちらもご検討ください。

まとめ

年表コンテンツは、多機能な専用プラグイン（Cool Timelineなど）を使う方法と、Lazy Blocksで自作する方法の2択です。デザインを自サイトのトーンに合わせたい、プラグイン依存を増やしたくないという場合は、自作または無料テンプレートの利用を検討してみてください。

自作するなら、完成品を先に見ておくと早いです。

沿革・年表ブロックは無料版で動く形で配布しています。読み込んでから自分好みに崩していくほうが、白紙から組むより手間が少ないはずです。

装飾の幅をもっと広げたくなったら、Pro版向けのブロック集も用意しています。当サイト経由でPro版を購入された方への特典です。