T.N.K.Japan

【WooCommerce】パンくずリストの設置とカスタマイズ［超簡単］

2020年3月29日

WordPressでECサイトが作れる無料プラグインWooCommerce。当記事では商品の個別ページでパンくずリストを設置する方法とカスタマイズをご紹介します。

当記事の環境：WordPress バージョン 5.3.2、WooCommerceバージョン 4.0.1

設置方法

パンくずリストって、まず現在の商品名を取得して、現在の商品が属するカテゴリを取得して…なんか面倒そうですね。でも、ご安心ください。WooCommerceには最初からパンくずリストが用意されているのです！

テーマのテンプレートphpのパンくずリストを設置したい位置に、次の1行を書きます。

<!--?php woocommerce_breadcrumb(); ?-->

たった1行書くだけで表示は次のようになります。
Home / カテゴリ名 / 商品名

「Home」のテキストを変える

「Home」を例えばカタカナで「ホーム」と表示したい場合は、テーマのfunctions.phpに次のコードを書きます。

add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_home_text' );
function wcc_change_breadcrumb_home_text( $defaults ) {
$defaults['home'] = 'ホーム';
return $defaults;
}

「Home」のリンク先を変える

標準では「Home」のリンク先はサイトのトップページになっています。例えば、ショップのトップへリンクしたい場合は、テーマのfunctions.phpに次のコードを書きます。

add_filter( 'woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url' );
function woo_custom_breadrumb_home_url() {
return '/shop/';
}

リストの区切り文字を変える

標準ではリストの区切り文字が「/」になっています。例えば、区切り文字を「>」にしたい場合は、テーマのfunctions.phpに次のコードを書きます。

add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_delimiter' );
function wcc_change_breadcrumb_delimiter( $defaults ) {
$defaults['delimiter'] = ' > ';
return $defaults;
}

参考サイト

当記事では以下のサイト参照いたしました。制作者に感謝いたします。

Customize the WooCommerce breadcrumb