リスト構造を、データとデザインとロジックに分けてみる。

ってことで、対象に選んだのは、サイドナビとかでよく使うかもしれないこんな形。

↓ちなみに、画像は置いてないから、当然、代替になってるハズです。

こいつを、「データ」、「デザイン」、「ロジック」に分解しちゃえ。

とりあえず、データを作る。

ここでは配列にしたけど、DBでもいい。

２階層にしたけど、childrenをどんどん入れ子にしてって

好きなだけ階層増やしちゃえばいい。

<?php
  $links = array(
    array(
      'url' => './sample1/',
      'img' => 'sample1.gif',
      'title' => 'サンプル１'
    ),
    array(
      'url' => './sample2/',
      'img' => 'sample2.gif',
      'title' => 'サンプル２'
    ),
    array(
      'url' => './sample3/',
      'img' => 'sample3.gif',
      'title' => 'サンプル３',
      'children' => array(
        array(
          'url' => './child1/',
          'img' => 'child1.gif',
          'title' => '子１'
        ),
        array(
          'url' => './child2/',
          'img' => 'child2.gif',
          'title' => '子２'
        )
      )
    )
  );
?>

で、テンプレート（デザイン）を作ろう

<?php
  //  こんなんでもいいし・・・、
  $template = ''
  . '<li>'
    . '<a href="[_URL_]">'
      . '<img src="/img/[_IMG_]" width="300" height="85" alt="[_TITLE_]" />'
    . '</a>'
    . '[_CHILDREN_]'
  . '</li>'
  ;
  
  //  こんなんでもいいし・・・
  $template =<<<EOT
<li>
  <a href="[_URL_]">
    <img src="/img/[_IMG_]" width="300" height="85" alt="[_TITLE_]" />
  </a>
  [_CHILDREN_]
</li>
EOT;
  
  //  ↓でもOK（↑↓好みで）
  $template = array(
      '<li>'  //  １階層目のテンプレ
      . '<a href="[_URL_]">'
        . '<img src="/img/[_IMG_]" width="300" height="85" alt="[_TITLE_]" />'
      . '</a>'
      . '[_CHILDREN_]'
    . '</li>'
    ,
      '<li>'  //  2階層目のテンプレ（省略してもいい）
      . '<a href="[_URL_]">'
        . '<img src="/img/[_IMG_]" width="300" height="85" alt="[_TITLE_]" />'
      . '</a>'
      . '[_CHILDREN_]'
    . '</li>'
  );
?>

ほいじゃぁ、ロジックでも作りましょ。

<?php

function getList(&$links, &$template, $parentTemplate = '', $hierarchy = 0, $id = '', $class = ''){
  //  返り値用のret
  $ret = '';

  //  テンプレートを $t にセット
  $t = '';
  if (is_array($template)){  // $templateが配列なら
    if (isset($template[$hierarchy])){  // $template[]がある？
      $t = $template[$hierarchy];
    } else {  //  無ければ１階層上のテンプレートを使う
      $t = $parentTemplate;
    }
  } else {  //  $template が配列じゃなければそのまま
    $t = $template;
  }

  //  とりあえず回す
  foreach ($links as &$link){
    //  とりあえず初期化
    $li = $t;
    
    //  とりあえず置換え
    $li = str_replace('[_URL_]', $link['url'], $li);
    $li = str_replace('[_IMG_]', $link['img'], $li);
    $li = str_replace('[_TITLE_]', $link['title'], $li);
    
    if (isset($link['children'])){
      //  子がいるなら子を作る
      $c = getList($link['children'], $template, $t, ($hierarchy + 1));
      $li = str_replace('[_CHILDREN_]', $c, $li);
    } else {
      //  子が無ければ消す
      $li = str_replace('[_CHILDREN_]', '', $li);
    }
    //  戻り値にセット
    $ret .= $li;
  }
  $ul = '<ul';
  if ($hierarchy == 0){
    $ul .= (strlen($id) > 0 ? ' id="' . $id . '"' : '');
    $ul .= (strlen($class) > 0 ? ' class="' . $class . '"' : '');
  } else {
    $ul .= ' class="hierarchy' . $hierarchy . '"';
  }
  $ul .= '>';
  return $ul . $ret . '</ul>';
}
?>

で、実行

<?php echo getList($links, $template);?>

で、こんな感じに出力される。

<ul>
  <li>
    <a href="./sample1/">
      <img src="/img/sample1.gif" width="300" height="85" alt="サンプル１" />
    </a>
  </li>
  <li>
    <a href="./sample2/">
      <img src="/img/sample2.gif" width="300" height="85" alt="サンプル２" />
    </a>
  </li>
  <li>
    <a href="./sample3/">
      <img src="/img/sample3.gif" width="300" height="85" alt="サンプル３" />
    </a>
    <ul class="hierarchy1">
      <li>
        <a href="./child1/">
          <img src="/img/child1.gif" width="300" height="85" alt="子１" />
        </a>
      </li>
      <li>
        <a href="./child2/">
          <img src="/img/child2.gif" width="300" height="85" alt="子２" />
        </a>
      </li>
    </ul>
  </li>
</ul>

こんな感じ。

こいつの特徴として、

１．ルートのULには、任意のidとclassを付けれる。

２．子のULには、hierarchy1、hierarchy2って付いてくから、cssでどうぞ。

３．何階層でもどんどん増やしていってください。

４．運用中に不要になったデータは、配列を消すかコメントアウトで一瞬完了！

５．当然、ツリーの追加も、配列に加えるだけ、一瞬完了！

ちなみに、やっつけで作ったから、厳密なチェックはしてないよ。

imgのサイズとか決め打ちだしね（笑）

主題が、”分離”なわけだから、そこまで作りこまないさ。

ヒントとしては、'img' を配列にして、width、height、altを渡す

使うかどうかはご自由です。