
Недавно у меня спросили, как я сделал вывод материалов моего блога в правой части блога в виде дерева. По этому поводу я решил написать небольшой мануал. Для того чтобы вывести материалы в виде дерева, как на рисунке выше, нам необходимо:
- Определиться в какой части блога оно будет выводиться.
- Написать функцию вывода.
- И красиво это оформить.
Поскольку дерево материалов и категорий у меня выводится справа, то для вывода я использую сайдбар. Для этого в файл шаблона sidebar.php, я дописал следующий код.
<h3>Материалы блога</h3> <ul class="categories"> <?php $categories = get_categories('orderby=ID'); // получение категорий по ID foreach ($categories as $cat) { if ( $cat->parent<>"0") // Проверка на вложеность категории { echo "<li class=\"cat\"><span class=\"catname\">".$cat->cat_name."</span> <ul class=\"inside\">"; // Вывод заголовка подкатегории treePosts($cat->cat_ID); // функция вывода материалов подкатегории echo "</ul></li>"; } else { echo "<span class=\"catname\">".$cat->cat_name."</span>"; treePosts($cat->cat_ID); // функция вывода материалов категории } } ?> </ul>
Исходя из вышенаписанного, нам не хватает только одного – функции treePosts, для вывода материалов категории. Функция, как и принято в WordPress храниться в файле шаблона — functions.php.
<?php function treePosts($idcat) { query_posts('cat='.$idcat); //получаем посты нужной категориии if (have_posts()) : while (have_posts()) : the_post();?> //проверямем их наличие и выводим название и ссылку ниже <li><a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endwhile; endif; wp_reset_query(); //очищаем поток запросов WordPress } ?>
После чего нужно корректно все оформить, лично для своего блога я использовал следующее оформление:
#sidebar{width:300px;float:right;margin:0;} #sidebar h1,#sidebar h2{font-size:1em;} #sidebar ul{margin:0 0 0 20px;padding:0 0 10px 0;color:#404040;font-size:13px;} #sidebar ul li a:link, #sidebar ul li a:visited{list-style-type:disc; line-height:18px;text-decoration:none;border-bottom: 1px dashed #404040; margin:0 0 1px 0;padding:1px;color:#404040;} #sidebar ul li a:hover{text-decoration:none;border-bottom: 1px dotted #999; color:#999;} #sidebar ul li.cat{margin:0 0 0 20px;padding:10px 0 0 0;list-style-type:none; color:#404040;font-size:13px;} #sidebar span.catname{font-weight:bold;left:-20px;position:relative;display: block; padding: 10px 0 5px 0;}
В данном примере я создал двухуровневое дерево материалов и категорий, мне в принципе больше и не нужно. Если Вы желаете сделать более глубокую вложенность, придётся проявить смекалку. 🙂
Удачи!
Ребят, помогите пож. разоброаться Перестал работать Slimbox.
Люди пишут, что это из за конфликта Mootools или Jquery. Как включить их обои, так, что бы эффекты заработали? (Или попеременно включать и выключать, что б проверить при включении чего из них все заработает).
Заранее благодарен за ответ!
Ответ получил на почту. Спасибо!
Нашёл что искал.
спасибо автору.С уважением,spawnet.