Задача:
Недавно столкнулся с интересной для себя задачей: Написать скрипт, который бы выводил некоторое количество постов с моего сайта в виде миниатюр. Казалось бы что может быть проще, однако суть задачи именно в том, чтобы сделать этот скрипт универсальным и доступным в использовании на любом сайте с любого движка.
Пример реализации вы можете посмотреть на моём сайте game.tobefun.org открыв любую игру.
Как видите я применил этот алгоритм для вывода определённого количества (оно задаётся параметрами вашего окна) случайных миниатюр, которые являются ссылками на записи для которых они заданы.
Шаг 1 — html Документ
Общая структура html-Документа такова:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<!-- Подключаем файл со скриптами -->
<script src="http://game.tobefun.org/play/more.js"></script>
</head>
<body>
<div class="more">
<span class="more_game" lang="ru"></span>
</div>
</body>
</html>
Шаг 2 — JavaScript и формирование Ajax запроса
Для начала нам нужно определить размеры рабочей области окна браузера. Для этого используем код:
var width = $(window).width();
var height = $(window).height();
Затем передаём полученные данные методом POST
var width = $(window).width();
var height = $(window).height();
$.post(
"more.php", // php-Файл, который принимает данные
{
width: logo_width,
height: height
},
onAjaxSuccess // Функция, которая будет запущена при успешной отправке
);
function onAjaxSuccess(data)
{
// Здесь мы получаем данные, отправленные сервером и выводим их на экран в объекте с id="more_game".
$("#more_game").html(data);
// Для правильного ресайзинга добавим динамический параметр высоты объекта
$('#more_game').css('height', height);
}
Шаг 3 — PHP — Обработчик
<?php
/* Обрабатываем параметры екрана
$_POST['height'] - Общая высота
64 - высота одного изображения */
$img_kil = floor($_POST['height']/64);
/* Если возможно разместить хотя бы обно изображение ... */
if ($img_kil >= 1) { // <- САМЫЙ ПЕРВЫЙ IF
/* Подключаемся к базе данных сайта, с которого хотим вытянуть записи */
$db = new PDO('mysql:host='.DB_HOST.';dbname='.DB_NAME, DB_USER, DB_PASSWORD); // Подключаемся к Серверу
/*Так как у меня изображение выводятся в три колонки, а количество возможных строк равно $img_kil
То общее количество необходимых постов будет втрое больше */
$k=$img_kil*3;
Шаг 3.1 — SQL запрос для получения ссылок на изображения
Он будет состоять из трёх частей:
1. Запрос на выборку ID's опубликованных записей
SELECT `ID`
FROM `wp_posts`
WHERE `post_type` = 'post'
AND `post_status` = 'publish'
2. Запрос на выборку ID's фото, которые установлены как миниатюра
SELECT `meta_value`
FROM `wp_postmeta`
WHERE `meta_key` = '_thumbnail_id'
AND `post_id`
IN ()
3. Запрос на выборку необходимых данных выбранных фото.
SELECT `post_id`, `meta_value`
FROM `wp_postmeta`
WHERE `post_id`
IN ()
ND `meta_key` = '_wp_attachment_metadata'
Общий запрос, который будет выдавай $k случайных записей, выглядит так:
$sql='
SELECT `post_id`, `meta_value`
FROM `wp_postmeta`
WHERE `post_id`
IN (
SELECT `meta_value`
FROM `wp_postmeta`
WHERE `meta_key` = '_thumbnail_id'
AND `post_id`
IN (
SELECT `ID`
FROM `wp_posts`
WHERE `post_type` = 'post'
AND `post_status` = 'publish'
)
)
AND `meta_key` = '_wp_attachment_metadata'
ORDER BY RAND()
LIMIT '.$k;
Теперь нужно его обработать
$stmt = $db->query($sql);
//Установка fetch mode
$stmt->setFetchMode(PDO::FETCH_ASSOC);
while($row = $stmt->fetch())
{
$img_mass = unserialize($row['meta_value']);
/* Переменная $img_mass будет содержать массив такого вида
Array
(
[width] => 1000
[height] => 651
[file] => 2013/01/Ниндзя-черепашки.jpg
[sizes] => Array
(
[thumbnail] => Array
(
[file] => Ниндзя-черепашки-538x350.jpg
[width] => 538
[height] => 350
[mime-type] => image/jpeg
)
[medium] => Array
(
[file] => Ниндзя-черепашки-300x195.jpg
[width] => 300
[height] => 195
[mime-type] => image/jpeg
)
[yarpp-thumbnail] => Array
(
[file] => Ниндзя-черепашки-120x120.jpg
[width] => 120
[height] => 120
[mime-type] => image/jpeg
)
)
[image_meta] => Array
(
[aperture] => 0
[credit] =>
[camera] =>
=>
[created_timestamp] => 0
[copyright] =>
[focal_length] => 0
[iso] => 0
[shutter_speed] => 0
[title] =>
)
)
*/
list($year, $mount, $name) = explode("/", $img_mass['file']);
/* $img_mass['file']='Развиваем строку 2013/01/Ниндзя-черепашки.jpg' для получения директории в которой находится файл
$year = '2013'
$mount = '01'
$name = 'Ниндзя-черепашки.jpg'*/
$img_dir = $year.'/'.$mount.'/'.$img_mass['sizes']['yarpp-thumbnail']['file'];
/* Формируем путь к файлу нужного нам размера (в моём случае 'yarpp-thumbnail')*/
$base [] = array ( 'post_id' => $row['post_id'], 'img_dir' => $img_dir);
/* Сохраняем данные*/
}
Шаг 3.2 — SQL запрос для получения ссылок на записи
$k_post = sizeof($base); // Подсчитаем количество полученных изображений
for ($i=0; $i<$k_post; $i++) {
/* Формируем запрос для получения записи соодтведствующей данному изображению */
$sql='
SELECT `post_title`, `post_name`
FROM `wp_posts`
WHERE `ID`
IN (
SELECT `post_id`
FROM `wp_postmeta`
WHERE `meta_value` = '.$base[$i]['post_id'].'
)';
/* Выполняем его */
$stmt = $db->query($sql);
$stmt->setFetchMode(PDO::FETCH_ASSOC);
/*Выводим ссылку*/
while($row = $stmt->fetch()) {
echo '<a href="http://game.tobefun.org/'.$row['post_name'].'.html" title="'.$row['post_title'].'"><img width="120" height="120" src="http://game.tobefun.org/wp-content/uploads/'.$base[$i]['img_dir'].'"></a>';
}
}
$db = null; //Закрытие соединения
} // <- ЗАКРЫВАЕМ САМЫЙ ПЕРВЫЙ IF
?>
Автор: Kozack
