よく掲示板等でツリー表示のものがありますよね。Windowsなどのフォルダ構成と同じように 誰かが投稿した記事の下に その記事への返信がくっついているタイプのアレです。
これが階層化です。ホムペネットのコンテンツエディタも データを階層化して作成することができるんです。わかさとで言えば[ネットの裏技]とか[実録体験記]とか この[ホ−ムページ作成の裏技 全ノウハウ]も コンテンツエディタの階層化データで 作成しています。今回は せっかくなのでオリジナル 階層化リンク集サンプルを作ってみましょう♪とりあえず(相変わらず)テストページを見ていただきましょう。
ここをクリックしてテストページを開いてください。テストページ下部のペンギンアイコンをクリックして 管理画面を確認してください。今までの管理画面とは異なってるところがあるのに気づかれましたか?
そう!そうです。
[下位コンテンツへ移動]というボタンが表示されていますよね!!それを押すと・・・最初とは違う入力フィールドが表示されたと思います。
このボタンが出現すれば階層データを作成することができるようになります。じゃぁどうやってこのボタンを表示したら良いのでしょうか!?今までは出てなかったのに・・・
まず ページのレイアウトを決めましょう。前回のように羅列型ならテーブルの1行で繰り返し処理できますが カテゴリがつくとなるとそうはいきませんね。考えられるレイアウトはいくつかあります。
@カテゴリごとにテーブルを分ける
これが 一番オーソドックスな形ですかね〜。
A
<dl></dl>タグを使う
まぁリストなので 基本のタグです。
B
<h○></h○>や<p></p><div></div>などのタグを使う
スタイルシートで体裁をつけるなら 結構自由度があるかもしれません。
・・・などなど 何といっても
HTMLなので自由にレイアウトが決められます。さらにスタイルシートのクラス名やIDも 自分の好きに書いちゃってください。ここが何といっても一番のメリットですね。繰り返し処理する部分が決まったら 実際に書いていきましょう。
私はめんどくさがりなので 前回の羅列型リンク集のソースを元にできるという考え方から @を選択しました。
<whiledata src='cnt' name='link2' putmax='*'> <!-- 階層0のときに出力する部分 --> <if $cnt_level==0> <table border='1' cellspacing='0'> <tr> <th colspan='3' cont='カテゴリ名'>$cnt_text0</th> </tr> </if> <!-- 階層1以上のときに出力する部分 --> <if $cnt_level==1> <tr> <td> <a href="$cnt_text0" target="_blank" cont='リンク先URL'> <span cont='バナーイメージ'>$cnt_body1</span> </a> </td> <td cont='サイト名'>$cnt_text1</td> <td align="left" cont='紹介コメント'>$cnt_body0</td> </tr> </if> <!-- 階層の終わりにだけ出力する --> <if $cnt_catend> </table> </if> </whiledata>
・・・↑ここで完成したソースを公開しましたが 書きながら失敗したなぁと思ったわけです。前にも言ったとおり私はめんどくさがりなんで あんまり長いソースを書きたくないんです。よく検討せずに一見安易な方法を選択するとこうなります。(いつもなんですがT_T 学習しろよ>私)
テーブルタグを選択したばかりに 閉じタグの処理を入れなければならなくなりました。順に説明していきましょう・・・。
以下の部分が最上位階層を表示するための記述です。
<if $cnt_level==0> <table border='1' cellspacing='0'> <tr> <th colspan='3' cont='カテゴリ名'>$cnt_text0</th> </tr> </if>
そして ↓の部分が1階層目のデータを表示する部分です。ちゃんと編集画面の下位層で入力したデータが表示されているはずです。
<if $cnt_level==1> <tr> <td> <a href="$cnt_text0" target="_blank" cont='リンク先URL'> <span cont='バナーイメージ'>$cnt_body1</span> </a> </td> <td cont='サイト名'>$cnt_text1</td> <td align="left" cont='紹介コメント'>$cnt_body0</td> </tr> </if>
このように
[下位コンテンツへ移動]ボタンを表示するには<whiledata>〜</whiledata>タグの間に$cnt_levelで制限したifタグを記述するだけです。注意点は
<if $cnt_level==0>と<if $cnt_level==1>のifタグを必ず両方とも記述することです。端折って
<if $cnt_level==1>の部分を<else>と書いてしまうと 編集画面で正しく入力フィールドが表示されません。<whiledata>〜</whiledata>タグでは全てのデータを出力しようとします。その間に $cnt_levelという階層を示す変数を用いて 表示するデータを制限する条件を入れることで 下位層に応じて表示内容を変えるという処理をしています。あとは・・・問題のテーブル閉じタグです・・・。
<if $cnt_catend> </table> </if>
このif条件はカテゴリ(最上位階層につながるデータ一括り)が終わりだったらという条件です。難しいなと思ったら 取りあえず丸覚えしちゃうか コピペして下さい。
今回のHTMLソース全文は
こちらでご確認ください。
ちなみにAの
<dl></dl>タグで書くとこんなソースになります。
<dl> <whiledata src='cnt' name='link2' putmax='*'> <if $cnt_level==0> <dt cont='カテゴリ'>$cnt_text0</dt> </if> <if $cnt_level==1> <dd> <a href="$cnt_text0" target="_blank" cont='リンク先URL'> <span cont='バナーイメージ'>$cnt_body1</span> </a> <span cont='サイト名'>$cnt_text1</span><br> <div cont='紹介コメント'>$cnt_body0</div> </dd> </if> </whiledata></dl>
ちなみにこのソースは 体裁を整えていないのでスタイルシートなどでの細工が必要かと思います。