php

phpでパンくずリスト実装

更新日:

phpでパンくずリストを作成してみました。参考になれば幸いです。

完成イメージ

function.phpで設定。

function breadcrumbs($page_list)
{
    $_ = function ($s) {
        return $s;
    };

    $html_first = <<< EOM
    <span property="itemListElement" typeof="ListItem"class='breadcrumb-item'><a property="item" typeof="WebPage" title="TOP" href="http://{$_SERVER['HTTP_HOST']}" class="home"><span property="name">TOP</span></a><meta property="position" content="1"></span>
EOM;

    $i     = 2;
    $html  = "<div class='l-breadcrumbs' typeof='BreadcrumbList' vocab='https://schema.org/'>";
    $html .= "<div class='l-breadcrumbs__inner breadcrumb float-sm-right'>";
    $html .= $html_first;
    foreach ($page_list as $page_name => $page_url) {
        $html .= "<span property='itemListElement' typeof='ListItem' class='breadcrumb-item'>";
        $html .= "<a property='item' typeof='WebPage' title='{$page_name}' href='{$_(SITEURL)}{$page_url}/'>";
        $html .= "<span property='name' class='active'>{$page_name}</span>";
        $html .= '</a>';
        $html .= "<meta property='position' content='{$i}'>";
        $html .= '</span>';
        $i ++;
    }
    $html .= "</div></div>\n";

    return $html;
}

第1階層の場合

<!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">start</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
          <?php
            //第1階層
            $page_list = [
               '下層' => '/under'
            ];
            echo breadcrumbs($page_list);
          ?>
          </div>
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
<!-- /.content-header -->

第2階層の場合

<!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">start</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
          <?php
       //第2階層
            $page_list = [
                 '下層1' => '/under',
                 '下層1-1' => '/under/under1-1'
             ];
            echo breadcrumbs($page_list);
          ?>
          </div>
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
<!-- /.content-header -->

第2階層を想定して、CSSを設定。

アクティブページの場合、グレー。アクティブページでない場合、ブルー。

/*第二階層を想定して装飾実施*/
.breadcrumb-item {
  color: #007bff;
}
.breadcrumb-item:last-child .active {
  color: #6c757d;
}

-php

Copyright© Code Custom , 2022 All Rights Reserved.