Cách cấu hình hiển thị danh sách tên nhãn trong widget Label theo dạng phân cấp
Nếu Blog của bạn có sử dụng nhiều label cho một bài viết, các label này được phân cấp rõ ràng theo nhóm chuyên mục mà bạn định cấu hình từ khi mới tạo Blog, bạn có thể tùy biến lại tiện ích Nhãn - Label widget hiển thị danh sách label theo phân cấp hoặc thu gọn.
Để cho bạn dễ hình dung, mình lấy một ví dụ cho nhóm danh mục mà bạn dự định sẽ thêm sau mỗi lần xuất bản bài viết mới hoặc chỉnh sửa bài viết đã được xuất bạn. Với dấu (-) là tên nhãn chính và dấu (+) là tên nhãn phụ
- Nhãn A
+ Nhãn aa, ab, ac, ad,...
- Nhãn B
+ Nhãn ba, bb, bc, bd,...
- Nhãn C
+ Nhãn ca, cb, cc, cd,...
Như vậy, bạn đã phân loại tên nhãn ra được 2 cấp:
- Nhóm cấp 1: ["A","B","C"]
+ Nhóm cấp 2: ["aa","ab","ac","ad","ba","bb","bc","bd","ca","cb","cc","cd"]
Giả sử bạn muốn phân loại tên nhãn ra thành 3 cấp như sau:
- Nhãn A
+ Nhãn aa, ab, ac, ad,...
• Nhãn aaa, aab, aac, aad,...
- Nhãn B
+ Nhãn ba, bb, bc, bd,...
• Nhãn bba, bbb, bbc, bbd,...
- Nhãn C
+ Nhãn ca, cb, cc, cd,...
• Nhãn cca, ccb, ccc, ccd,...
Như vậy, bạn đã phân loại tên nhãn ra được 3 cấp:
- Nhóm cấp 1: ["A","B","C"]
+ Nhóm cấp 2: ["aa","ab","ac","ad","ba","bb","bc","bd","ca","cb","cc","cd"]
• Nhóm cấp 3: ["aaa","aab","aac","aad","bba","bbb","bbc","bbd","cca","ccb","ccc","ccd"]
Bây giờ mình sẽ cấu hình chỉnh sửa mã XML của widget Label hiển thị danh sách tên nhãn theo dạng phân cấp từ ví dụ ở trên
Đầu tiên cần thêm widget Label trước, định cấu hình hiển thị Tất cả Nhãn, sắp xếp theo Thứ tự bảng chữ cái hay Tần suất đều được, hiển thị theo dạng Danh sách và tích chọn Hiển thị số bài đăng trên mỗi nhãn.
 |
| Định cấu hình widget Label |
Tiếp theo bạn sẽ chỉnh sửa lại mã của tiện ích trong chỉnh sửa HTML của Chủ đề theme, trong tiện ích này bạn mở thẻ <b:includable id='list'>, nó sẽ có dạng thế này
<b:includable id='list'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a class='label-name' expr:href='data:label.url'>
<data:label.name/>
<b:if cond='data:this.showFreqNumbers'>
<span class='label-count'><data:label.count/></span>
</b:if>
</a>
</li>
</b:loop>
</ul>
</b:includable>
Bạn xóa tất cả mã mặc định bên trong thẻ đi, còn lại thế này
<b:includable id='list'>
<ul>
</ul>
</b:includable>
Việc của bạn là thêm mã XML vào lại <b:includable id='list'> để tạo phân cấp cho label
Cấu hình theo 2 cấp
<b:includable id='list'>
<ul>
<!-- Tạo cấp 1 cho nhãn A -->
<li>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name eq "A"'>
<a class='label-name' expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>
<b:if cond='data:this.showFreqNumbers'><span class='label-count'><data:label.count/></span></b:if>
</b:if>
</b:loop>
<!-- Tạo cấp 2 cho nhãn aa, ab, ac, ad -->
<ul>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name in ["aa","ab","ac","ad"]'>
<li>
<a class='label-name' expr:href='data:label.url'><data:label.name/></a>
<b:if cond='data:this.showFreqNumbers'><span class='label-count'><data:label.count/></span></b:if>
</li>
</b:if>
</b:loop>
</ul>
</li>
<!-- Tạo cấp 1 cho nhãn B -->
<li>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name eq "B"'>
<a class='label-name' expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>
<b:if cond='data:this.showFreqNumbers'><span class='label-count'><data:label.count/></span></b:if>
</b:if>
</b:loop>
<!-- Tạo cấp 2 cho nhãn ba, bb, bc, bd -->
<ul>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name in ["ba","bb","bc","bd"]'>
<li>
<a class='label-name' expr:href='data:label.url'><data:label.name/></a>
<b:if cond='data:this.showFreqNumbers'><span class='label-count'><data:label.count/></span></b:if>
</li>
</b:if>
</b:loop>
</ul>
</li>
<!-- Tạo cấp 1 cho nhãn C -->
<li>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name eq "C"'>
<a class='label-name' expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>
<b:if cond='data:this.showFreqNumbers'><span class='label-count'><data:label.count/></span></b:if>
</b:if>
</b:loop>
<!-- Tạo cấp 2 cho nhãn ca, cb, cc, cd -->
<ul>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name in ["ca","cb","cc","cd"]'>
<li>
<a class='label-name' expr:href='data:label.url'><data:label.name/></a>
<b:if cond='data:this.showFreqNumbers'><span class='label-count'><data:label.count/></span></b:if>
</li>
</b:if>
</b:loop>
</ul>
</li>
</ul>
</b:includable>
Trích xuất HTML tiện ích có dạng:
<div class="widget-content list-label-widget-content">
<ul>
<li>
<a class="label-name" href="URL nhãn A" title=" Nhãn A">Nhãn A</a>
<span class="label-count">số nhãn A</span>
<ul>
<li>
<a class="label-name" href="URL nhãn aa" title=" Nhãn aa">Nhãn aa</a>
<span class="label-count">số nhãn aa</span>
</li>
<li>
<a class="label-name" href="URL nhãn ab" title=" Nhãn ab">Nhãn ab</a>
<span class="label-count">số nhãn ab</span>
</li>
<li>
<a class="label-name" href="URL nhãn ac" title=" Nhãn ac">Nhãn ac</a>
<span class="label-count">số nhãn aa</span>
</li>
<li>
<a class="label-name" href="URL nhãn ad" title=" Nhãn ad">Nhãn ad</a>
<span class="label-count">số nhãn ad</span>
</li>
</ul>
</li>
<li>
<a class="label-name" href="URL nhãn B" title=" Nhãn B">Nhãn B</a>
<span class="label-count">số nhãn B</span>
<ul>
<li>
<a class="label-name" href="URL nhãn ba" title=" Nhãn ba">Nhãn ba</a>
<span class="label-count">số nhãn ba</span>
</li>
<li>
<a class="label-name" href="URL nhãn bb" title=" Nhãn bb">Nhãn bb</a>
<span class="label-count">số nhãn bb</span>
</li>
<li>
<a class="label-name" href="URL nhãn bc" title=" Nhãn bc">Nhãn bc</a>
<span class="label-count">số nhãn bc</span>
</li>
<li>
<a class="label-name" href="URL nhãn bd" title=" Nhãn bd">Nhãn bd</a>
<span class="label-count">số nhãn bd</span>
</li>
</ul>
</li>
<li>
<a class="label-name" href="URL nhãn C" title=" Nhãn C">Nhãn C</a>
<span class="label-count">số nhãn C</span>
<ul>
<li>
<a class="label-name" href="URL nhãn ca" title=" Nhãn ca">Nhãn ca</a>
<span class="label-count">số nhãn ca</span>
</li>
<li>
<a class="label-name" href="URL nhãn cb" title=" Nhãn cb">Nhãn cb</a>
<span class="label-count">số nhãn cb</span>
</li>
<li>
<a class="label-name" href="URL nhãn cc" title=" Nhãn cc">Nhãn cc</a>
<span class="label-count">số nhãn ca</span>
</li>
<li>
<a class="label-name" href="URL nhãn cd" title=" Nhãn cd">Nhãn cd</a>
<span class="label-count">số nhãn cd</span>
</li>
</ul>
</li>
</ul>
</div>
Cấu hình theo 3 cấp
<b:includable id='list'>
<ul>
<!-- Tạo cấp 1 cho nhãn A -->
<li>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name eq "A"'>
<a class='label-name' expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>
<b:if cond='data:this.showFreqNumbers'><span class='label-count'><data:label.count/></span></b:if>
</b:if>
</b:loop>
<ul>
<!-- Tạo cấp 2 cho nhãn aa -->
<li>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name eq "aa"'>
<a class='label-name' expr:href='data:label.url'><data:label.name/></a>
<b:if cond='data:this.showFreqNumbers'><span class='label-count'><data:label.count/></span></b:if>
</b:if>
</b:loop>
<!-- Tạo cấp 3 cho nhãn aaa -->
<ul>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name eq "aaa"'>
<li>
<a class='label-name' expr:href='data:label.url'><data:label.name/></a>
<b:if cond='data:this.showFreqNumbers'><span class='label-count'><data:label.count/></span></b:if>
</li>
</b:if>
</b:loop>
</ul>
</li>
<!-- Tạo cấp 2 cho nhãn ab -->
<li>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name eq "ab"'>
<a class='label-name' expr:href='data:label.url'><data:label.name/></a>
<b:if cond='data:this.showFreqNumbers'><span class='label-count'><data:label.count/></span></b:if>
</b:if>
</b:loop>
<!-- Tạo cấp 3 cho nhãn aab -->
<ul>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name eq "aab"'>
<li>
<a class='label-name' expr:href='data:label.url'><data:label.name/></a>
<b:if cond='data:this.showFreqNumbers'><span class='label-count'><data:label.count/></span></b:if>
</li>
</b:if>
</b:loop>
</ul>
</li>
<!-- Tạo cấp 2 cho nhãn ac -->
<li>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name eq "ac"'>
<a class='label-name' expr:href='data:label.url'><data:label.name/></a>
<b:if cond='data:this.showFreqNumbers'><span class='label-count'><data:label.count/></span></b:if>
</b:if>
</b:loop>
<!-- Tạo cấp 3 cho nhãn aac -->
<ul>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name eq "aac"'>
<li>
<a class='label-name' expr:href='data:label.url'><data:label.name/></a>
<b:if cond='data:this.showFreqNumbers'><span class='label-count'><data:label.count/></span></b:if>
</li>
</b:if>
</b:loop>
</ul>
</li>
<!-- Tạo cấp 2 cho nhãn ad -->
<li>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name eq "ad"'>
<a class='label-name' expr:href='data:label.url'><data:label.name/></a>
<b:if cond='data:this.showFreqNumbers'><span class='label-count'><data:label.count/></span></b:if>
</b:if>
</b:loop>
<!-- Tạo cấp 3 cho nhãn aad -->
<ul>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name eq "aad"'>
<li>
<a class='label-name' expr:href='data:label.url'><data:label.name/></a>
<b:if cond='data:this.showFreqNumbers'><span class='label-count'><data:label.count/></span></b:if>
</li>
</b:if>
</b:loop>
</ul>
</li>
</ul>
</li>
<!-- Tạo cấp 1,2,3 cho nhãn B, C tương tự như trên -->
</ul>
</b:includable>
Trích xuất HTML tiện ích có dạng:
<div class="widget-content list-label-widget-content">
<ul>
<li>
<a class="label-name" href="URL nhãn A" title=" Nhãn A">Nhãn A</a>
<span class="label-count">số nhãn A</span>
<ul>
<li>
<a class="label-name" href="URL nhãn aa" title=" Nhãn aa">Nhãn aa</a>
<span class="label-count">số nhãn aa</span>
<ul>
<li>
<a class="label-name" href="URL nhãn aaa" title=" Nhãn aaa">Nhãn aaa</a>
<span class="label-count">số nhãn aaa</span>
</li>
</ul>
</li>
<li>
<a class="label-name" href="URL nhãn ab" title=" Nhãn ab">Nhãn ab</a>
<span class="label-count">số nhãn ab</span>
<ul>
<li>
<a class="label-name" href="URL nhãn aab" title=" Nhãn aab">Nhãn aab</a>
<span class="label-count">số nhãn aab</span>
</li>
</ul>
</li>
<li>
<a class="label-name" href="URL nhãn ac" title=" Nhãn ac">Nhãn ac</a>
<span class="label-count">số nhãn ac</span>
<ul>
<li>
<a class="label-name" href="URL nhãn aac" title=" Nhãn aac">Nhãn aac</a>
<span class="label-count">số nhãn aac</span>
</li>
</ul>
</li>
<li>
<a class="label-name" href="URL nhãn ad" title=" Nhãn ad">Nhãn ad</a>
<span class="label-count">số nhãn ad</span>
<ul>
<li>
<a class="label-name" href="URL nhãn aad" title=" Nhãn aad">Nhãn aad</a>
<span class="label-count">số nhãn aad</span>
</li>
</ul>
</li>
</ul>
</li>
<!-- Cấp 1,2,3 cho nhãn B, C tương tự như trên -->
</ul>
</div>