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

[jafar1374 15]

سلام

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

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

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>

[Parsa 23463]

شما میتوانید دسته‌ها را به صورت دستی قرار دهید

و مطالب را با wp_query لود کنید

[jafar1374 15]

مشکل من ابتدا تصویر بود ک با تصویر شاخص درست کردم

حالا دسته بندی هم درست شده حالا چطور می تونم مثل تصویر بالا 5 ردیف در سمت راست و 5 ردیف در سمت چپ قرار بدم؟