Давайте предположим, что у нас есть клиент – дизайнер мультимедийных проектов с открытым исходным кодом, – которому требуется выполнить чистую и оригинальную домашнюю страницу. Он желает, чтобы все записи на главной странице находились в ее вершине и были представлены в виде списка заголовков, причем записи должны принадлежать только двум конкретным рубрикам. На практике это означает, что посетитель, как только он зайдет на сайт, сможет сначала ознакомиться с заголовками статей, прежде чем приступать к чтению интересующего его контента.
Естественно, клиент желает, чтобы все действия происходили сглаженно. Когда посетитель щелкает по заголовку записи, она будет загружаться посредством 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;"> </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);//переходим к новому контенту
});
...
Проект готов. Мы получили отличную страницу, обладающую удобством просмотра и ораганильностью представления информации:
