WordPressで年表を作る方法｜タイムラインの選び方とRepeater実装

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

WordPressの年表は、既成のタイムライン機能を使うか、年と出来事の入力欄を自作するかで選びます。演出をすぐ使いたい場合と、自サイトの更新項目を固定したい場合では必要な仕組みが違うためです。この記事ではRepeaterによる実装例を示し、並び順と長い文章の表示まで確認します。

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

年表プラグインを使うか、自サイト用の入力欄を作るか

専用プラグインは、既存デザインや年表向け機能をすぐ使いたい場合の候補です。Lazy Blocksでの自作は、必要項目と見た目を絞って管理したい場合に向きます。導入前に更新状況・必要機能・既存データの移し方を比べてください。

選択肢	費用の区分	確認する機能・運用
Cool Timeline	無料〜有料	縦型タイムライン・ページネーション対応 Pro版で横型レイアウト・カテゴリーフィルター等 有効インストール2万以上・継続更新中
Timeline Express	無料〜有料	無料版は単一タイムラインのみ 最終更新が数年前で、最新のWordPressでの動作確認が取れていない 新規導入は慎重に検討したい
Lazy Blocksで自作	無料	表示コードとデザインを自分で定義する 表示コードとCSSを自分で保守する テンプレートの導入後も表示と操作の確認が必要

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

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

年と出来事をRepeaterの子コントロールにし、1行を一つの出来事として入力します。同じ年に複数の出来事がある場合や、説明文が長い場合も想定して、入力例を2～3件用意してから出力を作りましょう。

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

以下のPHPは、入力した項目をRepeaterの順番で出力します。年だけを読み取って自動ソートするコードではないため、たとえば「2024→2025→2026」のように運用上の並びを決めて入力してください。同一年の出来事、空欄、長い説明を含む下書きで確認すれば、更新時に起きやすい崩れも見つけられます。

<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を検証環境へ読み込む方法もあります。完成形を見て、必要な項目だけ残すと設計しやすくなります。インポート後は自分のテーマとスマホ幅で確認してください。

まとめ

導入の判断は、沿革を数件入力して、追加・並べ替え・修正を続けられるかで行います。完成した画面だけでなく、スマホで長い説明を読めるかも確認してください。入力欄を自作する場合はこの記事の小さな構成を基準にし、必要な装飾だけを追加しましょう。

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

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

装飾を追加する前に、年の並び順、空欄、長い説明文、スマホでの折り返しを確認しましょう。公開後の更新担当者が同じ手順で追加できることも、完成の判断基準です。