Янв
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)
Загрузка...

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

Похожие статьи:

  1. Миниатюры для поста в WP 2.9 на практике
  2. Картинки-превью (миниатюры) в списке постов админки WordPress
  3. Добавление миниатюры (thumbnail) в RSS для wordpress
  4. Автоматическая установка миниатюр для новых постов
  5. Размеры изображений в WordPress — как изменить, добавить свои и удалить лишние

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

1 2
  • vomm   25.01.2011

    Ничего не получилось. А client.php скачивается пустой

  • Tod   25.01.2011

    vomm, подправил немного файл, что-то пхп не хочет скачиваться. Там нужно убрать из названия лишний текст file и можно использовать.

  • vomm   25.01.2011

    Да, теперь все работает. Спасибо огромное

  • sevenup   26.01.2011

    Здравствуйте, подскажите пожалуйста как называется плагин, который выводит подписку на обновление блога, в конце каждого поста ? Заранее благодарю!

  • Tod   26.01.2011

    sevenup, это сделано вручную, почитать можно в статье про оформление записи блога на wordpress.

  • sevenup   26.01.2011

    Большое спасибо! Да кстати, нажмите на свою запись в сообщении «оформление записи блога», думаю захотите это исправить :)

  • eminkoff   26.01.2011

    Код выбирает именно первое изображение из поста? Все коды, что встречал, берут последнее :(

  • Tod   26.01.2011

    eminkoff, код выбирает именно первое, в статье же об этом сказано)

  • eminkoff   26.01.2011

    Я понимаю, что сказано, просто ко всем другим кодам тоже писалось «how to get first image», а в итоге все равно все последнее гребли… Поэтому и переспросил :)
    Спасибо

  • Андрей   30.01.2011

    Всё бы Ок, только Вот похожие посты отображаются Вертикально…
    \Как исправить?))
    Спасибо!)

  • Tod   31.01.2011

    Андрей, для css стиля, который выводит список категорий нужно добавить свойство float: left; Сейчас обновлю пост по этому поводу, добавил в него этот пример.

  • risya   10.02.2011

    Подскажите, а как мне нужно модифицировать код, чтобы использовать не первое изображение, а миниатюры?

  • Tod   11.02.2011

    risya, теоретически, это возможно, я просто не сталкивался еще с таким примерами, так как у меня в блоге не было миниатюр. Что нужно сделать для их подключения — принцип, фактически, тот же, просто вместо «считывания» первой картинки поста нужно подставить функцию (смотрите в кодексе wordpress) которая бы отдавал миниатюру:)

  • risya   11.02.2011

    Спасибо =) Буду искать. В целом отличная методика. Спасибо вам )))

  • polly-princess   12.02.2011

    Tod, помогите пожалуйста! Картинки то выводятся, но не уменьшенные, а просто углы от больших картинок, не знаю понятно ли обьяснила… В общем я загружаю в саму статью большую картинку, а на главную выводятся превью, сделанные с помощью дополнительного поля. Так вот с помощью вашего метода около related posts выводятся не миниатюры, а только части от больших картинок. Как это исправить? Подскажите, плиииз, очень надо!

  • Андрей   14.02.2011

    в single.php нет у меня такой строчки (((

  • Tod   14.02.2011

    Андрей, если нет, нужно добавить — эта строка добавлять вывод связных постов.

  • Tod   14.02.2011

    polly-princess, я понял о чем вы хотели сказать, к сожалению, именно так метод и работает — он считывает первую картинку из статьи и отображает лишь ее часть. Тут есть варианта для «доработки» — использовать какие-то функции PHP для уменьшения картинки, но я с таким не сталкивался и второй вариант — перейти на миниатюры для постов, но и здесь нужно будет дополнительно делать правки в приведенном мной коде. Короче говоря, без знания php не разобраться.

  • Андрей   14.02.2011

    Tod, в том то и вопрос, куда добавить ? Вот кусок кода из single.php где должен быть вывод связных постов.

  • polly-princess   14.02.2011

    Спасибо, попробую разобраться. Понять бы только вместо какой строки нужно подставить код вывода миниатюр…

  • Tod   15.02.2011

    Андрей, polly-princess нужно добавить вывод связных постов st_related_posts там, где вы захотите, скорее всего это будет после текста статьи, то есть после the_content(). Также не забывайте, что для вызова такой функции нужен плагин Simple Tags.

  • Анастасия   20.02.2011

    Я пользуюсь плагином Tags for images. Создала слой для тегов и вставила в него скрипт для привязки изображений. Неудобство в том, что нужно самой изменять размер изображений для тегов перед закачкой, но это не страшно.

  • VizN   28.02.2011

    Есть еще один можный плагин. Он выводит заголовко и кусок текста (количество символов можно указать в настройках). Прикрутить бы к нему еще и картинки, было бы просто супер. Плаг сей очень хорош — http://blog.laptev.info/2009/plugin-related-posts-dlya-wordpress.html
    Чем-то по выводу постов схож с твоей наработкой. Картинки ем нужны позарез))

  • Tod   28.02.2011

    VizN, сделай по аналогии с моим руководством) правда конечно в коде плагина нужно будет ориентироваться.

  • Юлия   05.03.2011

    «Находим в нем директорию inc, а в ней файл client.php»
    А у меня нет такого файла… есть разные «client», но с приставной «class» впереди…

  • Tod   05.03.2011

    Юлия, вы уверены, что смотрите файлы плагина Simple Tags? то есть путь должен быть такой wp-content/plugins/simple-tags/inc/client.php

  • Николай   10.04.2011

    хм… Интересно а с новым Simple Tags будет работать эта фишка?

  • Tod   10.04.2011

    Николай, сложно сказать, в новой версии Simple Tags кое-что поменялось весьма радикально.

  • Евгений   18.05.2011

    Здравствуйте, Тод.

    Сделал по вашему рецепту :)
    Спасибо!

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

    Как можно масштабировать изображение вместо обрезания?

  • Евгений   18.05.2011

    Или может быть можно выводить сразу миниатюры (они у меня есть для каждой записи)?

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

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

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

Поиск:
Последние посты
 
Категории
Страницы
Архив
Лучшее в категории

Облако тегов
Скажи свое мнение!

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

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

Загрузка ... Загрузка ...
Друзья проекта
Последние новости
Все новости интернета »
Актуальные заметки