【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
おすすめ記事
- 【Adalo】フォームに入力された内容をメールで送信する【Zapier】(2023年5月22日)
- 【Adalo】二つのAdalo間でアプリの移行(2023年5月12日)
- 石造文化財のマップ用アイコン「長慶(Chokei)」(2022年11月7日)
- 【WordPress】このプラグイン何だっけ?レンタルサーバー別、自動的にインストールされるプラグイン一覧(2022年10月12日)
- 【VSCode】Live Sass Compiler で@useがコンパイルできない!(2022年6月10日)
Business News
- 瀬戸内に浮かぶキャンプ場、サウンド波間田(2022年5月9日)
- イラストレーター ナコさんのポートフォリオサイト(2022年4月6日)
- RTガレージ様オープン!(2022年1月11日)
- 環境やヒトに優しい洗剤を扱うEC老舗石けん百貨様、MashFabricローンチ【Shopify】(2021年5月12日)
- 神戸市の株式会社寺内鉄工所様ウェブサイト(2020年8月7日)