有限会社Willさんいん ホーム

サイトマップ

お問い合わせ

0852-28-6220(平日 9時30分から17時30分)

このページの位置: Home > フロントエンドエンジニアのblog > Welcart のカートページとメンバーページのパンくずリストを最適化

フロントエンドエンジニアのblog

RSS

Welcart のカートページとメンバーページのパンくずリストを最適化

Welcart のカート関連のページとメンバー関連のページは「固定ページ」として登録され、この2つの固定ページから以下の各ページが出力されます。

カート(スラッグ:usces-cart)
カートの中、お客様情報、発送・支払い方法、内容確認、購入完了 など
メンバー(スラッグ:usces-member)
新規入会フォーム、会員ログイン、マイページ、新パスワード取得 など

これに定番の Breadcrumb NavXT プラグインを使ってパンくずリストを設定すると、カート関連ページは全て「HOME > カート」、メンバー関連ページは全て「HOME > メンバー」のように出力されてしまいます。これではパンくずリストとしてあまり適切ではありませんので、それぞれのページのタイトルを表示するようにしてみました。

当初、各ページの h1 に出力されるタイトルを出力しようと考えましたが、ここはテーマディレクトリの wc_templates 配下にある各ページのテンプレートに直接記述されているため、簡単に引っ張ってくることができません。(JavaScript を使えば簡単ですが、HTML として出力したいので)

そこで、title タグに出力されるタイトルから設定することにしました。WordPress 4.1以降、title は add_theme_support( 'title-tag' ); によっページごとにて自動生成され、Welcart で生成されるページは「カートの中 | サイト名」のように出力されますので、この前半部分(この場合「カートの中」)を抽出します。

この title タグ、どのファイルので定義されているのだろうかと、Welcart プラグインのファイル群を調べてみると、usc-e-shop/functions/filters.php の365行目辺りにありました。ここに各ページのタイトルが fiter_mainTitle 関数で定義されています。

実際は他のページのパンくずリストの出力調整も加えていますが、本件に関するパンくずリストの調整は以下のような記述になりました。

<?php if ( function_exists('bcn_display') && !is_front_page() ){
  echo '<div id="topicPath"><span class="scrText">このページの位置: </span>';
  if ( is_page(get_option('usces_member_number')) || is_page(get_option('usces_cart_number')) ){
    if ( usces_page_name('return') == 'member' ){
      $title = 'マイページ';
    } else {
      $title = preg_replace('/(.+?) \| .+/', '$1', fiter_mainTitle($title));
    }
    if ( usces_page_name('return') == 'customer' || usces_page_name('return') == 'delivery' || usces_page_name('return') == 'confirm' ){
      $cart = '<a href="'. USCES_CART_URL. '">カートの中</a>';
      echo preg_replace('/(<em>).+?(<\/em>)/', $cart. ' &gt; $1'. $title. '$2', bcn_display(true));
    } else {
      echo preg_replace('/(<em>).+?(<\/em>)/', '$1'. $title. '$2', bcn_display(true));
    }
  } else {
    bcn_display();
  }
  echo '</div>';
} ?>

if ( is_page(get_option('usces_cart_number')) || is_page(get_option('usces_member_number')) ) として、カートページまたはメンバーページの場合に title タグの前半部分を抽出して、Breadcrumb NavXT で出力されるページタイトル部分を置き換えています。

また、カートページから進む「お客様情報」「発送・支払方法」「内容確認」の各ページについては、HOME との間に「カートの中」ページへのリンクを挿入しました。「お客様情報」「発送・支払方法」「内容確認」の相互のページについては、「戻る」と「次へ」ボタンで遷移する必要がありますので、これらはパンくずの階層に入れていません。

これで、「HOME > カートの中」「HOME > カートの中 > お客様情報」「HOME > 新規入会フォーム」のように、パンくずリストとして適切に出力されます。

なお、「マイページ」に関してはログイン直後は「会員情報」と表示されてしまうので、if ( usces_page_name('return') == 'member' ) として条件分岐を行い、「マイページ」に統一しています。

この記事へのフィードバック

Facebook のコメントです。

コメントを残す

この記事のトラックバックURL:
https://www.will3in.co.jp/blog/article/breadcrumbs-with-welcart/trackback/

このページの先頭へ