WordPress
カスタマイズ事例

WORDPRESS CUSTOMIZATION

パンくずリストを li(リストタグ)で出力する

パンくずリストの話は以前にも2度ほどしています。

パンくずリストの小手先カスタマイズ
どうしてもインストールしておきたいプラグイン10選

100ウェブではWordPressでパンくずリストを実装する場合にはすべて Breadcrumb NavXT でおこなっています。

呼び出し方は、テンプレートPHPで以下を記述するだけです。
(フォーマットは管理画面で決める必要があります)

<?php if(!is_front_page()): ?>
<div class="breadcrumbs">
  <?php if(function_exists('bcn_display'))
  {
    bcn_display();
  }?>
</div>
<?php endif; ?>

当サイトもこれでパンくずを表示させてます。
 
上の記述では、htmlは下のようになります。

<div class="breadcrumbs">
<a title="100ウェブ" href="https://100webdesign.jp" >HOME</a> &gt; <a title="サービスメニュー" href="https://100webdesign.jp/services/" >サービスメニュー</a> &gt; <a title="WordPressサイト構築" href="https://100webdesign.jp/services/wordpress/" >WordPressサイト構築</a> &gt; <a title="WordPressカスタマイズ事例" href="https://100webdesign.jp/services/wordpress/wp_result/" >WordPressカスタマイズ事例</a> &gt; パンくずリストを li(リストタグ)で出力する
</div>

ところで、パンくずをli(リストタグ)で出したい、ということがあります。
そちらのほうが標準ですね。

その場合は、以下のように記述してください。

<?php if(!is_front_page()){ ?>
<div class="breadcrumbs">
  <ul>
    <?php if(function_exists('bcn_display'))
    {
      bcn_display_list();
    }?>
  </ul>
</div>
<?php } ?>

出力結果はこうなります。

<div class="breadcrumbs">
  <ul>
<li><a title="100ウェブ" href="https://100webdesign.jp">HOME</a></li>
<li><a title="サービスメニュー" href="https://100webdesign.jp/services/">サービスメニュー</a></li>
<li><a title="WordPressサイト構築" href="https://100webdesign.jp/services/wordpress/">WordPressサイト構築</a></li>
<li><a title="WordPressカスタマイズ事例" href="https://100webdesign.jp/services/wordpress/wp_result/">WordPressカスタマイズ事例</a></li>
<li class="current_item">パンくずリストを li(リストタグ)で出力する</li>
  </ul>
</div>

リストタグでパンくず出力の場合は関数が違いますよ、という話でした。

【100ウェブ新着情報メルマガ】

WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!