دسته بندی و ایجاد تصاویر به این شکل در وردپرس

[jafar1374]

سلام

تو این سایت دسته بندی طبق تصویر به این شکل هستش و وقتی روی ی دسته بندی کلیک میشه ایتم های اون دسته بندی باز میشه ...


حالا می خام بدونم که :

1 - برای این دسته بندی چه کدی رو بذاریم ؟

2 - حالا ما اومدیم مثلا ده تا ایتم رو انتخاب کردیم چطور تصاویر مربوط به هر آیتم رو به عنوان بشناسونیم تا آیکون کنارش بیاد ؟

کدای این آیتم ها تو html ب این شکله :


<ul class="top-category-programs-list clearfix" data-categoryUrl="internet">
<li class="item1">
<div>
<a href="/download_google_chrome" class="internal-link"><img src="http://cache.filehippo.com/img/ex/2171t__ChromeNew_icon.png">Google Chrome 35.0.1916.99 Beta</a>
</div>
</li>

<li class="item2">
<div>
<a href="/download_firefox" class="internal-link"><img src="http://cache.filehippo.com/img/ex/1287t__firefox_35.png">Firefox 29.0.1</a>
</div>
</li>

<li class="item3">
<div>
<a href="/download_flashplayer_firefox" class="internal-link"><img src="http://cache.filehippo.com/img/ex/1021t__flashPlayer2.png">Flash Player 13.0.0.214 (Non-IE)</a>
</div>
</li>

<li class="item4">
<div>
<a href="/download_jre_32" class="internal-link"><img src="http://cache.filehippo.com/img/ex/62t__java.png">Java Runtime Environment 8.0 build 5 (32-bit)</a>
</div>
</li>

<li class="item5">
<div>
<a href="/download_opera" class="internal-link"><img src="http://cache.filehippo.com/img/ex/1297t__opera10-32.png">Opera 21.0.1432.57</a>
</div>
</li>

<li class="item6">
<div>
<a href="/download_jre_64" class="internal-link"><img src="http://cache.filehippo.com/img/ex/62t__java.png">Java Runtime Environment 8.0 build 5 (64-bit)</a>
</div>
</li>

<li class="item7">
<div>
<a href="/download_flashplayer_ie" class="internal-link"><img src="http://cache.filehippo.com/img/ex/1021t__flashPlayer2.png">Flash Player 13.0.0.214 (IE)</a>
</div>
</li>

<li class="item8">
<div>
<a href="/download_flashplayer_firefox_64" class="internal-link"><img src="http://cache.filehippo.com/img/ex/1021t__flashPlayer2.png">Flash Player 11.3.300.257 (Non-IE) 64-bit</a>
</div>
</li>

<li class="item9">
<div>
<a href="/download_shockwave" class="internal-link"><img src="http://cache.filehippo.com/img/ex/523t__shockwave.png">Shockwave Player 12.1.1.151</a>
</div>
</li>

<li class="item10">
<div>
<a href="/download_flashplayer_ie_64" class="internal-link"><img src="http://cache.filehippo.com/img/ex/1021t__flashPlayer2.png">Flash Player 11.3.300.257 (IE) 64-bit</a>
</div>
</li>

</ul>