初心者向け｜WordPressテーマ（SWELLなど）でステップバーを実装する方法

2025-06-21

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

初心者向け｜WordPressテーマ（SWELLなど）でステップバーを実装する方法

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

はじめに：ステップバーってなに？

Webサイトや申込フォームなどでよく見る「Step1 → Step2 → Step3」のような表示、それがステップバーです。

ユーザーが「今どの段階にいるのか」を視覚的に理解できるようになり、とくにお問い合わせや予約フォームなど、複数ページにまたがる導線では安心感や離脱防止にもつながります。

今回は、SWELLなどのWordPressテーマを使っていて、HTMLやPHPがわからない人でも、 簡単なHTMLとCSSの追加だけで実装できる方法を紹介します。
※JavaScriptやPHPの知識は不要です。

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

こんな人におすすめ！

「今どこにいるか」がわかる表示を入れたいけど、プラグインやPHPは難しそう…
SWELLやTHE THORなど、ビジュアルで編集できるWordPressテーマを使っている
コピペでとりあえずステップバーを付けてみたい！

この方法は、アナログだけど確実に動く、初心者向けの手法です！

実装ステップ

STEP

ステップバーのHTMLコードを貼り付ける

SWELLの「カスタムHTMLブロック」や「コードブロック」に、以下のコードをコピペしてください。

<div class="step-bar">
  <ul class="step-list">
    <li class="step current">Step 01<br><span>内容入力</span></li>
    <li class="step">Step 02<br><span>内容確認</span></li>
    <li class="step">Step 03<br><span>送信完了</span></li>
  </ul>
</div>

この中の「current」クラスが今いるステップになります。（この例では「Step 01」が強調されます）

STEP

ページごとに「.current」を手動で設定する

入力ページ：Step 01に.current
確認ページ：Step 02に.current
完了ページ：Step 03に.current

というように、各ページでどの<li>にclass="current"をつけるかを手動で切り替えます。

1ページ目の例：

<div class="step-bar">
  <ul class="step-list">
    <li class="step current">Step 01<br><span>内容入力</span></li>
    <li class="step">Step 02<br><span>内容確認</span></li>
    <li class="step">Step 03<br><span>送信完了</span></li>
  </ul>
</div>

2ページ目の例：

<div class="step-bar">
  <ul class="step-list">
    <li class="step">Step 01<br><span>内容入力</span></li>
    <li class="step current">Step 02<br><span>内容確認</span></li>
    <li class="step">Step 03<br><span>送信完了</span></li>
  </ul>
</div>

3ページ目の例：

<div class="step-bar">
  <ul class="step-list">
    <li class="step">Step 01<br><span>内容入力</span></li>
    <li class="step">Step 02<br><span>内容確認</span></li>
    <li class="step current">Step 03<br><span>送信完了</span></li>
  </ul>
</div>

あわせて確認しよう：ページごとの「ページID」

ステップバーのCSSを反映させるには、ページIDを正しく指定する必要があります。

WordPressの編集画面URLに post=◯◯ の数字がある（これがページID）
CSSでは .page-id-◯◯ として使う
ステップの数だけIDも分かれているはずなので、各ページごとにID＋currentの位置を確認しておくのがポイント！

STEP

SWELLのカスタムCSSにスタイル追加

次に、管理画面「外観 → カスタマイズ → 追加CSS」に以下を貼り付けましょう。

ページID：.page-id-1234は各自の環境に合わせて変更してください。
→ここ変更しないとCSSのスタイルが反映されませんのでご注意！

/* ========= ステップバー位置ハイライト ========= */
.page-id-1234 .step-bar {
  margin-bottom: 40px;
  text-align: center;
}

.page-id-1234 .step-list {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.page-id-1234 .step {
  position: relative;
  padding: 10px 15px;
  font-size: 0.9rem;
  color: #aaa;
  border-bottom: 3px solid #ddd;
  transition: all 0.3s ease;
}

.page-id-1234 .step span {
  font-size: 0.75rem;
  display: block;
  margin-top: 5px;
}

.page-id-1234 .step.current {
  color: #1e3a5f; /* テキストカラー */
  border-bottom: 3px solid #5ac8fa; /* ハイライトの下線カラー */
  font-weight: bold;
}

※ステップの色はサイトデザインに合わせて調整してOK！