Изображения (миниатюры) для связных постов в 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 из названия файла) — это точно рабочий вариант, который я использую, возможно в посте с кодом какие-то ошибки закрались.
комментариев 45 к статье “Изображения (миниатюры) для связных постов в Simple Tags”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Як сховати відсутні товари в Woocommerce шорткодах та схожих товарах
- Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
- Плагіни для створення стрічки новин з біжучим рядком в WordPress
- Як змінити розміщення кнопки оформлення замовлення в WooCommerce
- Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
- Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
- Онлайн генератор ссылок на мессенджеры для WordPress и не только
- WooCommerce (46)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (246)
- Сервисы (87)
- Хаки и секреты (87)
- Шаблоны (45)
- Оптимизируем WordPress header и удаляем лишний код (5,19 из 7, голосов - 43)
- Как создать пункт меню без ссылки в wordpress (6,39 из 7, голосов - 23)
- Добавление кнопки Вконтакте, Facebook и Twitter в wordpress блог (6,14 из 7, голосов - 21)
- Выполнение jQuery скриптов при выборе вариаций товаров в WooCommerce (3,96 из 7, голосов - 26)
- Хаки для вариаций товаров в WooCommerce (5,11 из 7, голосов - 18)
- Вывод текста в блоге только на главной (6,85 из 7, голосов - 13)
- Как убрать category в WordPress категориях — зачем это делать, плагины для реализации (5,31 из 7, голосов - 16)
- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Советы по выбору холодильника LG с технологией No Frost
- Зачем нужны Wi-Fi ретрансляторы и как выбрать подходящую модель
- Введение в онлайн-казино Slotor777: многообразие игр и привлекательные бонусы
- Необходимость использования облачного хранилища в наше время, что важно и как выгодно?
- Спрощення процесу звітності за допомогою програми BAS Бухгалтерія
- Технологія підключення інтернету GPON та її переваги
- За що гравці найбільше цінують Lineage 2
- Для каких проектов нужна аренда виртуального сервера и что такое VPS
Евгений, я думаю, самый правильный вариант, конечно, выводить миниатюры. Но с этим лично не сталкивался, поэтому точный код не подскажу. Тем не менее, принцип изменений тот же, на 4-5 пунктах нужно вытащить из базы данных миниатюру и ее добавить в пост.
Очень хочу сделать такой вывод постов… Но что-то в последней версии нет такого файла файл client.php :(
нашла :)))))
попробывала заменить полностью на ваш файл — выдало ошибку…
Марси, возможно, несостыковка версий Simple Tags или wordpress, в таком случае лучше вручную подправить код по алгоритму, который я рассказал.
да а не легче как вы сказали использовать просто другой плагин? разве он так сильно загрузит сис-му?
medved, проще — да, но вопрос — зачем использовать еще один плагин, если можно сделать этим.
Здорово! Я так глобально никогда не меняла коды в файлах, а с такой инструкцией все получилось. Спасибо! Остался только моментик: рядом с картинками, которые теперь отображаются под записью по тегам показываются буллиты списков (по крайней мере мне так кажется :)). Как мне их убрать? какой стиль исправить? Спасибо.
ronny, у каждого шаблона свой стиль, поэтому нужно просто поискать как там что выводится, убирать через CSS свойство списка: ul { list-style-type:none; }
Tod, не совсем понимаю, про CSS. Нужно менять в стилях темы? Но это же относится к тегам? Буду копать, конечно, спасибо:)
ronny, css это в стилях темы файл style.css.
плагин обновился. Схема описанная выше неактуальна к сожалению…
Nik, конечно, после правки в коде плагинов обновлять его нельзя иначе придется заново все делать и искать. А вообще советую глянуть пост с плагинами для похожих постов с миниатюрами — возможно, там найдете решение для своего проекта.
Подскажите пожалуйста!
Как сделать вывод не первой картинки поста, а миниатюру?
Какой код нужно написать?
Sergey, в данном случае у меня было «вынужденное решение» именно для плагина Simple Tags + у постов там нет миниатюр. Сейчас я бы поискал и выбрал плагины похожих постов с миниатюрами (thumbnails) – это гораздо проще чем копаться в коде.