Динамічний архів блогу з використанням jQuery (Ajax)

Усі ми бачили архіви, у яких при виборі місяця нас перекидало на сторінку із записами за цей місяць. У WordPress такий висновок архівних посилань реалізується за допомогою функції wp_get_archives() . Аналогічний архів записів виходить при виведенні звичайних рубрик WordPress, тільки записи групуються за категоріями.

Динамічний архів блогу з використанням jQuery (Ajax)

Сьогодні я хочу розповісти вам, як зробити динамічну архівну сторінку . “Динамічна” означає, що при виборі місяця результати будуть показуватися на тій же сторінці , за допомогою 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 і створимо постійну сторінку, призначивши їй, щойно створений шаблон.

Динамічний архів блогу з використанням jQuery (Ajax)

Тепер заповнимо цей файл необхідним кодом.

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>

На цьому етапі у мене вийшло таке:

Динамічний архів блогу з використанням jQuery (Ajax)

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 .

Ось і все, сторінка готова!

Ось що в мене вийшло (правда, це всього лише картинка. Живий приклад див. тут ):

Динамічний архів блогу з використанням jQuery (Ajax)

Пов'язані записи

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *