it-swarm-ja.com

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>

自分のサイトの他の部分で表示しているブレッドクラム・ナグとインラインになるようにするために、フィルタに何を追加できますか?

ありがとう、

1
Nsokyi

区切り文字を表示するためのより明確な方法は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;
}
1
Sven