質問: woocommerceブレッドクリームメニューの変更 現在、私はwoocommerceのブレッドクラムメニューを変更しています。私はそれがこのように見えるようにしようとしています: <div> <ul class="crumbs"> <li> <a href="http://localhost:8888/sitename">home</a> </li> <li class="separator"> | </li> <li>about us</li> </ul> </div> 私は私のfunctions.phpでこれを持っています: add_filter( 'woocommerce_breadcrumb_defaults', 'jk_woocommerce_breadcrumbs' ); function jk_woocommerce_breadcrumbs() { return array( 'delimiter' => ' &#124; ', 'wrap_before' => '<div itemprop="breadcrumb"><ul class="crumbs"><li>', 'wrap_after' => '</li></ul></div>', 'before' => '', 'after' => '', 'home' => _x( 'home', 'breadcrumb', 'woocommerce' ), ); } 残念ながらそれは私に与えます: <div> <ul class="crumbs"> <li> <a class="" href="http://localhost:8888/sitename">home</a> | <a href="http://localhost:8888/sitename/product-category/buzsaws/">buzsaws</a> | animal train </li> </ul> </div> 自分のサイトの他の部分で表示しているブレッドクラム・ナグとインラインになるようにするために、フィルタに何を追加できますか?ありがとう、
回答: 区切り文字を表示するためのより明確な方法はcss境界線です( aibrean のように)。しかし、あなたはあなたのニーズに合うようにフィルタを設定することができます:add_filter( 'woocommerce_breadcrumb_defaults', 'custom_woocommerce_breadcrumbs' ); function custom_woocommerce_breadcrumbs() { return array( 'delimiter' => '<li class="separator"> | </li>', 'wrap_before' => '<div><ul class="crumbs">', 'wrap_after' => '</ul></div>', 'before' => '<li>', 'after' => '</li>', 'home' => _x( 'home', 'breadcrumb', 'woocommerce' ), ); } 更新:あなたのhtmlマークアップをきれいにそして意味論的に保つためには、このように区切り文字を空のままにします:add_filter( 'woocommerce_breadcrumb_defaults', 'custom_woocommerce_breadcrumbs' ); function custom_woocommerce_breadcrumbs() { return array( 'delimiter' => '', // no delimiter 'wrap_before' => '<div><ul class="crumbs">', 'wrap_after' => '</ul></div>', 'before' => '<li>', 'after' => '</li>', 'home' => _x( 'home', 'breadcrumb', 'woocommerce' ), ); } style.cssにボーダーまたはそれに似たスタイルを追加します。.crumbs li { padding: 10px; border-right: 1px solid black; } .crumbs li:last-child { border-right: none; }