Установка произвольных циклов в теме WordPress

Для начала мы перейдем к теме клиента и установим цикл, который будет выводить записи только из рубрики Our Structure. Затем, с помощью jQuery UI, мы выведем на экран записи в виде ряда вкладок, что позволит нам сэкономить пространство сайта и предоставить пользователям доступ к наиболее важной и полезной информации без необходимости длительного пролистывания сайта.

Нам понадобится создать на странице index.php новый цикл и расположить его выше подключаемого loop.php. Прежде, чем мы сделаем это, давайте перейдем на сайт jQuery UI и посмотрим демонстрационный пример вкладок: http://jqueryui.com/demos/tabs/.

Мы можем заметить, что демонстрационные вкладки задаются списком ul, в котором содержатся заголовки, обернутые в href со ссылкой на идентификатор. Это означает, что нам понадобится использовать два произвольных цикла для размещения данного виджета. Мы установим их над вызовом основного цикла loop.php в файле index.php. Оба цикла будут находиться внутри div #content. Первый цикл будет устанавливать наш произвольный блок #ourStructure div, содержащий в себе список заголовков:

...
<div id="ourStructure">
  <ul>
 <?php//начало произвольного цикла
      //получаем записи из необходимой рубрики
     $postList = get_posts('category=4');
     foreach($postList as $post):
        setup_postdata($post);
        ?>
        //присваиваем каждому пункту списка уникальный анкор
        <li>
          <a href="#post-<?php the_ID(); ?>">
          <?php the_title(); ?></a>
        </li>
 <?php endforeach; ?>
    </ul>
    
    <!--//второй цикл будет находиться здесь-->
    
  </div><!--//end of ourStructure-->
... 

Затем, под предыдущим циклом, но все еще в #ourStructure div, мы запустим цикл еще раз, сосредоточившись теперь на заголовках записей и контенте:

...
<!--//второй цикл будет находиться здесь-->
   <?php
   //опять же, получаем нужную рубрику
   $postContent = get_posts('category=4');
   foreach($postContent as $post):
      setup_postdata($post);
      ?>
      //привязываем уникальный ID к div
      <div id="post-<?php the_ID(); ?>">
        <h2><?php the_title(); ?></h2>
         //добавляем контент:
        <div class="entry">
        <?php the_content('Read the rest of this entry &raquo;'); ?>
    </div>
      </div>
<?php endforeach; ?>
    
</div><!--//end of ourStructure-->
...

Указанный код позволит нам получить результат, представленный на скриншоте. Несмотря на отсутствие стилизации, данное решение обладает полной функциональностью и позволяет пользователям быстро переместиться к необходимой закладке при нажатии на интересующий пункт списка.

Теперь мы можем улучшить данную разметку с помощью вкладок jQuery UI. Для этого нам понадобится установить в нашем custom.js файле следующую разметку:

...
jQuery("#ourStructure").tabs();
...

Сложно поверить, но это весь необходимый код.

Довольно неплохо! Давайте теперь посмотрим на некоторые другие аспекты использования плагина jQuery UI.

Блог про WordPress
Добавить комментарий

Получать новые комментарии по электронной почте.