質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • WordPress

    8920questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,900

akkkkin

score 71

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

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

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

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

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

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

* 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のパンくず両方が表示されているので1つだけの表示に設定したい。
・もしwoocommerceのパンクズを残すなら既存のテーマのようなパンくずのスタイルに整えたい(アイコン付)
・もし既存のテーマのパンクズを残すならsample1が表示されないので表示するように設定したい
↓現在の表示の状態↓
イメージ説明

■single-product.phpで解決したいこと(画像付)
・archives-product.phpのときと同じくsample1のパンくずの箇所が表示されていないので表示したい
・Home>sample1>ヘアエステshampooーのはずなのに、なぜかHome>極上シャンプー>ヘアエステshampooと表示されているので、Home>sample1>ヘアエステ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;
}

宜しくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2016/12/08 20:25

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • miz

    2016/12/08 20:52

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

    キャンセル

回答 1

checkベストアンサー

+2

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

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

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

追記(2016/12/09)

WooCommerceのパンくずリストを使用すると仮定します。

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

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

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

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/08 21:58

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

    キャンセル

  • 2016/12/08 22:07

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

    キャンセル

  • 2016/12/08 22:20 編集

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

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

    キャンセル

  • 2016/12/08 22:29

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

    キャンセル

  • 2016/12/09 10:22

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

    キャンセル

  • 2016/12/09 17:32 編集

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

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

    キャンセル

  • 2016/12/09 18:49

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

    キャンセル

  • 2016/12/09 19:22

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

    キャンセル

  • 2016/12/09 19:34

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

    キャンセル

  • 2016/12/09 20:28

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

    キャンセル

同じタグがついた質問を見る

  • WordPress

    8920questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。