Задача:
Недавно столкнулся с интересной для себя задачей: Написать скрипт, который бы выводил некоторое количество постов с моего сайта в виде миниатюр. Казалось бы что может быть проще, однако суть задачи именно в том, чтобы сделать этот скрипт универсальным и доступным в использовании на любом сайте с любого движка.
Пример реализации вы можете посмотреть на моём сайте 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 ?> ссылка на оригинал статьи http://habrahabr.ru/post/180001/
Добавить комментарий