SWELL│パンくずを記事名まで表示させるカスタマイズ

2022.04.042026.10.21

SWELL 2.19.0の標準CSSでは、投稿ページのパンくず末尾にある記事名が非表示になっています。本文で紹介するCSSは、既に出力されている記事名を表示するためのものです。

記事名があえて非表示にされているSWELLのデフォルトのパンくずリストの表示例。

記事名まで表示すると、ホームやカテゴリーから現在の記事までの階層を確認できます。テーマや他のカスタマイズで既に記事名が表示されている場合は、追加する必要はありません。

本記事ではSWELLのパンくずを記事名まで表示させるカスタマイズを紹介します。

SWELLのパンくずを記事名まで表示させるカスタマイズ

追加前に既存の追加CSSを控えておき、同じセレクターを変更するコードがないか確認してください。

下の例では、パンくずリスト全体の折り返しを許可し、投稿ページ（.single）の末尾の記事名を表示します。固定ページやカテゴリー一覧の記事名を新設するコードではありません。

WordPressの管理画面＞外観＞カスタマイズ＞追加CSSを開いて、下記のコードを挿入しましょう。

.p-breadcrumb__list {
    flex-wrap: wrap; /* 記事名が長い場合は折り返す */
}
.single .p-breadcrumb__item:last-child>span.p-breadcrumb__text {
    display: block!important; /* 記事名の表示 */
    opacity: 1; /* 記事名を半透明にしない */
    white-space: pre-wrap;/* 記事名が長い場合は折り返す */
}

旧CSSの参考例（通常は上のコードを使用）

.p-breadcrumb__list {
    flex-wrap: wrap; /* 記事名が長い場合は折り返す */
}
.p-breadcrumb__text {
    display: block!important; /* 記事名の表示 */
}
.p-breadcrumb__item:last-child span {
    opacity: 1; /* 記事名を半透明にしない */
}

長い記事名の表示見本

次はSWELLのパンくずと同じ要素・クラス構成に、上記のCSSを適用した見本です。末尾の記事名はリンクにせず、スマホ幅では折り返して表示します。見本用のスタイルはこの枠内だけに適用しています。

長い記事名が3行に折り返されるパンくずのスマートフォン表示見本 — 2026年10月1日撮影。幅390pxで長い記事名が折り返された状態。

この記事の従来の画像は2022〜2023年の表示例です。上の見本は現在のページで表示を確認できます。サイト上部のパンくずには既存のカスタマイズもあるため、見本とは表示条件が異なります。

パンくずのTOPページの表記を変更する方法

SWELLのデフォルトではホームアイコンの横にホームと記載されています。

ホームの文字列は、リンク先が分かるサイト名などにします。

「外観 → カスタマイズ → サイト全体設定 → パンくずリスト」を開き、「ホームの文字列」を変更します。

ホームの文字列の入力欄 — 2026年10月11日、Windows Chromeで外観 → カスタマイズ → サイト全体設定 → パンくずリストを参照。現在の入力欄を撮影したもので、見本用の文字列を保存した結果ではありません。

以上でホームの部分のテキストが変更されます。

保存してリンク先を確認する

文字列を入力したら、カスタマイザー上部の「公開」を押して保存します。

カスタマイザーを閉じて再び開き、入力欄に保存した文字列が残っていることを確認します。

投稿やカテゴリー一覧を別の公開画面で開き、ホームの表示名とリンク先を確認してください。

この設定で変わるのはホームの表示名で、記事名の表示やリンク先のURLは変わりません。

検証環境では「WAZA 検証ホーム」を保存し、再読み込み後の入力欄と投稿ページの表示が一致し、ホームリンクをEnterキーで開けました。

変更前の文字列も記録し、戻すときはその値へ戻して「公開」を押します。

パンくずのホーム文字列を保存した設定画面 — 2026年10月3日撮影／WordPress 7.1.2・SWELL 2.19.0／保存後に再読み込みした「ホーム」の文字列。

親子カテゴリーと記事名をリンク移動で確認する

確認する場所	確認する結果
親子カテゴリーがある投稿	ホーム・親・子・記事名の順で表示
別の記事へPjaxで移動	末尾だけが移動先の記事名になる
親カテゴリーのリンクをEnterで開く	実際の親カテゴリー一覧へ移動

記事名を表示するCSSを追加したら、親子カテゴリーを設定した記事でも順番を確認してください。

末尾の記事名は現在地なので、リンクを追加せず、ホームや親カテゴリーへのリンクを残します。

2026年10月3日のWordPress 7.1.2 / SWELL 2.19.0では、実Pjaxで別記事へ移動すると末尾の記事名が切り替わり、親と子のリンクが維持されました。

子カテゴリー画面から親のパンくずをEnterキーで開くと、親の一覧とパンくずが表示されました。

Pjaxによる表示切替とスマホ幅での折り返しは別の確認で、今回のPCでの遷移結果だけでスマホの表示完了とはしていません。

階層そのものを変更したい場合は、SWELLのパンくずデータのフックと、投稿のカテゴリー設定を確認します。

親子カテゴリーと記事名、投稿IDを表示した検証記事 — 親と子のリンクを残し、末尾の記事名を表示した実Pjaxの画面。2026年10月3日、隔離したWordPress 7.1.2 / SWELL 2.19.0で撮影。

まとめ

本記事ではSWELLのパンくずを記事名まで表示させるカスタマイズを紹介しました。

カスタマイズ前の記事名が表示されていないパンくずリスト。 — before（2022年当時の表示）

カスタマイズ後に記事名まで表示されるようになったパンくずリスト。 — after（2022年当時の表示）

小さなカスタマイズですがブログ記事の階層が分かりやすい表示になりますので、ぜひ試してみてください。

このカスタマイズの範囲と戻し方

このCSSは画面上の表示を変えるもので、構造化データの項目を追加する処理ではありません。パンくずの階層そのものも変わりません。

追加後はPCとスマホの両方で長い記事名が折り返されることを確認してください。旧CSSはリンク部分などにも広く作用するため、新しい例と同時に追加しないでください。反映されない場合は、追加CSSの公開状態とページキャッシュ、他のCSSによる上書きを確認します。元に戻すときは、今回追加したCSSだけを削除して保存し、必要に応じてキャッシュをクリアします。

関連する実装はSWELLカスタマイズのまとめから探せます。

よくある質問：SWELLでパンくずを記事名まで表示するとき

SWELLのパンくずに、記事名は表示されますか？

SWELL 2.19.0の標準CSSでは、投稿ページの末尾の記事名が非表示です。掲載CSSで表示できます。既に表示されている場合は、追加する必要はありません。

記事名はリンクになりますか？

なりません。末尾の記事名は現在地を示すテキストとして表示し、ホームや親カテゴリーへのリンクを残します。

スマホでも長い記事名は表示されますか？

掲載した見本では、スマホ幅で折り返して表示しています。追加後はPCとスマホの両方で長い記事名が折り返されることを確認してください。ただし、Pjaxによる表示切替とスマホ幅での折り返しは別の確認で、PCでの遷移結果だけでスマホの表示完了とはしていません。

TOPページの「ホーム」の表記は、どう変えますか？

「外観 → カスタマイズ → サイト全体設定 → パンくずリスト」を開き、「ホームの文字列」を変更します。ホームの文字列は、リンク先が分かるサイト名などにします。この設定で変わるのはホームの表示名で、記事名の表示やリンク先のURLは変わりません。

ホームの文字列を変えたあとは、何を確認しますか？

保存後に再読み込みし、変更した文字列が残っていることを確認します。投稿やカテゴリー一覧を別の公開画面で開き、ホームの表示名とリンク先を確認してください。変更前の文字列も記録し、戻すときはその値へ戻して「公開」を押します。

親子カテゴリーがある記事でも、順番は変わりませんか？

2026年10月3日の隔離環境では、親子カテゴリーがある投稿で、ホーム・親・子・記事名の順で表示されました。記事名を表示するCSSを追加したら、親子カテゴリーを設定した記事でも順番を確認してください。階層そのものを変更したい場合は、SWELLのパンくずデータのフックと、投稿のカテゴリー設定を確認します。