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

Как без плагинов вывести похожие записи с картинками и анонсами | часть 1 | n-wp.ru Настройки
👍 Научим создавать сайты на WordPress бесплатно за 19 уроков. Подробнее →

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

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

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

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

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

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];
  if(empty($first_img)) {
    $first_img = "http://n-wp.com/files/default.jpg"; // Ссылка на заглушку
  }
  return $first_img;
} 

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

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. Лариса Клепачева

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

    Ответить
    1. tiaurus

      А первую часть кода вы вставили по инструкции? Второе без первого не работает.

      Ответить
  2. Лариса Клепачева

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

    Ответить
    1. tiaurus

      Ну так уменьшите. За ширину картинок во второй части кода отвечает

      width="250"
      Ответить
      1. tiaurus

        И не забудьте отправить ссылку на этот пост в вашу любимую социальную сеть.

        Ответить
  3. Лариса Клепачева

    Спасибо, уменьшила. А от чего зависит ширина таблицы? Никак не могу ее подстроить, чтобы на сайдбар не залезала

    Ответить
  4. tiaurus

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

    <table border="0" cellspacing="10" width="ШИРИНА ТАБЛИЦЫ">
    Ответить
  5. Лариса Клепачева

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

    Ответить
    1. tiaurus

      Скорее всего синтаксическая ошибка. Проверяйте скобки и кавычки различные.

      Ответить
  6. Nika

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

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

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

      Ответить
  7. Nika

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

    Однако, покопалась я у вас и нашла для себя вот этот вариант https://n-wp.ru/kak-bez-plaginov-vyivesti-pohozhie-zapisi-s-miniatyurami-chast-1/, пусть и без анонса, но зато теперь у меня связанные записи с картинками.
    Еще раз огромное спасибо за вашу щедрость и доходчивые описания, второй день читаю и тут же пробую, всё получается с первого раза.

    Ответить
    1. Да, тоже выход, причем унирверсальный. Спасибо за положительный отзыв!

      Ответить
  8. Евгений Константинов

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

    Ответить