中〜上級者向け｜オリジナルテーマでステップバーを動的に実装する方法【PHP使用】

2025-06-27

記事内にプロモーションを含む場合があります。

中〜上級者向け｜オリジナルテーマでステップバーを動的に実装する方法【PHP使用】

ワンクリックで目的地へGO！

はじめに：ステップバーを動的に制御したいあなたへ

複数ページにまたがるお問い合わせフォームや申込導線で、「今どのステップにいるか」を表示するステップバー。

前回投稿した記事①では、WordPressテーマ（SWELLなど）を使った初心者向けの方法を紹介しました。

ありぃブログ

初心者向け｜WordPressテーマでステップバーを実装する方法【SWELL対応／コピペOK】 WordPressテーマ（SWELLなど）で「Step1→Step2→Step3」のステップバーを実装する方法を、HTML・CSSだけで解説。コピペでOKの初心者向け手順付き！

今回は、PHPを使ってオリジナルテーマに組み込む方法をご紹介します。

ステップバーの表示をテンプレートパーツ化し、ページごとに動的にハイライトを切り替える方法なので、 コードで柔軟に制御したい中〜上級者向けの構成になっています。

ステップバーの表示イメージ（Step01 → Step02→ Step03）

こんな人におすすめ！

オリジナルテーマを使っていて、ページごとに処理を出し分けたい
共通パーツ化して保守性・再利用性を高めたい
PHPで制御することで手間を減らしたい
「毎回コピペ」ではなく、仕組みでスマートに管理したい方

基本の仕組み：テンプレートパーツ化＋動的制御の考え方

ステップバーは、複数ページで共通して使うUIパーツです。
そのため「1つのファイルにまとめて管理できる仕組み＝テンプレートパーツ化」することで、保守性・再利用性がグッと高まります。

さらに、ページごとに「現在のステップ」を自動的に切り替えるには、PHPの is_page() を使って判定します。

もし、ステップのラベルや数がページによって違う場合は、set_query_var() で変数を渡す方法を使えば、
1つのテンプレートパーツでも柔軟に出し分けができます。

この方法は PHP だけで完結し、JavaScript や jQuery の知識は一切不要です。
「動的＝JSが必要？」と不安になる方もいるかもしれませんが、ページ単位の切り替えであれば PHPのみで安全・確実に制御可能です。

実装ステップ

STEP

テンプレートパーツファイル（step-bar.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 クラスを付与する構造です。
比較演算には === を使い、厳密な判定とバグ回避をしています。

STEP

各テンプレートファイルから読み込む

それぞれのステップページの該当箇所に以下を記述します。

例：

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');
?>

STEP

CSSスタイルを整える

この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;
  }
}

※フォントやカラーはサイトの雰囲気に合わせて自由に変更してください！

例えば…