woocommerceを使った表示ページにパンくずリストが表示されない

Question

掲題の件で行き詰まっております。

テーマはwoocommerceと互換性のないテーマを使用。

下記の情報を参考に、編集する対象のファイルは既存のテーマに
移行して編集しています。
http://highfivecreate.com/blog/course/tips/2279.html

【問題点】
商品の一覧を表示するarchive-product.phpのパンくずリスト（sample１）が表示されない。また下図のように2つのパーマリンクが表示されてしまいます。woocommerce側で生成されているパーマリンクはちゃんと表示されているのですが、スタイリングがされていない状態です。

下図はsingle-product.phpのページを開いた状態です。

【やったこと】
woocommerceのパンくずリストを消去し、表示を確認してみる。
案の上、既存のテーマのパンくずリストは表示されるが、sample１の
パンくずリストが表示されない。

 * woocommerceのパンくずリストを消去する
 */
add_action( 'init', 'jk_remove_wc_breadcrumbs' );
function jk_remove_wc_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}

【解決したい事】

archive-product.phpとarchive-product.phpのファイルのパンくず以下のように修正したいです。

■archive-product.phpで解決したいこと（画像付）
・既存のパンくずとwoocommerceのパンくず両方が表示されているので１つだけの表示に設定したい。
・もしwoocommerceのパンクズを残すなら既存のテーマのようなパンくずのスタイルに整えたい（アイコン付）
・もし既存のテーマのパンクズを残すならsample１が表示されないので表示するように設定したい
↓現在の表示の状態↓

■single-product.phpで解決したいこと（画像付）
・archives-product.phpのときと同じくsample１のパンくずの箇所が表示されていないので表示したい
・Home＞sample１＞ヘアエステshampooーのはずなのに、なぜかHome＞極上シャンプー＞ヘアエステshampooと表示されているので、Home＞sample１＞ヘアエステshampooとなるように表示させたい。
↓現在の表示の状態↓

以上、既存テーマのようにスタイリングをきかせてパンくずリストを表示させる解決策をご教示頂ければありがたいです。

追記：
既存テーマのパンくずのコードです。
既存テーマのfunction.phpに記述しています。

//パンくずナビ
function breadcrumb($divOption = array("id" => "breadcrumb", "class" => "breadcrumb inner wrap cf")){
    global $post;
    $str ='';
    if(!is_home()&&!is_front_page()&&!is_admin()){
        $tagAttribute = '';
        foreach($divOption as $attrName => $attrValue){
            $tagAttribute .= sprintf(' %s="%s"', $attrName, $attrValue);
        }
        $str.= '<div'. $tagAttribute .'>';
        $str.= '<ul>';
        $str.= '<li itemtype="//data-vocabulary.org/Breadcrumb"><a href="'. home_url() .'/" itemprop="url"><i class="fa fa-home"></i><span itemprop="title"> ホーム</span></a></li>';

        if(is_category()) {
            $cat = get_queried_object();
            if($cat -> parent != 0){
                $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                foreach($ancestors as $ancestor){
                    $str.='<li itemtype="//data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor) .'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor) .'</span></a></li>';
                }
            }
            $str.='<li itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">'. $cat -> name . '</span></li>';
        } elseif(is_single()){
            $categories = get_the_category($post->ID);
            $cat = $categories[0];
            if($cat -> parent != 0){
                $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                foreach($ancestors as $ancestor){
                    $str.='<li itemtype="//data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor).'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor). '</span></a></li>';
                }
            }
            $str.='<li itemtype="//data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a></li>';
            $str.= '<li itemtype="//data-vocabulary.org/Breadcrumb">'. $post -> post_title .'</li>';
        } elseif(is_page()){
            if($post -> post_parent != 0 ){
                $ancestors = array_reverse(get_post_ancestors( $post->ID ));
                foreach($ancestors as $ancestor){
                    $str.='<li itemtype="//data-vocabulary.org/Breadcrumb"><a href="'. get_permalink($ancestor).'" itemprop="url"><span itemprop="title">'. get_the_title($ancestor) .'</span></a></li>';
                }
            }
            $str.= '<li itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">'. $post -> post_title .'</span></li>';
        } elseif(is_date()){
			if( is_year() ){
				$str.= '<li>' . get_the_time('Y') . '年</li>';
			} else if( is_month() ){
				$str.= '<li><a href="' . get_year_link(get_the_time('Y')) .'">' . get_the_time('Y') . '年</a></li>';
				$str.= '<li>' . get_the_time('n') . '月</li>';
			} else if( is_day() ){
				$str.= '<li><a href="' . get_year_link(get_the_time('Y')) .'">' . get_the_time('Y') . '年</a></li>';
				$str.= '<li><a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('n') . '月</a></li>';
				$str.= '<li>' . get_the_time('j') . '日</li>';
			}
			if(is_year() && is_month() && is_day() ){
				$str.= '<li>' . wp_title('', false) . '</li>';
			}
        } elseif(is_search()) {
            $str.='<li itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">「'. get_search_query() .'」で検索した結果</span></li>';
        } elseif(is_author()){
            $str .='<li itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">投稿者 : '. get_the_author_meta('display_name', get_query_var('author')).'</span></li>';
        } elseif(is_tag()){
            $str.='<li itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">タグ : '. single_tag_title( '' , false ). '</span></li>';
        } elseif(is_attachment()){
            $str.= '<li itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">'. $post -> post_title .'</span></li>';
        } elseif(is_404()){
            $str.='<li>ページがみつかりません。</li>';
        } else{
            $str.='<li itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">'. wp_title('', true) .'</span></li>';
        }
        $str.='</ul>';
        $str.='</div>';
    }
    echo $str;
}

宜しくお願い致します。

Comments

[退会済みユーザー]

現在編集中のコードを掲示されたほうが回答が得られやすいと思います。

Answer 1

WooCommerceの公式ドキュメントですけど、こちらの「Change the breadcrumb separator」を参考にセパレータを変更すればいいのでは？

https://docs.woocommerce.com/document/customise-the-woocommerce-breadcrumb/#section-1

(「WooCommerce breadcrumb」で検索したら、一等に出てきました)

##追記（2016/12/09）
WooCommerceのパンくずリストを使用すると仮定します。

・既存のパンくずとwoocommerceのパンくず両方が表示されているので１つだけの表示に設定したい。

既存テーマのパンくずリストを表示しているコードをテンプレートファイルから削除すればOKです。

・もしwoocommerceのパンクズを残すなら既存のテーマのようなパンくずのスタイルに整えたい（アイコン付）

以下の様にすれば、アイコンをつけられると思います。
（2016/12/09 18:45更新）

add_filter( 'woocommerce_breadcrumb_defaults', 'jk_woocommerce_breadcrumbs' );
function jk_woocommerce_breadcrumbs() {
    return array(
            'delimiter'   => ' > ',
            'wrap_before' => '<nav class="woocommerce-breadcrumb" itemprop="breadcrumb"><i class="fa fa-home"></i>',
            'wrap_after'  => '</nav>',
            'before'      => '',
            'after'       => '',
            'home'        => 'ホーム',
        );
}

・Home＞sample１＞ヘアエステshampooーのはずなのに、なぜかHome＞極上シャンプー＞ヘアエステshampooと表示されているので、Home＞sample１＞ヘアエステshampooとなるように表示させたい。

これに関しては、カテゴリやタグがどう設定されているかによります。
本来表示されるべき階層でパンくずリストが表示されないのであれば、不具合の可能性もあるので、WooCommerceの開発元に問い合わせるのがいいかと思います。

Comments

[akkkkin]

回答ありがとうございます。
このサイトを参考にwoocommerceのパンくずを消去する関数を記述したりしておりました。
Change the breadcrumb separatorも関数も記述したのですが、何ら表示に変更はありませんでした。

[退会済みユーザー]

何ら表示に変更がない、というのはWooCommerceのパンくずリストのセパレータが「/」から「>」に変わらなかったということですか？

[akkkkin]

回答有り難うございます。

＞何ら表示に変更がない、というのはWooCommerceのパンくずリストのセパレータが「/」から「>」に変わらなかったということですか？
→「/」から「>」に変わったのですが、
それ以外はsingle-product.phpのページを開いた状態のまま（画像を貼付した表示と同じ状態）ということです。

[退会済みユーザー]

それ以外、というのは何を指していますか？
いまいち、質問者様が最終的に期待している状態・表示が見えてこないのですが。

[akkkkin]

わかりにくくて申し訳ありません。質問に追記しました。

[akkkkin]

コメントありがとうございます。
上記の関数で実行したのですが、アイコンが表示されませんでした・・・

しかし、既存テーマのパンくずは消すことができました。

[退会済みユーザー]

WooCommerceのパンくずリストのコードを追っていってわかりましたが、'home'の値はstrip_tagsされてしまうみたいです。失礼しました。
新しいコードを書いたので、試してみてください。

[akkkkin]

＞'home'の値はstrip_tagsされてしまうみたいです。失礼しました。
これはどういうことなんでしょうか？
とはいえ、表示できました。すごくうれしいです。ありがとうございます！！！！！

[退会済みユーザー]

WooCommerceの内部で、strip_tags関数が使われているため、最初に提示したコードのように、
$defaults['home'] = '<i class="fa fa-home"></i> ホーム';
と設定しても、パンくずリストとして出力されるときは、
「ホーム」という文字列のみになってしまうということです。
(http://php.net/manual/ja/function.strip-tags.php)

[akkkkin]

なるほどです。ありがとうございます。