Проект: применяем AJAX к записям

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

Естественно, клиент желает, чтобы все действия происходили сглаженно. Когда посетитель щелкает по заголовку записи, она будет загружаться посредством AJAX, что придаст событию большую плавность и мягкость. Дополнительной перезагрузки страницы не произойдет.

Чтобы выполнить поставленную перед нами задачу, мы должны хорошо разбираться в иерархии шаблонов и произвольных циклах. Мы создадим шаблон home.php, который будет являться домашней страницей по умолчанию. На этой странице мы выведем пять последних записей для рубрик «WordPress Design» и «Inkscape Illustration».

Для начала нам понадобится создать страницу home.php и добавить к ней разметку #content
div. Помимо этого, мы добавим к теме разметку заголовка и подвала.

<?php get_header(); ?>
  <div id="content" role="main">
  
  </div><!--//content-->
  
<?php get_footer(); ?>  

Далее, внутри нашего #content div мы разместим произвольные циклы, которые будут загружать интересующие нас рубрики «WordPress Themes» и «Inkscape Illustration». Мы знаем, что ID рубрик равны соответственно 6 и 7, следовательно, наши циклы будут выглядеть следующим образом:

...
  <div style="float:left; width: 380px;">
  <h2>What's new in WordPress Themes:</h2>
  <ul>
  <?php global $post;
 $wpposts = get_posts('numberposts=5&category=6');
 foreach($wpposts as $post):
      setup_postdata($post);?>
      <li><a href="<?php the_permalink() ?>">
          <?php the_title(); ?></a></li>
 <?php endforeach; ?>
  </ul>
  </div>
<div style="float:right; width: 380px;">
  <h2>Inkscape: Draw freely covers it all</h2>
  <ul>
  <?php global $post;
 $inkposts = get_posts('numberposts=5&category=7');
 foreach($inkposts as $post):
      setup_postdata($post);?>
      <li><a href="<?php the_permalink() ?>">
          <?php the_title(); ?></a></li>
 <?php endforeach; ?>
  </ul>
  </div>
  <div style="clear:both;">&nbsp;</div>
...

В результате мы получим следующую страницу:

Если мы щелкнем по какому-либо заголовку записи, то перейдем к странице с ее полным содержанием:

Это именно то, что нам надо. Если пользователь по какой-либо причине отключит Javascript, он по-прежнему сможет получить интересующую его информацию. Мы не должны отсеивать людей, которые пользуются устаревшими браузерами или мобильными устройствами. Улучшать, но не исключать — вот основная цель нашей работы.

В данном разделе нам понадобится обновить технику, которой мы пользовались в шестой главе для улучшения загрузки PDF файла. Мы «похитим» ссылку у записи (данный метод также называется «hijax», от английского «hijack» — похищать) и будем использовать ее URL в функции .load.

Для начала нам понадобится создать новый блок div, в который мы будем загружать контент. С этой целью в файле custom-jquery.js мы поместим следующий код:

...
jQuery('.home #content').append('<div class="displayPost"></div>');
...

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

...
jQuery('#content li a').click(function(event){
     //Сохраняем href от перезагрузки страницы
     event.preventDefault();
     //получаем ссылку страницы
     var page = jQuery(this).attr('href');
    
     jQuery('.displayPost')
       //используем полученную ссылку в функции .load
       .load(page+' .post')
       .fadeOut()//плавно скрываем предыдущий контент
       .slideDown(2000);//переходим к новому контенту
  
});
... 

Проект готов. Мы получили отличную страницу, обладающую удобством просмотра и ораганильностью представления информации: