Pull to refresh

Вывод постов вордпресс за пределами сайта

Reading time 4 min
Views 7.3K


Задача:


Недавно столкнулся с интересной для себя задачей: Написать скрипт, который бы выводил некоторое количество постов с моего сайта в виде миниатюр. Казалось бы что может быть проще, однако суть задачи именно в том, чтобы сделать этот скрипт универсальным и доступным в использовании на любом сайте с любого движка.

Пример реализации вы можете посмотреть на моём сайте 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] => 
            [caption] => 
            [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
 ?>
Only registered users can participate in poll. Log in, please.
Когда вы кодите?
38.39% Днём, Ночью сплю 43
20.54% Ночью, Днём сплю 23
41.07% Круглосуточно без сна 46
112 users voted. 35 users abstained.
Tags:
Hubs:
-2
Comments 12
Comments Comments 12

Articles