Search the Community

Может кто знает, как на Wordpress лучше всего реализовать вот такую вот сортировку? http://www.castellocheese.com/en/recipes/ Заранее спасибо знающим людям:)

Всем доброго дня. Проблема следующая: Есть пункт в меню (и соответственно раздел на сайте) - портфолио, которое имеет в себе подпункты "1" "2" "3" "4". На странице решил сделать сортировку. Т.е. можно отобразить все работы, либо работы одного из разделов. Поскольку каждый из этих разделов отображен в выпадающем меню, хотела бы узнать, как сделать переход на каждый из вариантов сортировки. Как выглядит сортитовка: http://tympanus.net/Tutorials/CSS3FilterFunctionality/index3.html В коде это сделано так: <section class="ff-container" style="padding-top: 200px;"> <input id="select-type-all" name="radio-set-1" type="radio" class="ff-selector-type-all" checked="checked" /> <label for="select-type-all" class="ff-label-type-all">All</label> <input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" /> <label for="select-type-1" class="ff-label-type-1">Web Design</label> <input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" /> <label for="select-type-2" class="ff-label-type-2">Illustration</label> <input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" /> <label for="select-type-3" class="ff-label-type-3">Icon Design</label> <div class="clr"></div> <ul class="ff-items"> <li class="ff-item-type-2"> <a href="http://dribbble.com/shots/366400-Chameleon"> <span>Chameleon</span> <img src="images/1.jpg" /> </a> </li> <li class="ff-item-type-1"> <a href="http://dribbble.com/shots/272575-Tutorials-wip-"> <span>Tutorials (wip)</span> <img src="images/2.jpg" /> </a> </li> <li class="ff-item-type-2"> <a href="http://dribbble.com/shots/372566-Flower"> <span>Flower</span> <img src="images/3.jpg" /> </a> </li> <li class="ff-item-type-1"> <a href="http://dribbble.com/shots/138484-Symplas-website"> <span>Symplas website</span> <img src="images/4.jpg" /> </a> </li> <li class="ff-item-type-3"> <a href="http://dribbble.com/shots/134868-TRON-Mobile-ver-"> <span>TRON: Mobile version</span> <img src="images/5.jpg" /> </a> </li> <li class="ff-item-type-2"> <a href="http://dribbble.com/shots/347197-Cake"> <span>Cake</span> <img src="images/6.jpg" /> </a> </li> <li class="ff-item-type-1"> <a href="http://dribbble.com/shots/186199-Tailoring-accessories"> <span>Tailoring accessories</span> <img src="images/7.jpg" /> </a> </li> <li class="ff-item-type-3"> <a href="http://dribbble.com/shots/133859-App-icon"> <span>App icon</span> <img src="images/8.jpg" /> </a> </li> <li class="ff-item-type-1"> <a href="http://dribbble.com/shots/188524-Event-Planning"> <span>Event Planning</span> <img src="images/9.jpg" /> </a> </li> </ul> </section>Пробовала сделать через якоря, ничего не получается, прошу, профы, помогите с задачей(