«Блогография» с шаблонами и jQuery

Движок WordPress, благодаря своей открытости и популярности, сравнительно просто настраивается и расширяется. В третьей его версии появилась возможность ввода дополнительных полей для каждой записи. Причем сделано это весьма удобно: создав однажды новое поле для каких-нибудь сведений, в дальнейшем можно будет просто выбирать его из соответствующего списка. Для обсуждаемой здесь задачи определим поле latlng и будем заносить в него координаты (широту и долготу) географических объектов. Помимо того, напишем несложную веб-программу, объединяющую записи блога и карты Google. Впрочем, аналогичный функционал несложно сделать и на основе любых других сервисов, предоставляющих API для добавления маркеров на карту, скажем, на базе «Яндекс.Карты». В результате удастся сделать более наглядными блоги, посвященные, к примеру, театральной жизни города, рассказывающие о магазинчиках с интересными товарами или скидках в них, о выставках, конференциях, семинарах и т. п.

Думается, что такой дополнительный режим отображения лишь добавит блогам привлекательности, ведь читатели смогут увидеть текст, фото и видео, привязанные к сайту. Кроме того, они, например, узнают, как проехать или пройти к нужному объекту на карте, что находится с ним по соседству, а также рассчитать время движения и выяснить еще много чего полезного. Конечный результат нашего эксперимента получится примерно таким: в окне браузера поверх карты появятся маркеры, привязанные к записям блога. Щелчок на них перебросит к статье, отображаемой стандартными средствами WordPress в соответствии со сделанными там настройками и выбранным шаблоном.

Внутри WordPress

Сперва рассмотрим серверную часть нашей программы. Она включает в себя главный файл index.html и ряд модулей на PHP для конвертирования записей БД в формат JSON, понятный JavaScript. Самый простой способ интегрироваться с WordPress — это воспользоваться его же классами и функциями для доступа к таблицам базы данных блога. Узнать, как именно движок хранит данные, то бишь структуру и поля таблиц, позволяет утилита PhpMyAdmin. Она, напомним, предустановлена на веб-хостингах и доступна в таком популярном пакете для Windows-разработчиков сайтов, как Denwer, — в нем она запускается из браузера по ссылке localhost/Tools/phpMyAdmin.

Итак, записи WordPress добавляются к таблице с именем <префикс>_posts (через символ подчеркивания), а метаданные, включая дополнительные поля для записей блога, хранятся в таблице <префикс>_postmeta. В обоих случаях префикс — это идентификатор, заданный при установке WordPress. По умолчанию он имеет значение wp. Для доступа к БД в WordPress предусмотрены класс wpdb и уже объявленная глобальная переменная $wpdb. Остается лишь подключить соответствующий модуль с помощью команды require_once «/wordpress/wp-load.php».

Теперь создадим SQL-запрос и присвоим его переменной $request. В нем свяжем две таблицы по полю ID, используя ссылки на имена таблиц в переменных $wpdb->posts и $wpdb->postmeta. В запросе выбираются уже опубликованные данные (имеющие статус publish, что позволит исключить черновые копии записей), в которых объявлено поле address (если используется другое название, его нужно указать в условии для поля meta_key). Кроме того, они упорядочиваются по дате от наиболее поздней к ранней (опция DESC). Отметим, что дополнительно можно ограничить число записей посредством опции LIMIT — в данном случае отбираются десять последних записей.

Итак, запрос выглядит так, как показано в листинге

Следующий этап — перебор в цикле foreach () строк запроса и добавление значений в массив:

$posts=$wpdb->get_results ($request);

$b=array ();

foreach ($posts as $post) {:}

Внутри цикла foreach, собственно, и определяется, какие именно поля и в какой последовательности попадают в массив $b. Для рассматриваемой задачи достаточно трех: содержимое записи (поле post_content, которое при необходимости можно обрезать строковыми функциями), ссылка на полный текст записи и поле с адресом.

$post_content=stripslashes

($post->post_content);

$permalink=get_permalink ($post->ID);

$address=$post->meta_value;

$b [$post->ID]=array (latlng’ => $post->meta_value, ‘address’=>‘’, ‘title’=>$post_title, ‘link’ => $permalink, ‘content’=>$post_content);

Последний этап — конвертирование массива с помощью функции json_encode () в понимаемую JavaScript-сценариями JSON-структуру и ее печать:

$mapjson = json_encode ($b);

echo $mapjson;

Все эти действия можно записать в виде функции echo_json_map (), расположить в отдельном модуле (к примеру, functions.php) и вызывать их при запросе данных с сервера. Назовем этот модуль get_map.php. Не считая открывающего и закрывающего тегов, он занимает всего две строки:

HTML-страница изнутри

Клиентский модуль, как уже отмечалось, использует jQuery. Так что не забудьте подключить фреймворк jQuery к html-файлу. Кроме того, он использует официальный плагин «шаблонизатор», позволяющий динамически формировать контент страницы по шаблону (этот шаблон, предложенный Microsoft, в октябре стал официальным плагином jQuery):

Также потребуется модуль для управления картами Google:

Алгоритм работы создаваемой программы примерно таков. Сначала нужно определить параметры карты и способ ее отображения, далее обратиться через ajax-запрос к блогу и получить от нашего PHP-скрипта данные в формате JSON-массива, а затем перебрать этот массив и динамически добавить его на страницу: маркеры появляются на карте, а подсказки добавляются в отдельный блок div.

Изначально веб-страница пуста. Никаких данных в ней нет, есть лишь пара блоков