Янв
25
45

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

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

миниатюры simple tags

Главная задача и сложность заключалась в том чтобы внедрить мое желание максимально эффективно. Для вывода связных постов я использую супер полезный плагин 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 из названия файла) — это точно рабочий вариант, который я использую, возможно в посте с кодом какие-то ошибки закрались.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 12, средний балл: 4,58 из 7)
Loading ... Loading ...

категория Категории: Хаки и секреты;
теги Теги: , , , , , .
Заработай на сайте

Комментариев - 45 к статье “Изображения (миниатюры) для связных постов в Simple Tags”

  • Tod   18.05.2011

    Евгений, я думаю, самый правильный вариант, конечно, выводить миниатюры. Но с этим лично не сталкивался, поэтому точный код не подскажу. Тем не менее, принцип изменений тот же, на 4-5 пунктах нужно вытащить из базы данных миниатюру и ее добавить в пост.

  • Марси   30.05.2011

    Очень хочу сделать такой вывод постов… Но что-то в последней версии нет такого файла файл client.php :(

  • Марси   30.05.2011

    нашла :)))))

  • Марси   30.05.2011

    попробывала заменить полностью на ваш файл — выдало ошибку…

  • Tod   31.05.2011

    Марси, возможно, несостыковка версий Simple Tags или wordpress, в таком случае лучше вручную подправить код по алгоритму, который я рассказал.

  • medved   06.06.2011

    да а не легче как вы сказали использовать просто другой плагин? разве он так сильно загрузит сис-му?

  • Tod   06.06.2011

    medved, проще — да, но вопрос — зачем использовать еще один плагин, если можно сделать этим.

  • ronny   26.08.2011

    Здорово! Я так глобально никогда не меняла коды в файлах, а с такой инструкцией все получилось. Спасибо! Остался только моментик: рядом с картинками, которые теперь отображаются под записью по тегам показываются буллиты списков (по крайней мере мне так кажется :)). Как мне их убрать? какой стиль исправить? Спасибо.

  • Tod   27.08.2011

    ronny, у каждого шаблона свой стиль, поэтому нужно просто поискать как там что выводится, убирать через CSS свойство списка: ul { list-style-type:none; }

  • ronny   29.08.2011

    Tod, не совсем понимаю, про CSS. Нужно менять в стилях темы? Но это же относится к тегам? Буду копать, конечно, спасибо:)

  • Tod   29.08.2011

    ronny, css это в стилях темы файл style.css.

  • Nik   31.07.2012

    плагин обновился. Схема описанная выше неактуальна к сожалению…

  • Tod   01.08.2012

    Nik, конечно, после правки в коде плагинов обновлять его нельзя иначе придется заново все делать и искать. А вообще советую глянуть пост с плагинами для похожих постов с миниатюрами — возможно, там найдете решение для своего проекта.

  • Sergey   23.09.2012

    Подскажите пожалуйста!
    Как сделать вывод не первой картинки поста, а миниатюру?
    Какой код нужно написать?

  • Tod   24.09.2012

    Sergey, в данном случае у меня было «вынужденное решение» именно для плагина Simple Tags + у постов там нет миниатюр. Сейчас я бы поискал и выбрал плагины похожих постов с миниатюрами (thumbnails) – это гораздо проще чем копаться в коде.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Последние посты
Заработай в GoGetLinks
Облако тегов
Лучшее в категории
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Loading ... Loading ...
Друзья проекта
Последние новости