一般來(lái)說(shuō)，分類(lèi)都是側(cè)邊顯示的，如果分類(lèi)的名稱(chēng)字符比較少的時(shí)候，而且分類(lèi)比較多，我們會(huì)看到一排分類(lèi)用戶(hù)體驗(yàn)不是太好。我們想是不是可以?xún)闪酗@示分類(lèi)，這樣還飽滿(mǎn)一些。我們可以通過(guò)插件實(shí)現(xiàn)，但是我比較推薦使用非插件實(shí)現(xiàn)WP的功能，因?yàn)椴寮b多了WP耗內(nèi)存非常的厲害。

首先，我們先確定自己的分類(lèi)是手工在sidebar.php模板手工添加的，還是通過(guò)小工具拖動(dòng)的。

如果是手工添加的就好辦了，我們對(duì)于定義的ID和CLASS屬性自己掌控。比如：

<h3>網(wǎng)站分類(lèi)</h3>

<div id="side-categories" class="categories">

<ul>

<?php wp_list_cats('sort_column=ID&sort_order=asc&optioncount=1&depth=2&hierarchical=0&exclude=1'); ?>

</ul>

</div>

然后我們分別給予side-categories和categories定義CSS

#side-categories { position: relative; width: 250px; overflow: hidden; margin: 8px auto 0; }

#sidebar .categories{ line-height: 20px; }

#side-categories ul {display: block; overflow: auto; }

#side-categories li {width: 120px; float: left;}

其次，如果我們是通過(guò)小工具拖動(dòng)實(shí)現(xiàn)的，這就需要我們到代碼中看下分類(lèi)部分的ID和CLASS名稱(chēng)。

如果，我這邊看到的id=categories-2;class=widget widget_categories然后我就來(lái)定義CSS，如下：

#categories-2 { position: relative; width: 245px; overflow: hidden; margin: 8px auto 0; }

#sidebar widget widget_categories{ line-height: 20px; }

#categories-2 ul {display: block; overflow: auto; }

#categories-2 li {width: 122px; float: left;}

看下是不是可以實(shí)現(xiàn)分類(lèi)兩列的效果。

更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄