n-wp.ru — блог о WordPress
Как без плагинов вывести похожие записи с картинками и анонсами | часть 1 | n-wp.ru

Как без плагинов вывести похожие записи с картинками и анонсами | часть 1

Насколько я понимаю, многие интересуются выводом похожих записей с изображениями. Звучат даже упреки в отсутствии точной информации по этой теме. Судя по количеству просмотров поста Как вывести похожие записи | contextual related post и количеству комментариев к этому посту, многих интересует именно вывод картинок из похожих постов. Могу сказать, что кто ищет — тот всегда найдет, и лично я для себя сделал такой код, который выводит последние записи с картинками и кратким содержимым, обобщив множество материалов на эту тему, опубликованных в этом блоге.

Как без плагинов вывести похожие записи с картинками и анонсами | часть 1

Для начала нужно научить блог выводить картинки из постов. В принципе, сделать это не сложно, используя стандартные функции отображения миниатюр. Однако я обнаружил для себя не очень красивую работу этих функций: картинки выводятся непропорционально. Если в посте была опубликована прямоугольная картинка, то она при выводе в другом месте будет показана, как квадрат. И даже если в размерах миниатюры указать не квадратные, а прямоугольные данные, то картинка все равно может отобразиться искаженной, ведь не во всех изображениях блога мы используем одни и те же пропорции между шириной и высотой. Можно, конечно, использовать дополнительные поля, в которых прописывать заранее и отдельно подготовленные миниатюры определенных размеров для каждого поста, но мне это не удобно. Я не хочу тратить время на создание дополнительных картинок, да и размер хостинга не у всех безграничный, чтобы вмещать дополнительные файлы, по сути дела не нужные.

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

Чтобы использовать пропорциональный вывод, добавьте в файл functions.php такой код:

Этот код позволяет выводить изображения заданной ширины пропорционально. Обратите в нем внимание на ссылку на заглушку — это изображение, которое будет выводиться, если в посте нет вообще никаких картинок. В этой строчке вы должны прописать собственный адрес на картинку по умолчанию.
Теперь осталось только вывести список похожих записей, вставив в него по одному изображению из этих записей. Как это сделать, я напишу во второй части публикации.

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

14 комментариев

  • А у меня не получилось, выводится только надпись «Похожие посты» и пустой прямоугольник под изображение. Почему-то нет даже намека на заголовки записей или анонсы (код взяла из 2 части)

  • Ну, конечно нет :) Сейчас все сделала и получила анонсы с картинками. Но картинки излишне большие получаются для небольшой ширины основной части блога

  • Минимальная ширина ячейки 110, расстояние между ячейками 10. Сколько выводите картинок, три? (110*3)+(10*4)=370
    Попробуйте поиграть с этими цифрами. Или же можно удалить ширину ячеек, но вставить общую ширину таблицы:

  • Поиграла с цифрами, получила на локальном то, что хотела. Закачала файлы на удаленный, пишет ошибку в файле single.php в строчке, где указан размер картинки. Обидно :( Все проверила, на локальном работает. Не подскажите, что это может быть?

  • Спасибо Вам за вашу работу, блог изумительный, изложение материала просто и понятно.

    Столкнулось с такой проблемой: у меня в записях изображение прописывается через произвольное поле image, других картинок нет, можно как-то выводить в связанных записях эти картинки из произвольных полей? Сейчас у меня выводится заглушка, а картинки записей не цепляются.

    • Ох не люблю я использовать произвольные поля для картинок. Вот так вот захочешь сменить тему, а картинки после смены отображаться не будут.
      В принципе можно покопаться, но не за просто так — на это нужно время.

  • Я теперь тоже не люблю, но по неопытности использовала такую тему.

    Однако, покопалась я у вас и нашла для себя вот этот вариант http://n-wp.ru/5570, пусть и без анонса, но зато теперь у меня связанные записи с картинками.
    Еще раз огромное спасибо за вашу щедрость и доходчивые описания, второй день читаю и тут же пробую, всё получается с первого раза.

  • Подскажите, всё сделал по инструкции. А отображается во всех записях только заглушка….

/* ]]> */