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

2022.04.042026.10.03

実はSWELLのパンくずには記事名があえて非表示にされてます。

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

パンくずはブログにおいての住所に当たるものなので、記事名まで表示させたいという意見がたまにあがります。

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

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

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

下記のCSSを追加するだけです。

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;/* 記事名が長い場合は折り返す */
}

以前のバージョンのSWELLのカスタマイズ方法

.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のデフォルトではホームアイコンの横にホームと記載されています。

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

サイト全体設定＞パンくずリスト＞ホームの文字列の部分を変更してあげましょう。

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

ホームの文字列を保存してリンク先を確認する

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

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

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

この設定で変わるのはホームの表示名で、記事名の表示やリンク先の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のパンくずデータのフックと、投稿のカテゴリー設定を確認します。