Динамічний архів блогу з використанням jQuery (Ajax)
Усі ми бачили архіви, у яких при виборі місяця нас перекидало на сторінку із записами за цей місяць. У WordPress такий висновок архівних посилань реалізується за допомогою функції wp_get_archives() . Аналогічний архів записів виходить при виведенні звичайних рубрик WordPress, тільки записи групуються за категоріями.
Сьогодні я хочу розповісти вам, як зробити динамічну архівну сторінку . “Динамічна” означає, що при виборі місяця результати будуть показуватися на тій же сторінці , за допомогою AJAX – технології Javascript. Оскільки бібліотека jQuery надає зручний API для роботи з Ajax, то будемо використовувати цей фреймворк. До того ж, куди сьогодні без jQuery? Адже він використовується часто-густо, і напевно у вашому проекті він вже підключений.
Перед написанням цієї статті я зробив динамічну архівну сторінку для цього блогу, пропоную подивитись (ДЕМО) .
Отже.
Щоб реалізувати динамічний архів, нам потрібно пройти 4 етапи:
Я показуватиму створення динамічної сторінки архівів на прикладі базової теми WordPress: “twentyten”.
1. Підключення jQuery у WordPress
Правильний варіант підключення jQuery скрипта – це використання функції wp_enqueue_script() . Таке підключення убезпечить вас від конфліктів із підключенням цього ж скрипту в плагінах. Скрипт буде підключено один раз.
<?php
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
wp_enqueue_script('jquery');
}
?>Вставляти цей код потрібно у файл теми functions.php.
Варіант 2
У першому варіанті ми підключили скрипт із нашого сервера, який є у файлах WordPress. Однак, можна змінити посилання на файл jQuery та підключити його до CDN Google. Перевага такого підходу в тому, що якщо у браузері відвідувача вже завантажено цей файл, то при заході на ваш сайт браузер вже не завантажуватиме скрипт/ Завантаження сторінки збільшиться. Крім того, CDN скрипт віддається в стислому вигляді, за рахунок чого файл легше на кілька кілобайт:
function my_scripts_method() {
wp_deregister_script('jquery');
wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');
wp_enqueue_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );Варіант 3
Найдавніший і так званий “жорсткий” варіант підключення jQuery – це прописати посилання на нього у файлі шаблону header.php, всередині тега </head>. Вставляємо такий html код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
2. Завантажимо картинку перед-завантажувач
У період очікування, коли запит надсилається серверу за допомогою AJAX, нам потрібно показати картинку, повідомивши користувача, що щось відбувається. Такі картинки ви, напевно, бачили в мережі і не раз, альтернативою такої картинки виступає текст: “Завантаження…”.
Щоб надалі у нас була така картинка, давайте скачаємо її, наприклад, від сюди: Анімовані gif (сервіс мені сподобався), перейменуємо її ajax-loader.gifі завантажимо в папку images, яка знаходиться в каталозі нашої теми WordPress. У результаті ми маємо такий нехай до картинки: http://example.com/wp-content/themes/twentyten/images/ajax-loader.gif. Нижче ми його використовуємо у коді.
3. Створення шаблону постійної сторінки
Для постійних сторінок у WordPress можна використовувати окремі шаблони, таким чином ми можемо створити сторінку, яка зовсім відрізняється від структури від інших сторінок. Щоб вказати WordPress, що створений файл є шаблоном для постійної сторінки, на початок цього файлу потрібно прописати такий код:
<?php /* Template Name: Шаблон архівів */ ?>
Шаблон архівів – це назва нашого шаблону, яку ми побачимо в адмін-панелі WordPress, при створенні постійної сторінки.
Давайте створимо новий файл у папці теми з назвою tpl_archive.phpі вставимо туди вищенаведений код. Потім зайдемо в адмін-панель WordPress і створимо постійну сторінку, призначивши їй, щойно створений шаблон.
Тепер заповнимо цей файл необхідним кодом.
1. В першу чергу, нам потрібно вивести списки , що випадають, створимо ми їх за допомогою функцій WordPress: wp_dropdown_categories() :
<?php
/*
Template Name: Шаблон архівів
*/
?>
<?php get_header(); ?>
<div id="archive_browser">
<div>
<h4>Місяці</h4>
<select id="month-choice">
<option val="no-choice"> - </option>
<?php wp_get_archives(array(
'type' => 'monthly',
'format' => 'option'
)); ?>
</select>
</div>
<div>
<h4>Рубрики</h4>
<?php wp_dropdown_categories('show_option_none= -- '); ?>
</div>
</div>
<div id='archive_pot'></div>
<?php get_footer(); ?>get_header();і get_footer();отримують шапку та підвал шаблону відповідно. get_sidebar();я вирізав навмисно, щоб він не мішався в розумінні коду. Решта коду виводить списки Місяців і Рубрик.
Порожній блок <div id='archive_pot'></div>— це контейнер, куди будуть виводитися результати запиту, тобто. запис.
2. Оформимо списки, що випадають через CSS, для цього додамо такий код відразу після виклику шапки ( <?php get_header(); ?>):
<style type="text/css" rel="stylesheet" >
#archive_browser > div { display: inline-block; padding-right: 10px; }
#archive_pot {min-height:150px; }
#archives_table {border-collapse:collapse; margin:15px 0 0 0; width:100%; }
#archives_table td {min-height:25px; padding:4px; border-top:1px solid #eee; border-bottom:1px solid #eee; }
</style>На цьому етапі у мене вийшло таке:
3. Додамо JavaScript код , який буде виконувати запит до сервера і виводити його в блок archive_pot(код додаємо після css стилів):
<script type="text/javascript">
(function($){
$(function(){
$("#archive_browser select").change(function(){
$("#archive_pot")
.empty()
.html("<div style='text-align:center; padding:30px;'><img src='<?php bloginfo('template_url') ?>/images/ajax-loader.gif' /></ div>");
var dateArray = $("#month-choice").val().split("/");
var y = dateArray[3];
var m = dateArray[4];
var c = $("#cat").val();
$.post(
"<?php bloginfo('template_url') ?>/scripts/archive_getter.php",
{
year : y,
month : m,
cat : c
},
function(data) {
$("#archive_pot").html(data).animate({ height: $("#archives_table").height()+40 });
}
);
});
});
})(jQuery)
</script>Розберемо трохи код:
Все що всередині $("#archive_browser select").change(function(){...}спрацьовуватиме при зміні списків, що випадають.
<?php bloginfo('template_url') ?>/images/ajax-loader.gif— шлях до файла-картинки (завантаження…), яка підвантажуватиметься під час запиту.
<?php bloginfo('template_url') ?>/scripts/archive_getter.phpшлях до файлу обробника запиту, який ми створимо на наступному етапі.
$.post(...);— Функція jQuery, що створює запит браузера на сервер, використовуючи AJAX технологію.
Повний код шаблону постійної сторінки
Файл шаблону постійної сторінки (створюємо файл у папці теми та копіюємо туди цей код):
<?php
/*
Template Name: Шаблон архівів
*/
?>
<?php get_header(); ?>
<style type="text/css" rel="stylesheet" >
#archive_browser > div { display: inline-block; padding-right: 10px; }
#archive_pot {min-height:150px; }
#archives_table {border-collapse:collapse; margin:15px 0 0 0; width:100%; }
#archives_table td {min-height:25px; padding:4px; border-top:1px solid #eee; border-bottom:1px solid #eee; }
</style>
<script type="text/javascript">
(function($){
$(function(){
$("#archive_browser select").change(function(){
$("#archive_pot")
.empty()
.html("<div style='text-align:center; padding:30px;'><img src='<?php bloginfo('template_url') ?>/images/ajax-loader.gif' /></ div>");
var dateArray = $("#month-choice").val().split("/");
var y = dateArray[3];
var m = dateArray[4];
var c = $("#cat").val();
$.post(
"<?php bloginfo('template_url') ?>/scripts/archive_getter.php",
{
year : y,
month : m,
cat : c
},
function(data) {
$("#archive_pot").html(data).animate({ height: $("#archives_table").height()+40 });
}
);
});
});
})(jQuery)
</script>
<div id="archive_browser">
<div>
<h4>Місяці</h4>
<select id="month-choice">
<option val="no-choice"> - </option>
<?php wp_get_archives(array(
'type' => 'monthly',
'format' => 'option'
)); ?>
</select>
</div>
<div>
<h4>Рубрики</h4>
<?php wp_dropdown_categories('show_option_none= -- '); ?>
</div>
</div>
<div id='archive_pot'></div>
<?php get_footer(); ?>
4. Створення файлу-обробника
AJAX має на увазі “спілкування” браузера з сервером без перезавантаження сторінки, засобами Javascript. Скрипт сам по собі не може отримати жодних даних, адже він знаходиться на комп’ютері користувача, а дані на сервері, тому щоб скрипт отримав дані, він повинен звернутися до сервера, в даному випадку такий діалог буде підтримувати файл-обробник.
Давайте створимо папку scriptsв каталозі теми, у ній створимо файл archive_getter.php( /wp-content/themes/twentyten/scripts/archive_getter.php) і заповнимо цей файл наступним кодом:
<?php
// підвантажуємо середовище WP
require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');
// фільтруємо POST дані, що передаються цьому файлу з Javascript
$year = htmlspecialchars(trim($_POST['year'])));
$month = htmlspecialchars(trim($_POST['month'])));
$cat = htmlspecialchars(trim($_POST['cat'])));
?>
<table id="archives_table">
<?php
if( ($year=='') && ($month=='') && ($cat=='-1') ){
echo "<tr><td style='text-align: center; font-size: 15px; padding: 5px;'>Будь ласка, виберіть дату/категорію зі списку вище.</td></tr>";
}
else
{
// Отримуємо дані за допомогою query_posts
query_posts("posts_per_page=-1&cat=$cat&monthnum=$month&year=$year");
// Виводимо дані в Циклі WordPress
if( have_posts() ){ while( have_posts() ){ the_post(); ?>
<tr>
<td><a href='<?php the_permalink(); ?>'><?php the_title(); ?></a></td>
<td><?php comments_popup_link('', '1 Коментар', '% Коментарів'); ?></td>
<td><?php the_time('jmY'); ?></td>
</tr>
<?php
}}
else // Якщо постів немає
echo "<tr><td style='text-align: center; font-size: 15px; padding: 5px;'>Нічого не знайдено.</td></tr>";
} ?>
</table>Невеликий розбір коду:
Спочатку ми підвантажуємо середовище WordPress (всі налаштування, функції, плагіни). Це робиться для того, щоб нам стали доступні функції WordPress, зокрема query_posts() , яку ми використовуємо в цьому файлі для отримання даних.
Умовою if( ($year=='') && ($month=='') && ($cat=='-1') ){...}ми перевіряємо чи існують будь-які дані, які ми можемо використовувати у функції query_posts() , якщо динних немає, то виводимо повідомлення.
query_posts("posts_per_page=-1&cat=$cat&monthnum=$month&year=$year");і все що нижче це звичний цикл WordPress .
Ось і все, сторінка готова!
Ось що в мене вийшло (правда, це всього лише картинка. Живий приклад див. тут ):
