はじめに:ステップバーを動的に制御したいあなたへ
複数ページにまたがるお問い合わせフォームや申込導線で、 「今どのステップにいるか」を表示するステップバー。
前回投稿した記事①では、WordPressテーマ(SWELLなど)を使った初心者向けの方法を紹介しました。

今回は、PHPを使ってオリジナルテーマに組み込む方法をご紹介します。
ステップバーの表示をテンプレートパーツ化し、ページごとに動的にハイライトを切り替える方法なので、 コードで柔軟に制御したい中〜上級者向けの構成になっています。
ステップバーの表示イメージ(Step01 → Step02→ Step03)

- オリジナルテーマを使っていて、ページごとに処理を出し分けたい
- 共通パーツ化して保守性・再利用性を高めたい
- PHPで制御することで手間を減らしたい
- 「毎回コピペ」ではなく、仕組みでスマートに管理したい方
基本の仕組み:テンプレートパーツ化+動的制御の考え方
ステップバーは、複数ページで共通して使うUIパーツです。
そのため「1つのファイルにまとめて管理できる仕組み=テンプレートパーツ化」することで、保守性・再利用性がグッと高まります。
さらに、ページごとに「現在のステップ」を自動的に切り替えるには、PHPの is_page()
を使って判定します。
もし、ステップのラベルや数がページによって違う場合は、set_query_var()
で変数を渡す方法を使えば、
1つのテンプレートパーツでも柔軟に出し分けができます。
この方法は PHP だけで完結し、JavaScript や jQuery の知識は一切不要です。
「動的=JSが必要?」と不安になる方もいるかもしれませんが、 ページ単位の切り替えであれば PHPのみで安全・確実に制御可能です。
実装ステップ
まず、テーマ内の template-parts
フォルダに「step-bar.php」というファイルを作成し、以下のコードを記述します。
テンプレートファイル全体のファイル構造例
/wp-content/themes/your-theme/
├── page-reserve.php
├── page-reserve-confirm.php
├── page-reserve-thanks.php
└── template-parts/
└── step-bar.php ← ここにステップバーの共通パーツを記述
このテンプレートパーツは、どのページからでも共通で呼び出せるステップバーのベースとなります。
<?php
$current_step = (int) get_query_var('current_step', 0); // 渡されたステップ番号を取得(未設定時は0)
?>
<div class="step-indicator">
<div class="step step-1<?= $current_step === 1 ? ' active' : '' ?>">
<span class="step-number">Step 01</span>
<span class="step-text">内容入力</span>
</div>
<div class="step step-2<?= $current_step === 2 ? ' active' : '' ?>">
<span class="step-number">Step 02</span>
<span class="step-text">内容確認</span>
</div>
<div class="step step-3<?= $current_step === 3 ? ' active' : '' ?>">
<span class="step-number">Step 03</span>
<span class="step-text">送信完了</span>
</div>
</div>
get_query_var()
を使ってページ側からステップ番号を受け取り、該当ステップに .active
クラスを付与する構造です。
比較演算には ===
を使い、厳密な判定とバグ回避をしています。
それぞれのステップページの該当箇所に以下を記述します。
例:
- Step1(入力ページ):
page-reserve.php
- Step2(確認ページ):
page-reserve-confirm.php
- Step3(送信完了ページ):
page-reserve-thanks.php
Step1(入力ページ)
<!-- ステップバーハイライト呼び出し -->
<?php
set_query_var('current_step', 1);
get_template_part('template-parts/step-bar');
?>
Step2(確認ページ)
<!-- ステップバーハイライト呼び出し -->
<?php
set_query_var('current_step', 2);
get_template_part('template-parts/step-bar');
?>
Step3(送信完了ページ)
<!-- ステップバーハイライト呼び出し -->
<?php
set_query_var('current_step', 3);
get_template_part('template-parts/step-bar');
?>
このCSSはスマホファースト設計になっています。
PC表示用のスタイルはメディアクエリで上書きしています。
.step-indicator {
display: flex;
justify-content: center;
gap: 20px;
color: #1e3a5f;
}
@media screen and (min-width: 901px) {
.step-indicator {
justify-content: space-between;
max-width: 550px;
gap: 40px;
}
}
.step {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 35px 10px;
border-top: 1px solid #1e3a5f;
border-bottom: 1px solid #1e3a5f;
}
@media screen and (min-width: 901px) {
.step {
padding: 35px 8px;
}
}
.step.active {
color: #5ac8fa;
border-top: 1px solid #5ac8fa;
border-bottom: 1px solid #5ac8fa;
}
.step-number {
font-family: "Marcellus", serif;
font-size: 14px;
letter-spacing: 1.4px;
}
@media screen and (min-width: 901px) {
.step-number {
font-size: 20px;
letter-spacing: 2px;
}
}
.step-text {
font-family: "Yu Mincho", "Hiragino Mincho Pro", "MS PMincho", serif;
font-size: 16px;
letter-spacing: 1.6px;
}
@media screen and (min-width: 901px) {
.step-text {
font-size: 24px;
letter-spacing: 2.4px;
}
}
※フォントやカラーはサイトの雰囲気に合わせて自由に変更してください!
例えば…
- 高級感を出したいときは serif 系のフォント(明朝体)や濃いめの色(ネイビー、ボルドー)
- ポップな印象にしたい場合は sans-serif 系フォント+明るめカラー
- 今回のカラーコードの例:
- メイン色:
#1e3a5f
- アクセント色:
#5ac8fa
(水色)→#CA9AE0
(ライラックパープル)などに置き換え可能
応用例:LP・採用・学習ステップなどにも!
この方法は、
- サービス導線(Step1:選択 → Step2:入力 → Step3:完了)
- 採用ページ(Step1:要項 → Step2:応募 → Step3:面接)
- 診断コンテンツのステップ構成 などにも応用可能です。
再利用性の高い構造なので、一度作っておけば他のページにも使い回しが効きます。
まとめ:柔軟に制御したいならこの方法!
PHPだけでここまでできる!この方法の魅力をもう一度整理すると──
- テンプレートパーツ化で共通化&保守性アップ
- PHPでステップの表示を自動制御できる
- フォーム以外にも広く使える汎用パーツ
- JavaScriptやPHPの高度な知識がなくてもOK!
- ページ遷移型の構成なので、リロードや戻る操作にも強く、実務でも安定性が高い方法です。