Недавно у меня спросили, как я сделал вывод материалов моего блога в правой части блога в виде дерева. По этому поводу я решил написать небольшой мануал. Для того чтобы вывести материалы в виде дерева, как на рисунке выше, нам необходимо:

1. Определиться в какой части блога оно будет выводиться.
2. Написать функцию вывода.
3. И красиво это оформить.

Поскольку дерево материалов и категорий у меня выводится справа, то для вывода я использую сайдбар. Для этого в файл шаблона 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;}

В данном примере я создал двухуровневое дерево материалов и категорий, мне в принципе больше и не нужно. Если Вы желаете сделать более глубокую вложенность, придётся проявить смекалку. 🙂

Удачи!