Изображения (миниатюры) для связных постов в Simple Tags

В процесс модернизации и улучшения своего блога о веб-бизайне под незамысловатым названием Дизайн Мания я отрыл для себя несколько интересных фишек по WordPress. Конечно, все это было обнаружено в ходе долгих исследования и практических наработок в коде и плагинах, но результатом я остался доволен, поэтому работа была проделана не зря. Учитывая «графическую» тематику проекта я вдруг захотел добавить в него больше визуальной составляющей, заменив или дополнив текст. Например, в конце статьи с выводится список связных по тематике сообщений — почему бы не добавить в него изображения? — наглядно и, по-моему, цепляет внимание больше серых ссылок.

Главная задача и сложность заключалась в том чтобы внедрить мое желание максимально эффективно. Для вывода связных постов я использую супер полезный плагин Simple Tags, но в нем нет графики. С другой стороны встречал парочку модулей wordpress которые реализуют задачу в пару кликов — но ведь это дополнительная нагрузка на сайт. Было решено добавить отображение миниатюр прямо в Simple Tags. Теоретически это было сделать не сложно. Во-первых, Simple Tags отображает информацию о статье — заголовок, дату, он ведь берет ее из базы данных — почему бы не взять там и картинку. Во-вторых, сложность еще заключалась в том, что на Дизайн Мании я не использую миниатюры, а исправлять 300 с лишним статей это весьма хлопотно. Поэтому вспомнил еще одно интересное решение — получение и отображение первой картинки поста которое искал под этот же сайт.

Таким образом выработалась схема — берем решение для выбора первого изображение статьи добавляем его в код Simple Tags. Звучит, конечно, просто, на практике пришлось пару часиков потестировать все это дело.

Итак, алгоритм решения:

1. Скачиваем последнюю версию плагина и устанавливаем его в блог.

2. Находим в нем директорию inc, а в ней файл client.php — открываем его для правки (только не в блокноте дабы не возникало ошибок с кодировкой, можно использовать бесплатный Notepad++). Можно сохранить оригинальный файл под другим именем, дабы потом в случае чего можно было быстро восстановить.

3. Будем работать с фукнцией — function relatedPosts. Почти что в самом ее начале меняем строку

'xformat' => __('<a href="%post_permalink%" title="%post_title% (%post_date%)">%post_title%</a> (%post_comment%)', 'simpletags')

на

'xformat' => __('<a href="%post_permalink%" title="%post_title% (%post_date%)">%big_post_title%</a> (%post_comment%)', 'simpletags')

Здесь вместо переменной вывода заголовка поста post_title я добавил некую расширенную ее версию — big_post_title. Так как post_title выводился еще и в атрибуте title для ссылки.

4. Находим в коде место

// Posts: title, comments_count, date, permalink, post_id, counter
$results = $wpdb->get_results("
SELECT p.post_title, p.comment_count, p.post_date, p.ID, COUNT(tr.object_id) AS counter {$select_excerpt} {$select_gp_concat}

Здесь в выборку данных из постов Select добавляем также поле контента p.post_content в итоге получаем:

$results = $wpdb->get_results("
SELECT p.post_title, p.post_content, p.comment_count, p.post_date, p.ID, COUNT(tr.object_id) AS counter {$select_excerpt} {$select_gp_concat}

5. Теперь переходим к «выборке» изображения поста. Для этого перед строками в этой же функции(!):

$element_loop = $xformat;
$post_title = apply_filters( 'the_title', $result->post_title );

пишем:

$myoutput = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $result->post_content, $matchme);
$myimg = $matchme [1] [0];
if ($myimg == '') $myimg = 'путь_к_изображению/images/no-image.gif';

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

6. Продолжаем работать в том же месте кода. После строки:

$element_loop = $xformat;

пишем значение переменной big_post_title, как видите это у нас будет картинка + заголовок:

$big_post_title = '<div class="simpletumbr" style="background: url('.$myimg.') 0 0 no-repeat;"></div>'.$result->post_title;

7. Несколькими строками ниже после:

$element_loop = str_replace('%post_title%', $post_title, $element_loop);

добавляем аналогичную конструкцию:

$element_loop = str_replace('%big_post_title%', $big_post_title, $element_loop);

Здесь post_title все также содержит заголовок записи и будет добавляться в атрибут тайтла для ссылки, а наш новый big_post_title уже содержит картинку + текст заголовка.

8. На этом правка файла client.php закончена. Заходим в админку wordpress блога, раздел редактирования шаблона и выбираем single.php. Там чуть-чуть изменяем формат вызова функции:

<?php st_related_posts('title=<div class="h3title">Похожие по тематике посты:</div>&include_page=false&number=4&xformat=<a href="%post_permalink%" title="%post_title% (%post_date%)">%big_post_title%</a>'); ?>

В коде можете заметить все тот же «расширенный формат» big_post_title. Я так понимаю, что при вызове функции st_related_posts без указания формата используется тот, который задан по умолчанию, то есть в настройках Simple Tags, поэтому можете править его и там. Исходя из таких соображений, возможно, правки на шаге номер 3 оказались лишними, но это уже такое дело — одна строка там ничего не изменит, пусть работает, как есть.

Также рекомендую зайти в файл стилей style.css и добавить оформление для блока и картинок.

.simpletumbr {
border: 1px solid #333;
width: 158px;
height: 130px;
margin-bottom: 5px;
}

Кроме того нужно задать отображение превьюшек в одну строку, для этого применяем параметр float для класса списка связных постов, что-то вроде:

ul.st-related-posts li {
width: 156px;
font-size:  11px;
text-align: center;
float: left;
padding: 3px !important;
margin: 0px !important;
}

Вот такой интересный хак получился, меня результат радует:) Что касается самого процесса внесения изменений, то, во-первых, это всего лишь алгоритм, который может прояснить строение функции вывода связных постов в Simple Tags и поможет реализовать похожие решения для своих случае. Во-вторых, если используете превью для постов то нужно глянуть как картинка связана со статьей в Базе данных, выборка Select может быть чуть другой. Зато в этом случае не нужно будет «выцеплять картинку» из поста, что в пункте 5. В общем, думаю, разберетесь, главное вдумчиво прочитать всю статью и сделать резервную копию файла Для удобства измененный clients.php можно скачать здесь (Внимание! После сохранения убрать слово file из названия файла) — это точно рабочий вариант, который я использую, возможно в посте с кодом какие-то ошибки закрались.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 12, средний балл: 4,58 из 7)

Загрузка...

Категории: Хаки и секреты;
Теги: Simple Tags, изображения, миниатюры постов, новые функции, правка кода, правка плагинов.